Ajax更新面板和样式 [英] Ajax update panels and styles
问题描述
我有一个样式为js和CSS的按钮，每当我单击该按钮(进行回发)时，它就会在更新面板中显示它会丢失样式吗?
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: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");});
artLoadEvent.add(function() { artButtonsSetupJsHover("art-button"); });
推荐答案
您可能在onload事件中在js中设置了样式，但是此事件仅触发一次，然后在每次回发中更新面板都不会通过它.您必须这样附加到PageRequestManager页面加载事件:
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:
在ScriptManager声明之后，您将编写此代码，并且每次您在内部进行回发时，脚本都将运行.
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>
或直接从Sys.Application.add_load:
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>
这篇关于Ajax更新面板和样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
