CODEWITHSUNDEEP
jqueryxmlajax
Ryan
Ryan

Reputation: 1628

I'm having trouble loading and parsing XML with jQuery, what am I doing wrong?

I'm attempting to read settings from an XML file. I think I am not loading the object correctly or possibly my selector is not doing what I think it is. The log message inside of the appendImages function does not execute, I'm not sure why.

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "banner_slider/settings.xml",
    dataType: "xml",
    success: startSlider
  });
});

function startSlider(xml) {
  var bWidth = $('#banner').width(), bHeight = $('#banner').height();
  bWidth += 'px';
  bHeight += 'px';
  $('#banner').attr( 'style', 'height: '+bHeight );
  $('#banner').attr( 'style', 'width: '+bWidth );
  $('#banner img').attr( 'id', 'origImg');
  appendImages( bWidth, bHeight, xml );
  $('#origImg').remove();
  $('#banner').cycle();
}

function appendImages( bWidth, bHeight, xml ) {
  console.log('appendImages executed');
  $(xml).find('img').each(function() {
    var path = $(this).text(); 
    console.log('path: '+path); 
    $('#banner').append('<img width="'+bWidth+'" height="'+bHeight+'" src="'+path+'" />');
  });
}

XML example:

<?xml version="1.0" encoding="utf-8" ?>
<images>
    <img>test1</img>
    <img>test2</img>
    <img>test3</img>
</images>

Upvotes: 2

Views: 184

Answers (3)

Ryan
Ryan

Reputation: 1628

Once the syntax errors were fixed by Musa, my code functioned as expected. Thank you.

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "banner_slider/settings.xml",
    dataType: "xml",
    success: startSlider
  });
});

function startSlider(xml) {
  var bWidth = $('#banner').width(), bHeight = $('#banner').height();
  bWidth += 'px';
  bHeight += 'px';
  $('#banner').attr( 'style', 'height: '+bHeight );
  $('#banner').attr( 'style', 'width: '+bWidth );
  $('#banner img').attr( 'id', 'origImg');
  appendImages( bWidth, bHeight, xml );
  $('#origImg').remove();
  $('#banner').cycle();
}

function appendImages( bWidth, bHeight, xml ) {
  console.log('appendImages executed');
  $(xml).find('img').each(function() {
    var path = $(this).text(); 
    console.log('path: '+path); 
    $('#banner').append('<img width="'+bWidth+'" height="'+bHeight+'" src="'+path+'" />');
  });
}

Sample XML:

<?xml version="1.0" encoding="utf-8" ?>
<images>
    <img>test1</img>
    <img>test2</img>
    <img>test3</img>
</images>

http://jsfiddle.net/mowglisanu/yQLx6/

Upvotes: 0

John x
John x

Reputation: 4031

try this, you have to pass the response to the success handler, i have modified your code to remove the settings but you can add them and also use .parseXML instead of using jquery's DOM traversal methods to traverse through the xml

 function startSlider(xml) {  
     console.log("xml recieved successfully");
     console.log(window.$xml);
  appendImages(window.$xml);

}

function appendImages( xml ) {
  console.log('appendImages executed');
  xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc ),
    $imgArr = $xml.find( "img" );
    console.log($imgArr);
    $($imgArr).each(function(i,j){
    console.log($(j).text());

    });

}
$(function(){
    window.$xml="<images><img>test1</img><img>test2</img><img>test3</img></images>";

$.ajax({
     type: "GET",
     url: "/echo/json/",
     dataType: "xml",  
     success: startSlider(window.$xml)
 });
});

DMEO

Upvotes: 1

David
David

Reputation: 3418

I think you need to properly hand over your data from ajax callback to your function.

  success: function(data, textStatus, jqXHR) {
        startSlider(data);
   }

Check out this demo on JSFIDDLE

Upvotes: 0

Related Questions