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?

karim79 · Accepted Answer · 2009-08-16 16:59:48Z

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

edited Aug 16, 2009 at 16:59

answered Aug 16, 2009 at 14:47

karim79

343k67 gold badges420 silver badges409 bronze badges

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

3 Comments

karim79 Over a year ago

Try $(resp).find... Instead. I cannot answer completely right now from iphone

karim79 Over a year ago

@mathewb - sorry for the delay, the difference is that once the response has been wrapped in a jQuery object you can call jQuery methods on it. I reflected the suggestion I made in my last comment in my answer.

matthewb Over a year ago

Does it really matter if its in a complete or success?

toby · Accepted Answer · 2009-08-17 04:39:54Z

0

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 }

answered Aug 17, 2009 at 4:39

toby

Collectives™ on Stack Overflow

Loading AJAX with Jquery Issue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related