0

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.

$(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 = '<li><a data-transition="slide" href="details.html?ID=' 
    + item.ID + '">' +`'<img src="'+ item.ImageURL + '">' +
    '<h2 class="ui-li-heading">' + item.Title + '</h2 >' + 
    '<h2>' + 'Price: ' + item.Price + '</h2>'+ '</a></li>';
    output.append(Menu_Dinner);
    console.log($("#output").html());`
});
},
error: function(){
  output.text('There was an error loading the data.');
}
});
});

i used the code below to get the id from list view and display details of that specific list.

$('#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);
}

And this is the detail.html page that display the details .

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <div id="detailsPage" data-role="page" >

<div data-role="header">
       <a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="b">Back</a>
    <h1>Details</h1>
</div>

    <div data-role="content"> 

  <img id="itemPic"/>
  <h3 id="Title"></h3>
      <p id="Description"></p>
      <p id="Price"></p>


      <button class="add-to-cart">+ Add to Cart</button>
</div>

  </div>

  </body>

  </html>
Gajotres
  • 57,309
  • 16
  • 102
  • 130
Bishal Budhapirthi
  • 29
  • 1
  • 8

1 Answers1

2

This will help you, it is my answer/article about this topic: jQuery Mobile: Sending data from one page to the another

There you will find several solution, you just need to pick the right one.

One more thing, in case you want to stick to your solution you will need a way to store data during the page transition, my other ARTICLE can help you with that. Just search for the chapter called: Data/Parameters manipulation between page transitions.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Still the code is not working. Is something wrong with the 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); } – Bishal Budhapirthi Mar 30 '13 at 17:52
  • Method you are using will only work on multiple HTML jQuery Mobile template, check it. Also there are 4 available solutions, don't tell me you can't find a workable one. – Gajotres Mar 30 '13 at 19:38
  • Finally found the solution. Hope this would be helpful for someone in the future. Here is the link: http://jsfiddle.net/rfF3j/1/ – Bishal Budhapirthi Apr 01 '13 at 17:18