Loading AJAX with Jquery Issue

Question

I have this ajax call for loading a selection of data in xml.

I am not getting any JS errors, it does the before, the complete is not working, I guess I am not calling the data correctly.

Any thoughts on what I am doing wrong in the complete function loop?

 $.ajax({
  type: "GET",
  url: "xml/classes.xml",
  dataType: "XML",
  beforeSend: function(){
    $('#classContainer').append("<p>Loading</p>");},
  complete: function() {
    $(this).find('monday').each(function(){

            var $classdate = $(this); 
            var title = $classdate.find("class").attr('title');

            var level = $classdate.find("class").attr('classLevel');
      var time = $classdate.find("time").text();
      var duration = $classdate.find("time").attr("duration");
      var hourofday = $classdate.find("time").attr("hourofday");
      var location = $classdate.find("location").text();



            var Monhtml = '<div class="classBlock">';

            Monhtml += '<p class="title">' + title + '<span class="loadingPic" alt="Loading" /> ' + ' </p>';
      Monhtml += '<p class="infoBar"> <strong>Time:</strong>' + time + '<span class="hour">'+ hourofday +'</span><br>'+'<strong>Duration:</strong>' + duration +'&nbsp;Minutes <br>' + '<strong>Location:</strong>' + location + '<br><strong>Instructor:</strong> </p>';
      Monhtml += '<p class="description">  <span class="level">' +  level  + '</span></p>' ;

            Monhtml += '</div>';


            $('#classContainer').append($(Monhtml));
     });
     }
    }); 
});

Changed Complete to:

 success: function(xml) {
    $(xml)

And it loads, whats the difference?

Answer 1

Your're not making the response available within the complete function. Try this:

 $.ajax({
  type: "GET",
  url: "xml/classes.xml",
  dataType: "XML",
  beforeSend: function(){
    $('#classContainer').append("<p>Loading</p>");},
  complete: function(resp) {
    $(resp).find('monday').each(function(){

            var $classdate = $(this); 
            var title = $classdate.find("class").attr('title');

            var level = $classdate.find("class").attr('classLevel');
                var time = $classdate.find("time").text();
                var duration = $classdate.find("time").attr("duration");
                var hourofday = $classdate.find("time").attr("hourofday");
                var location = $classdate.find("location").text();



            var Monhtml = '<div class="classBlock">';

            Monhtml += '<p class="title">' + title + '<span class="loadingPic" alt="Loading" /> ' + ' </p>';
                Monhtml += '<p class="infoBar"> <strong>Time:</strong>' + time + '<span class="hour">'+ hourofday +'</span><br>'+'<strong>Duration:</strong>' + duration +' Minutes <br>' + '<strong>Location:</strong>' + location + '<br><strong>Instructor:</strong> </p>';
                Monhtml += '<p class="description">  <span class="level">' +  level  + '</span></p>' ;

            Monhtml += '</div>';


            $('#classContainer').append($(Monhtml));
        });
        }
    }); 
});

Answer 2

The complete callback gets passed two args.

From the Jquery documentation

A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The XMLHttpRequest object and a string describing the type of success of the request. This is an Ajax Event.

function (XMLHttpRequest, textStatus) { this; // the options for this ajax request }