asp.net - jquery scrollpane ms ajax updatepanelがポストバック後に機能しない

Question

ウェブサイトの新しいデザインを受け取りましたが、そのデザインではデザイナーが jquery を使用していました。ASP.NET Ajax アプリケーションに設計番号を実装しています。

しかし、私は問題に遭遇しました。更新パネルとメニューのあるページがあります。メニュー項目がクリックされると、ユーザーコントロールが更新パネルのプレースホルダーに動的に読み込まれます。これにより、ページが完全に更新されるのではなく、更新パネルのみが更新されます。

これで、ユーザーコントロールのコンテンツに、ウィンドウの最大の高さまで拡張されるスクロールペインが含まれるようになりました。最初は正常に実行されますが、メニュー項目がクリックされ、コンテンツを持つ新しいユーザーコントロールが読み込まれると、同じスクロールペインが含まれます。高さはウィンドウの最大高さまで拡張されず、必要な高さのみが使用されます。jquery ファイルを含めない場合も同じことが発生するため、jscript ライブラリで何かを行う必要があります。

このページで使用されているスクリプト:

scripts/jquery.js
jquery.watermark.js
scripts/jquery.customSelect.js
scripts/jquery.easing.js
scripts/jquery.logger.js
scripts/jquery.sizes.min.js
scripts/jquery.mousewheel.js
scripts/jquery.em.js
scripts/jquery.core.js
scripts/jquery.accordion.js
scripts/jquery.tabs.js
scripts/jquery.scroll.js
scripts/jquery.datepick.js
scripts/jquery.datepick-nl.js
scripts/jquery.scripts.js

メインページをロードするページのメインコード:

<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="container">

<div id="logo"></div>
    <uc2:Menu ID="ucMenu" runat="server" />
    <uc3:Kruimelpad ID="ucKruimelpad" runat="server" />
    <asp:UpdatePanel ID="upMain" runat="server" UpdateMode="Always">
    <ContentTemplate>
 <asp:PlaceHolder ID="phMain" runat="server" />
 </ContentTemplate>
 </asp:UpdatePanel>
<div id="sideBar"> 
   <uc1:Login ID="ucLogin" runat="server" />
</div>
<div class="clearboth"></div>
</div>

<uc4:Footer ID="ucFooter" runat="server" />

</div>
</form>
</body>
</html>

ユーザーコントロールのメインコード:

<div class="editMenu">  
</div> 
 <div id="content" class="orange-bar"> 
   <div id="contentVlak" class="scroll_pane">
<h1><asp:Label ID="lblNoAccount" runat="server" Text="<%$ Resources:Login, no_account %>"></asp:Label></h1>

<p><asp:Label ID="lblMainText" runat="server" Text="<%$ Resources:Login, main_text %>"></asp:Label>&nbsp;<asp:LinkButton 
                    ID="lbAccountAanvragen" runat="server" 
                    Text="<%$ Resources:Login, demo_account_aanvragen %>" 
                    onclick="lbAccountAanvragen_Click"></asp:LinkButton>.</p>
            </div>
    </div>

CSS コード:

 #content {
 background: url(../images/contentBg.png) repeat-y left top;
 position: relative;
 top: 58px;
 margin: 0px 0px 0px 11px !important;
 width: 886px;
 padding: 20px 20px 10px 20px;
 }

  #contentVlak {
  width: 676px;
  height:100%;
  padding: 0px 20px;
  }

   #contentVlak p {
   line-height: 20px;
   margin-bottom: 10px;
   font-size: 11.5px;
   }

   #contentVlak a {
   font-weight: bold;
   text-decoration: none;
   }

    #contentVlak a:hover {
    text-decoration: underline;
    }


/* Scrollpane styles */

.scroll_pane {
 overflow: auto;
}

.jScrollPaneContainer {
 position: relative;
 overflow: hidden;
 z-index: 1;
}

.jScrollPaneTrack {
 position: absolute;
 cursor: pointer;
 right: 0;
 top: 0;
 height: 100%;
 background: url(../images/scrollTrack.png) repeat-y left top;
}

.jScrollPaneDrag {
 position: absolute;
 background: #666;
 cursor: pointer;
 overflow: hidden;
 height: 20px !important;
 width: 20px;
 background: url(../images/scrollPane.png) no-repeat left top;
}
.jScrollPaneDragTop {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
}
.jScrollPaneDragBottom {
 position: absolute;
 bottom: 0;
 left: 0;
 overflow: hidden;
}
a.jScrollArrowUp {
 display: block;
 position: absolute;
 z-index: 1;
 top: 0;
 right: 0;
 text-indent: -2000px;
 overflow: hidden;
 background: url(../images/scrollUp.png) no-repeat left top;
 height: 16px;
 width: 16px;
}


