与SignalR jQuery脚本冲突 [英] Jquery script conflict with SignalR

问题描述

我遇到的似乎应该是解决相对简单，但到目前为止，答案已经躲避了我的问题。

我使用SignalR返回到主页一个新的局部视图。当我的数据库更新新信息的更新与新的局部视图div标签的客户端函数被调用。到目前为止好。

现在我想添加更多的JQuery code显示/隐藏子行中我的表中出现的局部视图。

问题是到目前为止，我只能得到一个或其他脚本工作。如果我拿到表显示/隐藏功能的工作，它打破了我的剧本signalR，因此我当服务器触发不再接收更新的部分景色。同样，当signalR工作正常，我不能再激活显示/隐藏功能。

SignalR出现使用jQuery的旧版本，但是我的额外脚本工作，我不得不添加到jQuery的-1.10.2的参考。 SignalR不需要jQuery的参考，只需要jQuery的-signalR-2.1.2参考。

所有这些脚本位于该局部视图显示在主页上，而不是局部视图上。

我也试图做的JQuery与两个脚本没有冲突也没有用。

这似乎有事情做的jQuery的两个版本在同一时间被引用，但我不知道在哪里何去何从，使两个脚本一起工作。无论脚本放在第一，是工作的人。

下面仅与signalR脚本，它的依赖关系：

 ＆LT;脚本的src =/脚本/ jquery.signalR-2.1.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 参考自动生成的SignalR枢纽脚本。 - ＆GT;
＆LT;脚本的src =/ signalr /集线器＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（函数（）{
        //声明一个代理来引用枢纽。
        VAR通知= $ .connection.monitoringHub;        //调试;
        //创建集线器可以打电话到广播消息的功能。
        notifications.client.updateDetails =功能（）{
            getDetails（）
        };
        //开始连接。
        $ .connection.hub.start（）。完成（功能（）{
            //警报（连接启动）
            getDetails（）;
        }）失败（函数（五）{
            警报（E）;
        }）;
    }）;    功能getDetails（）{
        VAR TBL = $（'＃systemDetails'）;
        $阿贾克斯（{
            网址：'/Monitoring/GetDetails/@Model.Customer.SONumber.ToString（）'，
            的contentType：应用程序/ HTML;字符集：utf-8'，
            输入：GET，
            数据类型：HTML
        }）。成功（功能（结果）{
            。tbl.empty（）追加（结果）;
        }）错误（函数（）{        }）;
    }
＆LT; / SCRIPT＆GT;
 

下面是我的用户脚本与所需的依赖性：

 ＆LT;脚本的src =/脚本/ jQuery的-1.10.2.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（身体）。在（点击，#deviceDetail功能（）{
        $（本）.closest（TR）next（）的切换（慢）。
        $（本）.toggleClass（glyphicon加征glyphicon  - 减号）;
    }）;
    ＆LT; / SCRIPT＆GT;
 

解决方案

jQuery的单击事件 $（。glyphicon加符号）。点击仅在有线为存在于DOM脚本时，最初跑（或页面第一次加载）项目。在稍后的时间追加到通过AJAX的表中的任何项目将不会有事件接线。

我没有你的HTML，但你可以尝试类似如下：

  $（身体）。在（点击，glyphicon加符号功能（）{
   $（本）.closest（TR）next（）的切换（慢）。
}）;
 

请注意：身体可能不是最好的选择，这里的想法是到单击事件添加到存在于AJAX调用之前DOM的项目。一个更好的选择可能是父表的标签。

I am running into an issue that seems like it should be relatively simple to solve but so far the answer has eluded me.

I am using SignalR to return a new partial view to the main page. The client function which updates the div tag with a new partial view is called when my database is updated with new information. So far so good.

Now I want to add more JQuery code to hide/show child rows in my tables which appear in the partial view.

The problem is so far I can only get one or the other script to work. If I get the table show/hide functionality working, it breaks my signalR script and thus I no longer receive updated partial views when triggered by the server. Likewise, when signalR is working correctly, I can no longer activate the show/hide functionality.

SignalR appears to use an older version of JQuery, however for my added scripts to work I have to add a reference to jquery-1.10.2. SignalR does not need a jquery reference, it only needs the jquery-signalR-2.1.2 reference.

All these scripts are located on the main page which the partial view appears on, not the partial view.

I have also tried to do JQuery no conflict with both scripts to no avail.

It seems to have something to do with two versions of JQuery being referenced at the same time, but I'm not sure where to go from here to make both scripts work together. Whichever script is placed first, is the one that works.

Here is the signalR script with only it's dependencies:

<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub.
        var notifications = $.connection.monitoringHub;

        //debugger;
        // Create a function that the hub can call to broadcast messages.
        notifications.client.updateDetails = function () {
            getDetails()
        };
        // Start the connection.
        $.connection.hub.start().done(function () {
            //alert("connection started")
            getDetails();
        }).fail(function (e) {
            alert(e);
        });
    });

    function getDetails() {
        var tbl = $('#systemDetails');
        $.ajax({
            url: '/Monitoring/GetDetails/@Model.Customer.SONumber.ToString()',
            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            dataType: 'html'
        }).success(function (result) {
            tbl.empty().append(result);
        }).error(function () {

        });
    }
</script>

Here is my user script with the required dependency:

<script src="/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $("body").on("click", "#deviceDetail", function () {
        $(this).closest('tr').next().toggle("slow");
        $(this).toggleClass("glyphicon-plus-sign glyphicon-minus-sign");
    });
    </script>

解决方案

The jquery click event$(".glyphicon-plus-sign").click is only wired up for items that exist in the DOM when the script is initially ran (or page is first loaded). Any items appended to your table via AJAX at a later time will not have the event wired up.

I don't have your html, but you may try something like below:

$("body").on("click",".glyphicon-plus-sign", function () {
   $(this).closest('tr').next().toggle("slow");
});

Note: body is probably not the best choice, the idea here is to add the click event to an item that exists in the DOM before the AJAX call. A better option may be the parent table tag.

这篇关于与SignalR jQuery脚本冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！