Обновление панелей и стилей Ajax - PullRequest
Новая
       5

Обновление панелей и стилей Ajax

2 голосов
/ 14 сентября 2010

У меня есть кнопка, стилизованная под js и css, и она внутри панели обновлений каждый раз, когда я нажимаю кнопку (сделать обратную передачу), она теряет стиль?

Вы уверены, что это легко сделать, понимаете? 

<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");});

Ответы [ 3 ]

2 голосов
/ 14 сентября 2010

Вы, вероятно, устанавливаете стиль в js в событии onload, но это событие вызывается только один раз, а затем при каждой обратной передаче панель обновления не проходит через него.Вы должны присоединиться к загруженному событию PageRequestManager следующим образом:

После объявления ScriptManager вы пишете этот код, и скрипт запускается каждый раз, когда вы выполняете обратную передачу внутри.от Sys.Application.add_load: 

<script type="text/jscript">
<!--
 Sys.Application.add_load(
     function pageLoaded(sender, args) {
         document.getElementById("Button1").style.fontWeight = "bold";
     });
-->
</script>
1 голос
/ 14 сентября 2010

Если вы устанавливаете стили с помощью js, вам может потребоваться зарегистрировать эти js в ScriptManager на странице. Таким образом, скрипт будет загружен при частичной обратной передаче страницы.

1 голос
/ 14 сентября 2010

Есть несколько случаев, о которых я могу подумать

  1. Вы меняете стиль в коде позади.
  2. Вы изменили стиль с помощью скрипта, чтобы после обновления вы больше не запускали скрипт.
  3. Вы меняете DOM-код вашей кнопки, чтобы стиль больше не работал для этой позиции.

. Если вы дадите нам код, возможно, мы увидим, в чем проблема.

...