Question

我最近在ASP.NET MVC Web应用程序中添加了一个功能。当用户单击表中的项目时，会显示一个页面。该页面使用AJAX在页面的HTML中的单个div中显示部分视图。部分视图使用Telerik Kendo UI定义和显示对话框和DropDownList控件。这很复杂，因为JavaScript导入都在页面的View上，而PartialView只是构建要在div中显示的HTML。

我在页面上编写的JavaScript包含一个jQuery document.ready事件处理程序：

$(document).ready(
    function () {
        if ( $('#details-map').val() != '' )
            $('#details-map').remove();

        var urlTail = '?t=' + (new Date().getTime());

        // Make the AJAX call and load the result into the details box.
        $('#detailsbox').load('<%= Url.Action("Details") %>' + '/' + '<%: Model.Id %>' + urlTail, displayDetails);
    }
)

当我在localhost上运行应用程序时，这可以正常工作。将页面部署到开发服务器时出现问题。在这种情况下，还有一个额外的document.ready事件处理程序，它由Telerik Kendo / ASP.net MVC扩展发送到页面的最末端：

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
if(!jQuery.telerik) jQuery.telerik = {};
jQuery.telerik.cultureInfo=...;
});
//]]>
</script>

在这个页面上，我编写的$(document).ready事件处理程序在Telerik处理程序之前运行，我的代码显然依赖于首先运行的Telerik处理程序。当我的第一次运行时，我收到一个JavaScript错误，上面写着“jQuery.telerik.load不是函数”。

由于在我的localhost上没有发生这种情况，我如何确保首先运行第二个文档就绪事件处理程序？

编辑：

经过更多的研究，我发现问题在于我的答案中提到的两个脚本，它们应该通过我页面使用的母版页中的以下行写入页面：

<%= Html.Telerik().ScriptRegistrar().Globalization(true).jQuery(false).DefaultGroup(group => group.Combined(false).Compress(false)) %>

没有被加载。换句话说，上述行没有任何作用。但它适用于使用相同母版页的另一个页面。我在线上放置了一个断点，它正在执行。有没有人有任何想法？

Answer 1

您要么必须在页面上的第二个之后显示它，要么做一些我讨厌建议的事情：

$(document).ready(function() {
    function init {
        /* all your code that needs to be run after telerik is loaded */
    }
    if ( $.telerik ) {
        init();
    } else {
        setTimeout(function check4telerik() {
            if ( $.telerik ) {
                return init();
            }
            setTimeout(check4telerik, 0);
        }, 0);
    }
});

因此，如果加载了$.telerik，它就会运行，否则它会轮询直到它被设置，并且当它被设置时，它会运行代码。它并不漂亮，但是如果你没有更多的控制权，那么它可能是你唯一的选择，除非$.telerik发出某种可以挂钩的事件。

Answer 2

在花了几个小时研究之后，我终于开始工作了。问题是，没有加载Telerik DropdownList控件和Window控件使用的两个JavaScript文件。

在浏览页面上的JavaScript时，我遇到了由Telerik生成的脚本：

if(!jQuery.telerik){
jQuery.ajax({
url:"/Scripts/2011.3.1306/telerik.common.min.js",
dataType:"script",
cache:false,
success:function(){
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}});}else{
jQuery.telerik.load(["/Scripts/2011.3.1306/jquery-1.6.4.min.js","/Scripts/2011.3.1306/telerik.common.min.js","/Scripts/2011.3.1306/telerik.list.min.js"],function(){ ... });
}

此脚本是在我的局部视图中调用Html.Telerik.DropdownListFor()发出的。我猜测代码中提到的两个JavaScript文件包含的代码telerik.common.min.js和telerik.list.min.js没有发出，因为调用是在局部视图上。或者我本来应该把它们包括在内。我不知道（我对这些控件很新）。奇怪的是，当我在本地运行时，一切都有效，所以我不明白。

无论如何，我在<script>添加了两个View标记以包含这些文件，一切都开始有效。也就是说，我在页面中添加了以下标记：

<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.common.min.js"></script>
<script type="text/javascript" src="../../Scripts/2011.3.1306/telerik.list.min.js"></script>

生活和学习。

多个jQuery document.read事件处理程序以错误的顺序运行

2 个答案: