Question

我想知道是否有任何常见或已知的冲突/解决方法可以同时使用jquery和ASP.Net ajax。具体来说，使用JQuery的wrapinner方法然后稍后调用.Net的$find方法似乎存在一些问题。

这是我正在使用的标记的一般概念。这是一个非常复杂的布局，所以我在大部分时间都将它修剪下来。对不起它太密集了。 resizePage函数中发生错误。

外页

<html>
<head></head>
<body>
    <div>
    <telerik:radsplitter id="rsMain" runat="server" orientation="Vertical" height="100%"
        width="100%" bordersize="0" panesbordersize="0" resizewithbrowserwindow="true">
        <telerik:radpane id="rpCentral" runat="server" scrolling="None">
        <div id="wrapper" style="padding: 0 0 0 0; margin: 0 0 0 0;">
            <iframe name="left_frame" src="test.aspx" runat="server" id="left_frame" width="100%"
            frameborder="0" marginheight="0" marginwidth="0" height="100%"></iframe>
        </div>
        </telerik:radpane>
        <telerik:radsplitbar id="rsbRHS" runat="server" collapsemode="Backward">
        </telerik:radsplitbar>
        <telerik:radpane id="rpRHS" runat="server" width="30%" minwidth="50" minheight="50">
        <iframe name="right_frame" src="field_description.aspx" width="100%" frameborder="0"
            marginheight="0" marginwidth="0" height="100%" scrolling="auto"></iframe>
        </telerik:radpane>
    </telerik:radsplitter>
    <script type="text/javascript">

        function ResizePage() {
            var width = widthPCT * jQuery(window).width();
            var panel = $find('<%= rpRHS.ClientID %>');

            var collapsed = panel._isCollapsed();

            $find('<%= rpRHS.ClientID %>').Expand();
            $find('<%= rpRHS.ClientID %>').set_width(width);

            if (collapsed)
                $find('<%= rpRHS.ClientID %>').Collapse();
        };

        function AddScrolling() {
            var body = GetFrameBody();


            if (body.length == 0) {
                setTimeout("AddScrolling()", 500);
                return;
            }

            jQuery(body).wrapInner("<div id='reportwrapper' style='overflow: auto; position: relative;'></div>");
            jQuery(body).css("background-color", "red");

            ResizePage();
        }

        $.noConflict();
        jQuery(document).ready(function () {
            AddScrolling();
        });

        jQuery(window).resize(function () {
            setTimeout(ResizePage, 100);
        });    
    </script>
    </div>
</body>
</html>

内页

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:radscriptmanager id="scriptManager" runat="server" />
    <div>
        <div id="inner" style="height: 2000px; width: 2000px">
          Some Text
        </div>
    </div>
    </form>
</body>
</html>

Answer 1

您可以将jQuery置于noConflict模式，如下所示：

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

我必须在我使用Ajax的页面上执行相同操作。

更新：我注意到你正在使用telerik控件，所以我做了一些搜索并想出了这个：

ASP.NET AJAX $find method failes when used in jQuery's $(document).ready() method。

Stackoverflow的问题/答案可能有所帮助。

Answer 2

使用jquery splitter而不是rad

http://methvin.com/splitter/

JQuery和ASP.Net Ajax发生冲突？

2 个答案: