title: Pass data from list view page to detail view page in jquery mobile
body: <p>I am generating the list view via ajax. What i am trying to do is when user click it takes it to details view through its id. I am getting the list but not the details.My question is how to pass the id from page to another page.</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 data-transition="slide" href="details.html?ID=' 
      + item.ID + '"&gt;' +`'&lt;img src="'+ 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);
      console.log($("#output").html());`
  });
  },
  error: function(){
    output.text('There was an error loading the data.');
  }
  });
  }); 
  </code></pre>
  
  <p>i used the code below to get the id from list view and display details of that specific list.</p>
  
  <pre><code>$('#detailsPage').live('pageshow', function(event) {
  var ID = getUrlVars()["ID"];
  $.getJSON(serviceURL + 'getDinner.php?ID='+ID, displayItem);
  });  
  function displayItem(data) {
  var item = data.item;
  console.log(item);
  $('#itemPic').attr('src', '' + item.ImageURL);
  $('#fTitle').text(item.Title);
  $('#Description').text(item.Description);
  $('#Price').text(item.Price);
  }
  </code></pre>
  
  <p>And this is the detail.html page that display the details .</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="detailsPage" data-role="page" &gt;
  
  &lt;div data-role="header"&gt;
         &lt;a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="b"&gt;Back&lt;/a&gt;
      &lt;h1&gt;Details&lt;/h1&gt;
  &lt;/div&gt;
  
      &lt;div data-role="content"&gt; 
  
    &lt;img id="itemPic"/&gt;
    &lt;h3 id="Title"&gt;&lt;/h3&gt;
        &lt;p id="Description"&gt;&lt;/p&gt;
        &lt;p id="Price"&gt;&lt;/p&gt;
  
  
        &lt;button class="add-to-cart"&gt;+ Add to Cart&lt;/button&gt;
  &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;/body&gt;
  
    &lt;/html&gt;
  </code></pre>