Jquery ajax xml is not being parsed

Question

So I was parsing my xml with this code and all worked fine untill i added a review node.

$(document).ready(function generatexml(){
$.ajax({
                type: "GET",
                url: "data/concerts.xml",
                dataType: "xml",
                success: function(xml){
                $(xml).find("concert").each(function(){
                $('#concerten').append('<div id="tabel" onclick="navigate('+"'"+$(this).find('artist').text()+"'"+')"><div id="tabelimage"><img src="http://griekenland.mixxt.at/storage/images/events/0/0/0/00000000000000000000000000000.jpg"/></div>'
                +'<div id="tabelartist">'+$(this).find('artist').text()+'</div>'
                +'<div id="tabellocation">'+$(this).find('location').text()+'</div>'
                +'<div id="tabelqs">'+$(this).find('review').text()+'</div>'
                +'<div id="tabeldate">'+$(this).find('date').text()+'</div>'
                +'<div id="tabelurl"><a href="'+$(this).find('url').text()+'">'+$(this).find('url').text()+'</a></div>').trigger('create');             
                })
                }
                })
})

The xml is like this:

<?xml version="1.0"?>
<concerts>
<concert>
<artist>Sioen</artist>
<location>De Zwerver leffinge</location>
<date>24/03/2012</date>
<review>Met die woorden, op zelf getekende en verspreide flyers, riep Willis Earl Beal iedereen op hem te bellen om hem één van z’n liedjes te horen zingen</review>
<url>http://www.test.be</url>
</concert>
<concert>
<artist>Sioen</artist>
<location>De Zwerver leffinge</location>
<date>24/03/2012</date>
<review>Met die woorden, op zelf getekende en verspreide flyers, riep Willis Earl Beal iedereen op hem te bellen om hem één van z’n liedjes te horen zingen</review>
<url>http://www.test.be</url>
</concert>
</concerts>

I cannot figure out the reason why it won't parse, i have ran it trough an xml validator and there are no js errors in firebug. Is it possible that the text inside my node is to long (just a hunch) and how do i counter this?

Any help is welcome, Tyvm

Toon Van Dooren

Answer 1

Not a direct answer to your particular issue but I think it could be useful.

I think you should consider using some template engine here. Here is why:

• Forces you to prepare/parse your data before rendering
• Allows you to unit test every single part independently
• Improves code readability and maintainability
• Easier to update later (for example if you decide to return JSON instead of XML in your AJAX request)

Please consider the following example on JSBin based on your code (and using Mustache template engine but you can find many other engines).

Some details bellow:

1- define your template

<script id="concertsTpl" type="text/x-custom-tpl">
{{#concerts}}
  <div id="tabel" onclick="navigate('{{artist}}')">
    <div id="tabelimage">
      <img src="http://griekenland.mixxt.at/storage/images/events/0/0/0/00000000000000000000000000000.jpg">
    </div>
    <div id="tabelartist">{{artist}}</div>
    <div id="tabellocation">{{location}}</div>
    <div id="tabelqs">{{review}}</div>
    <div id="tabeldate">{{date}}</div>
    <div id="tabelurl">
      <a href="{{url}}">{{url}}</a>
    </div>
  </div>
{{/concerts}}
</script>

2- define a function to parse your data

function parseConcertsData(data) {
  var concerts = [];

  $(data).find("concert").each(function(){
    var concert = {
        artist: $(this).find('artist').text(),
      location: $(this).find('location').text(),
        review: $(this).find('review').text(),
          date: $(this).find('date').text(),
           url: $(this).find('url').text()
    };
    concerts.push(concert);
  });
  return {concerts: concerts};
}

3- send the request and process the result

var jqXhr = $.ajax({
      type: 'get',
       url: "data/concerts.xml",
  dataType: 'xml'
});

jqXhr.done(function(xml){

  var concerts = parseConcertsData(xml),
      tpl = $('#concertsTpl').html(),
      rendered = Mustache.to_html(tpl, concerts);

  $('#concerten').append( rendered ).trigger('create');

}).fail(function(){
  alert('Something went wrong with the query');
});

With this kind of refactoring, you should be able to find the problem easily:

• Do you receive a response from your query?
• Do you get the expected data (ie: Is the response parsed correctly)?
• Is the template rendering OK?
• Is the rendered template appended to the document?

Hope it helps.

---