views:

25

answers:

3

I have a button styled with js and css and its inside an update panel everytime i click the button (do postback) it loses style ?

pretty sure its an easy issue here , any idea ?

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" class="art-button" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>
</form>

function artButtonsSetupJsHover(className) {
var tags = ["input", "a", "button"];
for (var j = 0; j < tags.length; j++){
    var buttons = xGetElementsByClassName(className, document, tags[j]);
    for (var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        if (!button.tagName || !button.parentNode) return;
        if (!artHasClass(button.parentNode, 'art-button-wrapper')) {
            if (!artHasClass(button, 'art-button')) button.className += ' art-button';
            var wrapper = document.createElement('span');
            wrapper.className = "art-button-wrapper";
            if (artHasClass(button, 'active')) wrapper.className += ' active';
            var spanL = document.createElement('span');
            spanL.className = "l";
            spanL.innerHTML = " ";
            wrapper.appendChild(spanL);
            var spanR = document.createElement('span');
            spanR.className = "r";
            spanR.innerHTML = " ";
            wrapper.appendChild(spanR);
            button.parentNode.insertBefore(wrapper, button);
            wrapper.appendChild(button);
        }
        artEventHelper.bind(button, 'mouseover', function(e) {
            e = e || window.event;
            wrapper = (e.target || e.srcElement).parentNode;
            wrapper.className += " hover";
        });
        artEventHelper.bind(button, 'mouseout', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            wrapper.className = wrapper.className.replace(/hover/, "");
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
        artEventHelper.bind(button, 'mousedown', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className += " active";
        });
        artEventHelper.bind(button, 'mouseup', function(e) {
            e = e || window.event;
            button = e.target || e.srcElement;
            wrapper = button.parentNode;
            if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, "");
        });
    }
}

}

artLoadEvent.add(function() { artButtonsSetupJsHover("art-button"); });

+1  A: 

There are some cases that I can think of

  1. You change the style on code behind.
  2. You change the style with script so after the update you did not run the script again.
  3. You change the DOM potition of your button so the style is not work any more for this position.

.If you give us the code maybe we can see whats the problem.

Aristos
Code Added. plz check
Stacker
@Stacker was the 2 options, some other answer in my absent.
Aristos
+1  A: 

If you're setting styles with js, you may need to register that js with the ScriptManager on the page. That way the script will be loaded on partial page postbacks.

derek
+1  A: 

You are probably setting the style in js in the onload event, but this event is only fired once and then in every postback the update panel does not pass through it. You have to attach to the PageRequestManager pageloaded event like this:

After the ScriptManager declaration you write this code and the script will run each time you do a postback inside.

<script type="text/jscript">
<!--
 var prm = Sys.WebForms.PageRequestManager.getInstance();
 prm.add_pageLoaded(pageLoaded);

 function pageLoaded(sender, args) {
     document.getElementById("Button1").style.fontWeight = "bold";
 }
-->
</script>  

Or directly from Sys.Application.add_load:

<script type="text/jscript">
<!--
 Sys.Application.add_load(
     function pageLoaded(sender, args) {
         document.getElementById("Button1").style.fontWeight = "bold";
     });
-->
</script> 
jmservera
how to i instead of Sys.Application.add_load(code) i do Sys.Application.add_load(jsfile) ?
Stacker
You have to register the script in script manager and call to the method in add_load
jmservera