后经过jQuery的滚动窗格MS AJAX的UpdatePanel不起作用回 [英] jquery scrollpane ms ajax updatepanel doesn’t work after post back

查看：162
本文介绍了后经过jQuery的滚动窗格MS AJAX的UpdatePanel不起作用回的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我收到了新的设计一个网站，并在设计中使用设计的jQuery。我实施的设计没有到ASP.NET Ajax应用程序。

不过，我遇到了一个问题。我有一个更新面板和菜单页面。当一个菜单项被点击用户控制被动态加载到更新面板上的占位符。这使得该页面不完全刷新而只更新面板

现在在用户控制内容包含一个滚动窗格延伸到窗口的最大高度。第一次运行正常，但单击菜单项，并在新的用户控件加载有内容魔女包括相同的滚动窗格。高度不延伸到窗口的最大高度，然后它仅使用需要的高度。同样的事情发生时，我不包括jQuery的文件，所以它做一些与JScript的库。

这将在页面中使用的脚本：

 脚本/的jquery.js
jquery.watermark.js
脚本/ jquery.customSelect.js
脚本/ jquery.easing.js
脚本/ jquery.logger.js
脚本/ jquery.sizes.min.js
脚本/ jquery.mousewheel.js
脚本/ jquery.em.js
脚本/ jquery.core.js
脚本/ jquery.accordion.js
脚本/ jquery.tabs.js
脚本/ jquery.scroll.js
脚本/ jquery.datepick.js
脚本/ jquery.datepick，nl.js
脚本/ jquery.scripts.js

加载主​​页页面的主要code：

 ＆LT;身体GT;
＆LT;表格ID =Form1的=服务器＆GT;
＆LT; D​​IV＆GT;
＆LT; ASP：ScriptManager的ID =ScriptManager1=服务器＆GT;
＆LT; / ASP：ScriptManager的＆GT;
＆LT; D​​IV ID =容器＆GT;

＆LT; D​​IV ID =标志＆GT;＆LT; / DIV＆GT;
    ＆LT; UC2：菜单ID =ucMenu=服务器/＆GT;
    ＆LT; UC3：Kruimelpad ID =ucKruimelpad=服务器/＆GT;
    ＆LT; ASP：UpdatePanel的ID =upMain=服务器的UpdateMode =始终＆GT;
    ＆LT;的ContentTemplate＆GT;
 ＆LT; ASP：占位符ID =phMain=服务器/＆GT;
 ＆LT; /的ContentTemplate＆GT;
 ＆LT; / ASP：UpdatePanel的＆GT;
＆LT; D​​IV ID =侧边栏＆GT;
   ＆LT; UC1：登录ID =ucLogin=服务器/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =clearboth＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

＆LT; UC4：页脚ID =ucFooter=服务器/＆GT;

＆LT; / DIV＆GT;
＆LT; /形式GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

用户控件的主要code：

 ＆LT; D​​IV CLASS =editMenu＆GT;
＆LT; / DIV＆GT;
 ＆LT; D​​IV ID =内容类=橘子吧＆GT;
   ＆LT; D​​IV ID =contentVlak级=scroll_pane＆GT;
＆LT; H1＆GT;＆LT; ASP：标签ID =lblNoAccount=服务器文本=＆LT;％$资源：登录，no_account％＆GT;＆GT;＆LT; / ASP：标签＆gt;＆LT; / H1＆GT;

＆LT; P＆GT;＆LT; ASP：标签ID =lblMainText=服务器文本=＆LT;％$资源：登录，main_text％＆GT;＆GT;＆LT; / ASP：标签＆gt;＆安培; NBSP;＆LT; ASP：LinkBut​​ton的
                    ID =lbAccountAanvragen=服务器
                    文本=＆LT;％$资源：登录，demo_account_aanvragen％＆gt;中
                    的onclick =lbAccountAanvragen_Click＆GT;＆所述; / asp的：LinkBut​​ton的＆GT;＆所述; / P＆GT;
            ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

CSS code：

 ＃内容{
 背景：网址（../图像/ contentBg.png）重复-Y左上角;
 位置：亲属;
 顶部：58px;
 保证金：0px 0px 0px 11像素很重要;
 宽度：886px;
 填充：20像素20像素20像素10px的;
 }

  #contentVlak {
  宽度：676px;
  高度：100％;
  填充：0px 20px的;
  }

   #contentVlak p {
   的line-height：20px的;
   保证金底：10px的;
   字体大小：11.5px;
   }

   #contentVlak一个{
   字体重量：大胆的;
   文字修饰：无;
   }

    #contentVlak一：悬停{
    文字装饰：下划线;
    }


/ *滚动面板样式* /

.scroll_pane {
 溢出：汽车;
}

.jScrollPaneContainer {
 位置：亲属;
 溢出：隐藏;
 的z-index：1;
}

