Question

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>

Answer 1

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/