问题
I have received a new design for a website and in the design the designer used jquery. I'm implementing the design no into an ASP.NET Ajax application.
But I ran into a problem. I have a page with an update panel and a menu. When a menu item is clicked a user control is loaded dynamically into a placeholder on the update panel. This makes that the page is not totally refreshed but only the update panel.
Now the content in the user control contains a scrollpane that extends to the maximum height of the window. The first time that runs fine, but when a menu item is clicked and the new user control is loaded which has content witch includes the same scrollpane. The height isn't extended to the maximum height of the window, it then only uses the height it needs. The same thing happens when I don't include the jquery files so it has to do something with the jscript library.
The scripts that are used in the page:
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
Main code of the page that loads the main page:
<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>
main code of the user control:
<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> <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;
}
What am I doing wrong?
Code for resizing the block:
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();
回答1:
This is occurring because the control is essentially being repainted to the browser and the jQuery that you initialized for the scroll-pane was not initialized with the repainting.
You can tap into a javascript function that allows you to re-initalize the jQuery code. I'll grab a quick example, make sure you have the ScriptManager on your page (you should since its an 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>
回答2:
Thanks RSolberg, your solution worked for me..I am using JScrollpane for Apple devices..and it works with update panel. Here is my updated 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();
}
}
来源：https://stackoverflow.com/questions/1565478/jquery-scrollpane-ms-ajax-updatepanel-doesn-t-work-after-post-back