a.jScrollArrowDown {
 display: block;
 position: absolute;
 z-index: 1;
 bottom: 0;
 right: 0;
 text-indent: -2000px;
 overflow: hidden;
 background: url(../images/scrollDown.png) no-repeat left top;
 height: 16px;
 width: 16px;
}

私は何を間違っていますか？

ブロックのサイズを変更するコード:

function resizeBlock(object) {

var windowHeight = $(window).height();
var start = object.offset().top;
var margin = object.margin().bottom + object.margin().top;
var padding = object.padding().bottom + object.padding().top;

var totalHeight = windowHeight - start - padding - 9;

object.height(totalHeight);

// Hoogtes van scroll-ding fixen
object.find(".scroll_pane").height(totalHeight);
object.find(".jScrollPaneContainer").height(totalHeight);
object.find(".jScrollPaneTrack").height(totalHeight);
object.find(".jScrollPaneDrag").height(totalHeight - 32);

// Object opnieuw toevoegen 
$(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 });
}

$(document).ready(function () {

    // Functie zie hierboven
    resizeBlock($("#content"));
    $(".scroll_pane").jScrollPane({ showArrows: true, scrollbarWidth: 16 });

    $(window).resize(function() {
        resizeBlock($("#content"));
    });


    // Custom selectboxes

    if($(".default-usage-select").length > 0) {
        $(".default-usage-select").selectbox();
    }


    // Watermarks op homepage

    if($("#relatiecode").length > 0) {
        $("#relatiecode").Watermark("relatiecode", "#808285");
    }

    if($("#wachtwoord").length > 0) {
        $("#wachtwoord").Watermark("wachtwoord", "#808285");
    }

    // Accordion box

    if($(".accordion").length > 0) {
        $('.accordion').accordion({ 
            header: '.accordionTrigger',
            autoheight: true,
            animate: '100'
        });

        if($(".accordionTrigger").hasClass("selected")) {
            $("#accordionLastTrigger").addClass  ("activeLastTrigger");
        }
    }

    // Tabbladen 

    if($("#tabContainer").length > 0) {
        $('#tabContainer > ul').tabs();
    }

    // IE 6 Hover fix voor menu's

    if (jQuery.browser.msie) {
        if(parseInt(jQuery.browser.version) == 6) {
        $('ul li').hover(function() {
            $(this).addClass('ie6hover');
        }, function() {
            $(this).removeClass('ie6hover');
        });  
    }

} 
});if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

score 4 · Accepted Answer

これは、コントロールが基本的にブラウザーに再描画されており、スクロールペイン用に初期化した jQuery が再描画で初期化されていないために発生しています。

jQueryコードを再初期化できるjavascript関数を利用できます。簡単な例を示します。ページに ScriptManager があることを確認してください (更新パネルなので、そうする必要があります...)...

<script type="text/javascript">
    function pageLoad() {
        if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
        }
    }
    function endRequestHandler(sender, args) {
        //Redo the scroll pane jQuery Initialization here...
    }

</script>

score 1 · Accepted Answer

RSolbergに感謝します、あなたのソリューションは私のために働きました..私はAppleデバイスにJScrollpaneを使用しています..そしてそれはアップデートパネルで動作します。これが私の更新されたコードです：

    if ((navigator.userAgent.indexOf('AppleWebKit') != -1) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('android') != -1) || (navigator.userAgent.indexOf('BlackBerry') != -1)) {
        $('#<%=iWrapper1.clientID%>').jScrollPane();
        $('#<%=iWrapper2.clientID%>').jScrollPane();
        $('.videoDisplay').jScrollPane();
    }


    if (navigator.userAgent.indexOf("MSIE") != -1)
        window.attachEvent("onload", pageLoad)
    else
        window.addEventListener("load", pageLoad, false);


    function pageLoad() {
        if (!Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

        }
    }

    function endRequestHandler(sender, args) {
         if ((navigator.userAgent.indexOf('AppleWebKit') != -1) || (navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1) || (navigator.userAgent.indexOf('android') != -1) || (navigator.userAgent.indexOf('BlackBerry') != -1)) {
            $('#<%=iWrapper1.clientID%>').jScrollPane();
            $('#<%=iWrapper2.clientID%>').jScrollPane();
            $('.videoDisplay').jScrollPane();
        }
    }

asp.net - jquery scrollpane ms ajax updatepanelがポストバック後に機能しない

2 に答える 2

Related

Reference