title: Loading external data into phonegap using Jquery Json P
body: <p>I have following json object that i get from my local mysql.</p>
  
  <pre><code>&lt;([{"ID":"1","Title":"Chicken &amp; Chili","Price":"$8.99","ImageURL":"\/images\/dinner\/chicchili.jpg","Serves":"2","Description":"This unique and delicious chicken chili is a much-requested meal around our house. I think you'll find it's a nice change of pace from the typical beef version."},{"ID":"2","Title":"Chicken Franchase","Price":"$9.99","ImageURL":"\/images\/dinner\/chicfran.jpg","Serves":"2","Description":"Served in a lemon and butter sauce"},{"ID":"3","Title":"Salmon","Price":"$14.99","ImageURL":"\/images\/dinner\/salmon.jpg","Serves":"1","Description":"A simple soy sauce and brown sugar marinade, with hints of lemon and garlic, are the perfect salty-sweet complement to rich salmon fillets."}]);
  </code></pre>
  
  <p>i used following code to get the json object into the iPhone simulator. I am successful getting title and price on the screen but not images.Is there any way to get the images ? Or am i missing something in coding.Any suggestion please?</p>
  
  <pre><code>$(document).ready(function(){
  var output = $('#output');
  $.ajax({
  url: 'http://localhost/Backend/getDinner.php',
  dataType: 'jsonp',
  jsonp: 'jsoncallback',
  timeout: 5000,
  success: function(data, status){
    $.each(data, function(i,item){ 
      var Menu_Dinner = '&lt;li&gt;&lt;a href="detail.html?id=' + item.ID + '"&gt;' +
        '&lt;img src="images/dinner/'+ item.ImageURL + '"&gt;' +
      '&lt;h2 class="ui-li-heading"&gt;' + item.Title + '&lt;/h2 &gt;' + 
      '&lt;h2&gt;' + 'Price: ' + item.Price + '&lt;/h2&gt;'+ '&lt;/a&gt;&lt;/li&gt;';
      output.append(Menu_Dinner);
    });
  },
  error: function(){
    output.text('There was an error loading the data.');
  }
  </code></pre>
  
  <p>});
  });</p>