Timing JQuery AJAX calls

Question

I'm working with the FullCalendar plugin, and running into some issues when trying to populate my list of divs (events) and then initializing them into FullCalendar event objects.

Initially, the events were hard coded, so everything was working fine. Then I tried this to populate my Event options first:

//This part is working
    $(document).ready(function() {

                $.ajax({
                    type: "POST",
                    url: "myService.asmx/getOperators",
                    contentType: 'application/json; charset=utf-8',
                    success: function(doc) {

                        var ops = (eval(doc.d));

                        for (var i = 0; i < ops.length; i++) {

                            $('#external-events').append('<div class="external-event">' + ops[i].FullName + '</div>');
                            alert(ops[i].FullName + " has been added to the div");
                        }



                    }
                });

Then, at the end of the script, I try to iterate through each div and initialize it, like this:

 $('#external-events div.external-event').each(function() {

            $(this).data('eventObject', eventObject);

            });

The problem is, the div's haven't been inserted by the time the initialization runs. I tried .delay but couldn't get that to work.

I'd like to try to initialize each div as it's added - but I can't figure out how to refer to a dynamically created object without a .each loop (i.e. .each uses "this" to refer to each element)

Can someone tell me how to time the second routine to run after the AJAX call is complete, or how to refer to a bunch of dynamically created elements with the same class name?

Answer 1

You can add your initialisation code into the success function of the ajax, straight after the for loop finishes:

                    success: function(doc) {
                        var ops = (eval(doc.d));

                        for (var i = 0; i < ops.length; i++) {
                            $('#external-events').append('<div class="external-event">' + ops[i].FullName + '</div>');
                            alert(ops[i].FullName + " has been added to the div");
                        }

                        $('#external-events div.external-event').each(function() {
                            $(this).data('eventObject', eventObject);
                        });
                    }