jquery JScrollPane ms ajax Update funktioniert nicht nach Post zurück

https://stackoverflow.com/questions/1565478

21-09-2019
|

Frage

Ich habe ein neues Design für eine Website und in der Gestaltung des Designers verwendeten jquery erhalten. Ich bin die Umsetzung des Entwurfs nicht in eine ASP.NET Ajax-Anwendung.

Aber ich lief in ein Problem. Ich habe eine Seite mit einem Update-Panel und ein Menü. Wenn ein Menüpunkt ein Benutzer-Steuerelement geklickt wird, wird dynamisch in einen Platzhalter auf dem Update-Panel geladen. Dies macht, dass die Seite nicht vollständig aktualisiert, sondern nur der Update-Panel.

Jetzt ist der Inhalt in dem Benutzersteuerelement enthält eine scrollpane, die auf die maximale Höhe des Fensters erstreckt. Das erste Mal, dass fein läuft, aber wenn ein Menüpunkt angeklickt wird und die neue Benutzersteuerung geladen wird, welchen Inhalt Hexe hat enthält die gleiche scrollpane. Die Höhe ist nicht auf die maximale Höhe des Fensters verlängert, es verwendet dann nur die Höhe er braucht. Das gleiche passiert, wenn ich nicht enthalten die jquery Dateien, so dass es etwas mit der jscript Bibliothek zu tun hat.

Die Skripte, die in der Seite verwendet werden:

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

Haupt Code der Seite, lädt die Haupt-Seite:

<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>

Hauptcode der Benutzersteuerung:

<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-Code:

 #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;
}

Was mache ich falsch?

-Code zum Ändern der Größe des Blocks:

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();

Lösung

Dies ist der Fall, weil die Steuerung im Wesentlichen dem Browser und dem jQuery neu gestrichen werden, ist, dass Sie für die Scroll-Scheibe initialisiert nicht mit dem Neuanstrich initialisiert wurde.

Sie können in eine Javascript-Funktion tippen, die Sie ermöglicht den jQuery-Code neu zu initialisieren. Ich werde ein schnelles Beispiel greifen, stellen Sie sicher, die Scriptmanager auf Ihrer Seite haben (Sie sollten da sein ein Update-Panel ...) ...

<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>

Andere Tipps

Danke RSolberg, Ihre Lösung gearbeitet me..I ist mit JScrollPane für Apple devices..and es mit Update-Panel funktioniert. Hier ist meine aktualisierte Code:

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow