Question

I am using ASP.NET MVC and jQuery and I am loading a PartialView via Ajax. A seperate JavaSriptFile belongs to this PartialView. On success, the return html is inserted in the DOM. In the JavaScript, some stuff is done and that together might take a little moment. The loaded content is then displayed in a dialog.

Simplified Code:

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 };

This code works and sometimes not, depending on how fast the PartialView’s JavaScript is executed. So sometimes, the dialog does not open. So i changed line number 7 to;:

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

Now everything works fine. But this “hack” is not very suitable. How can I check if the PartialView’s JavaScript has been executed on the loaded content? Is there maybe any way to return a fully rendered PartialView (so the JavaScript has already been executed where I get the return of the AjaxCall?

Answer 1

By default ajax will not wait for the request to finish.
Try setting async option to false:

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

More details in docs