0

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

我在页面上编写的 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);
    }
)

当我在本地主机上运行应用程序时,这工作正常。当我将页面部署到我们的开发服务器时出现问题。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 不是函数”。

由于这不会发生在我的本地主机上,我如何确保首先运行第二个文档就绪事件处理程序?

编辑:

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

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

没有被加载。换句话说,上面的行什么都不做。不过,它适用于使用相同母版页的另一个页面。我已经在该行上放置了一个断点并且它正在执行。有没有人有任何想法?

4

2 回答 2

0

在花了几个小时的工作后,我终于让它工作了。问题原来是 TelerikDropdownList控件和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>

活到老,学到老。

于 2013-07-31T18:02:22.803 回答
0

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

$(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发出某种你可以挂钩的事件。

于 2013-07-31T15:55:01.397 回答