Ajax update panels and styles
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">
<asp:Scrip开发者_Go百科tManager 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"); });
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>
There are some cases that I can think of
- You change the style on code behind.
- You change the style with script so after the update you did not run the script again.
- 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.
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.
加载中,请稍侯......
精彩评论