When is DOM ready following jQuery.after - Plupload

Question

Short version

After calling jQuery.after to insert HTML, how do I know when the DOM is ready?

Long version

I'm getting Plupload dropzones from an ajax call and using jQuery.after to insert them. When I then call mypluploader.init() to initialize Plupload, it fails due to the DOM not being ready (apparently). Here's what I'm doing:

I load the page
User clicks Edit
I use ajax to get the Plupload zones and insert the returned HTML with jQuery.after
I then call mypluploader.init() to initialize Plupload
I receive the following error: TypeError: Cannot read property 'style' of null

Code in summary:

$.get('/plupload-zones.html', function(theDropZoneHTML) {
        // theDropZoneHTML: <div id='dropzones'>...</div>
        obj.after(theDropZoneHTML); 
        mypluploader = new plupload.Uploader({..., drop_element: 'dropzones', ...});
        mypluploader.init();
        //Boom! It fails
});

If I change step 4 to include a setTimeout for 2 seconds it works fine with no error:

$.get('/plupload-zones.html', function(theDropZoneHTML) {
        // theDropZoneHTML: <div id='dropzones'>...</div>
        obj.after(theDropZoneHTML); 
        setTimeout(function() { 
            mypluploader = new plupload.Uploader({..., drop_element: 'dropzones', ...});
            mypluploader.init();
            //Bingo! It works
        }, 2000);
});

is your `$.get` wrapped in a *document.ready* handler? SHould work fine if it is — charlietfl, Mar 23 '15 at 23:27

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

Aha, the delay was from an Angular repeater which is also on the page. Waiting for the Angular repeat to finish solved the problem: ng-repeat finish event

edited May 23 '17 at 11:43

Community

1
1

answered Mar 23 '15 at 23:59

Daniel Flippance

7,734
5
42
55

When is DOM ready following jQuery.after - Plupload

1 Answers1