Question

我正在使用ASP.NET MVC和jQuery，我正在通过Ajax加载PartialView。单独的JavaSriptFile属于此PartialView。成功后，返回html将插入DOM中。在JavaScript中，有些东西已经完成，这可能需要一些时间。然后，加载的内容将显示在对话框中。

简化代码：

1  $.ajax({
2    url: /user/edit,
3    dataType: 'html',
4    data: { id: 1 },
5    success: function (htmlCode) {
6       $('#dialogEditUser').html(htmlCode);
7       $('#dialogEditUser').dialog('open');
8    });
9 };

此代码有效，有时无效，具体取决于PartialView的JavaScript执行速度。所以有时，对话框无法打开。所以我将第7行更改为;：

7      setTimeout(function() { $j('#dialogEditUser').dialog('open') }, 250);

现在一切正常。但这种“黑客”并不是很合适。如何检查PartialView的JavaScript是否已在加载的内容上执行？有没有办法可以返回一个完全渲染的PartialView（所以JavaScript已经被执行了，我得到了AjaxCall的返回？

Answer 1

为什么不在你正在加载的js中创建$('#dialogEditUser').dialog('open');？这样一来，当你进行调用时，你就知道已经加载了相应的js

Answer 2

默认情况下，ajax不会等待请求完成尝试将async选项设置为false：

$.ajax({
    url: /user/edit,
    dataType: 'html',
    async: false,
    data: { id: 1 },
    success: function (htmlCode) {
       $('#dialogEditUser').html(htmlCode);
       $('#dialogEditUser').dialog('open');
    });
};

docs

中的更多详情

Answer 3

尝试将该代码包装在就绪块中：

$(document).ready(function(){
   $.ajax({
     url: /user/edit,
     dataType: 'html',
     data: { id: 1 },
     success: function (htmlCode) {
        $('#dialogEditUser').html(htmlCode);
        $('#dialogEditUser').dialog('open');
     });
   };
});

'＃dialogEditUser'可能会在调用成功回调时加载。

Answer 4

如果在部分视图结束时，您有一个具有特定ID的元素，如#finishLoad。为什么不尝试这个？

var waitToOpenDialog = function(){
    var jFinish = $('#finishLoad');

    if(jFinish.length<=0){
        setTimeout(waitToOpenDialog, 10);
    }else{
        $('#dialogEditUser').dialog('open');
    }
}

$.ajax({
    url: /user/edit,
    dataType: 'html',
    data: { id: 1 },
    success: function (htmlCode) {
        $('#dialogEditUser').html(htmlCode);
        waitToOpenDialog();
    });
};

好吧，如果你不能修改你的DOM或没有像#finishLoad这样的id你不能尝试（保持async = true）（或多或少）这个：

var waitToOpenDialog = function(){
    var jDialogUser= $('#dialogEditUser');

    if(jDialogUser.html().length<=0){
        setTimeout(waitToOpenDialog, 10);
    }else{
        jDialogUser.dialog('open');
    }
}

$.ajax({
    url: /user/edit,
    dataType: 'html',
    data: { id: 1 },
    success: function (htmlCode) {
        $('#dialogEditUser').html(htmlCode);
        waitToOpenDialog();
    });
};

或者您可以尝试完成：

$.ajax({

        url: /user/edit,
        dataType: 'html',
        data: { id: 1 },
        success: function (htmlCode) {
            $('#dialogEditUser').html(htmlCode);
        },
        complete: function(){
            $('#dialogEditUser').dialog('open');
        }
)};

MVC＆amp; jQuery＆amp; Ajax：等待加载JavaScript

4 个答案: