0

ajax経由でリストビューを生成しています。私がやろうとしているのは、ユーザーがクリックすると、ID から詳細ビューに移動することです。リストは取得していますが、詳細は取得していません。私の質問は、ページから別のページに ID を渡す方法です。

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

以下のコードを使用して、リスト ビューから ID を取得し、その特定のリストの詳細を表示しました。

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

そして、これが詳細を表示する detail.html ページです。

<!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>
4

1 に答える 1

2

これはあなたを助けるでしょう、それはこのトピックに関する私の答え/記事です: jQuery Mobile: Sending data from one page to the another

そこにはいくつかの解決策があります。正しいものを選択するだけです。

もう1つ、ソリューションに固執したい場合は、ページ遷移中にデータを保存する方法が必要になります.私の他の記事がそれを手助けします. 「ページ遷移間のデータ/パラメータ操作」という章を検索してください。

于 2013-03-28T19:07:13.393 に答える