MVC & jQuery & Ajax: Wait for JavaScript to be loaded

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?

matino · Accepted Answer · 2011-10-28 14:57:17Z

2

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

answered Oct 28, 2011 at 14:57

matino

17.8k8 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iappwebdev Over a year ago

That's what I was looking for. In fact, I already tried that one. But the js-File in the partial view was loaded by jQuery.getscript() which has async on true by default. So I changed that call to jQuery.ajax() and set option async on false, but I don't have to change the original ajax-call. So in the end, I have an ajax-call with option async = false wrapped in an ajax-call with option async = true. Question: how do you solve such kind of issues?

Keith.Abramo · Accepted Answer · 2011-10-28 15:00:12Z

2

Why not make the $('#dialogEditUser').dialog('open'); in the js you are loading? That way when the call is made you know the corresponding js is loaded already

answered Oct 28, 2011 at 15:00

Keith.Abramo

6,9652 gold badges34 silver badges46 bronze badges

4 Comments

nathan gonzalez Over a year ago

this totally makes more sense then my answer. not sure why i was over complicating it. +1

iappwebdev Over a year ago

Good Idea but that is not possible because the loaded partial view is not always used as a dialog. And my question is in general 'wait for javaScript to be loaded' because I have other cases in my solution where I have to wait after an ajax call for the javascript to be loaded.

iappwebdev Over a year ago

So lets imagine that the code after the insert of the partial view has nothing to do with it but has to be executed after the insert. How to achieve this? And I don't want to modify the DOM as suggested by Galled in answer 3. There must be a suitable way to wait for previous JavaScript to be loaded and executed. Maybe as a callback function? Or a global script registrar?

robertc Over a year ago

@Simon Set a global variable, or pass a parameter in the URL.

arb · Accepted Answer · 2011-10-28 14:59:15Z

0

Try wrapping that code in a ready block:

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

'#dialogEditUser' might to be loaded yet when the success callback gets called.

answered Oct 28, 2011 at 14:59

arb

7,8847 gold badges35 silver badges67 bronze badges

1 Comment

iappwebdev Over a year ago

Sorry, I should have posted the hole js-File. Of course everything is handled after the $(document).ready-Call.

Galled · Accepted Answer · 2011-10-30 14:23:24Z

0

If, at the end of your partial view, you have got an element with an specific id like #finishLoad. Why not try this?

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

Well if you cant modify your DOM or don't have any id like #finishLoad you cant try (keeping async=true) with (more or less) this:

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

Or you can try with complete:

$.ajax({

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

edited Oct 30, 2011 at 14:23

answered Oct 28, 2011 at 15:12

Galled

4,2012 gold badges31 silver badges41 bronze badges

1 Comment

iappwebdev Over a year ago

That is also a solution but im my opinion not a good way to solve that problem. Modifying the DOM costs time and I wanted to solve that problem without having to modify the DOM.

Collectives™ on Stack Overflow

MVC & jQuery & Ajax: Wait for JavaScript to be loaded

4 Answers 4

1 Comment

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related