.jScrollPaneTrack {
 位置：绝对的;
 光标：指针;
 右：0;
 顶部：0;
 高度：100％;
 背景：网址（../图像/ scrollTrack.png）重复-Y左上角;
}

.jScrollPaneDrag {
 位置：绝对的;
 背景：＃666;
 光标：指针;
 溢出：隐藏;
 ！高度：20px的重要;
 宽度：20像素;
 背景：网址（../图像/ scrollPane.png）不重复左上;
}
.jScrollPaneDragTop {
 位置：绝对的;
 顶部：0;
 左：0;
 溢出：隐藏;
}
.jScrollPaneDragBottom {
 位置：绝对的;
 底部：0;
 左：0;
 溢出：隐藏;
}
a.jScrollArrowUp {
 显示：块;
 位置：绝对的;
 的z-index：1;
 顶部：0;
 右：0;
 文本缩进：-2000px;
 溢出：隐藏;
 背景：网址（../图像/ scrollUp.png）不重复左上;
 高度：16px的;
 宽度：16px的;
}


a.jScrollArrowDown {
 显示：块;
 位置：绝对的;
 的z-index：1;
 底部：0;
 右：0;
 文本缩进：-2000px;
 溢出：隐藏;
 背景：网址（../图像/ scrollDown.png）不重复左上;
 高度：16px的;
 宽度：16px的;
}

我是什么做错了吗？

$ C $下调整块：

 函数resizeBlock（对象）{

变种WINDOWHEIGHT = $（窗口）.height（）;
VAR开始= object.offset（）顶部。
。VAR利润率= object.margin（）底+ object.margin（）顶部。
。VAR填充= object.padding（）底+ object.padding（）顶部。

VAR totalHeight = WINDOWHEIGHT  - 启动 - 填充 -  9;

object.height（totalHeight）;

// Hoogtes面包车滚动鼎fixen
object.find（scroll_pane。）的高度（totalHeight）。
。object.find（。jScrollPaneContainer）高度（totalHeight）;
。object.find（。jScrollPaneTrack）高度（totalHeight）;
object.find（jScrollPaneDrag）高度（totalHeight  -  32）。

//对象opnieuw toevoegen
$（scroll_pane）JScrollPane中（{showArrows：真，scrollbarWidth：16}）;。
}

$（文件）。就绪（函数（）{

    // Functie zie hierboven
    resizeBlock（$（＃内容））;
    $（scroll_pane）JScrollPane中（{showArrows：真，scrollbarWidth：16}）;。

    $（窗口）.resize（函数（）{
        resizeBlock（$（＃内容））;
    }）;


    //自定义selectboxes

    如果（$（默认使用选。）长度GT; 0）{
        $（默认使用选）选择框（）;
    }


    //水印运主页

    如果（$（＃relatie code）长度GT; 0）{
        $（＃relatie code）水印（relatie code，＃808285）。
    }

    如果（$（＃wachtwoord）长度GT; 0）{
        $（＃wachtwoord）水印（wachtwoord，＃808285）。
    }

    //手风琴箱

    如果（$（手风琴）长度GT; 0）{
        $（'手风琴'）。手风琴（{
            标题：.accordionTrigger，
            autoheight：真正的，
            动画：'100'
        }）;

        如果（$（accordionTrigger）。hasClass（选择））{
            $（＃accordionLastTrigger）addClass（activeLastTrigger）;
        }
    }

    // Tabbladen

    如果（$（＃TabContainer的）长度GT; 0）{
        $（'＃TabContainer的＆GT; UL）选项卡（）。
    }

    // IE 6哈弗修复VOOR菜单的

    如果（jQuery.browser.msie）{
        如果（parseInt函数（jQuery.browser.version）== 6）{
        $（'UL礼）。悬停（函数（）{
            $（本）.addClass（'ie6hover'）;
        }， 功能（） {
            $（本）.removeClass（'ie6hover'）;
        }）;
    }

}
}）;！如果（typeof运算（系统）==未定义）Sys.Application.notifyScriptLoaded（）;

解决方案

这是发生由于控制基本上被粉刷一新，以您为滚动窗格初始化没有与重绘初始化浏览器和jQuery的。

您可以挖掘到一个JavaScript功能，可以让您重新initalize jQuery的code。我会抓住一个简单的例子，请确保您有使用ScriptManager您的网页上（你应该，因为它的更新面板...）... 

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    页面加载函数（）{
        如果（！Sys.WebForms.PageRequestManager.getInstance（）。get_isInAsyncPostBack（））{
            。Sys.WebForms.PageRequestManager.getInstance（）add_endRequest（endRequestHandler）;
        }
    }
    功能endRequestHandler（发件人，参数）{
        //重做滚动窗格jQuery的初始化这里...
    }

＆LT; / SCRIPT＆GT;

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

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

解决方案

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>

这篇关于后经过jQuery的滚动窗格MS AJAX的UpdatePanel不起作用回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