Передача данных со страницы просмотра списка на страницу подробного просмотра в jQuery mobile

Я генерирую представление списка через ajax. То, что я пытаюсь сделать, - это когда пользователь нажимает на нее, он просматривает детали через свой идентификатор. Я получаю список, но не детали. Мой вопрос - как передать идентификатор со страницы на другую страницу.Передача данных со страницы просмотра списка на страницу подробного просмотра в jQuery mobile

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

Я воспользовался приведенным ниже кодом, чтобы получить идентификатор из списка и отобразить детали этого конкретного списка.

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

источник

2013-03-28 Bishal Budhapirthi

Это поможет вам, это мой ответ/статьи по этой теме: jQuery Mobile: Sending data from one page to the another

Там вы найдете несколько решение, вам просто нужно выбрать правильный.

Еще одна вещь, в случае, если вы хотите придерживаться своего решения вам нужен способ для хранения данных во время перехода страницы, мои другие ARTICLE может помочь вам в этом. Просто найдите главу под названием: Обработка данных/параметров между переходами страниц.

источник

2013-03-28 19:07:13 Gajotres

Большое спасибо за ваш ответ. –

Код еще не работает. Что-то не так с кодом. $ ('# detailsPage'). live ('pageshow', function (event) { var ID = getUrlVars() ["ID"]; $ .getJSON (serviceURL + 'getDinner.php? ID =' + ID, displayItem); }); функция дисплейItem (данные) { var item = data.item; console.log (item); $ ('# itemPic'). Attr ('src', '' + item.ImageURL); $ ('# fTitle'). Text (item.Title); $ ('# Description'). Текст (item.Description); $ ('# Price'). Текст (item.Price); } –

Метод, который вы используете, будет работать только на нескольких шаблонах HTML jQuery Mobile, проверьте его. Также есть 4 доступных решения, не говорите мне, что вы не можете найти работоспособный. – Gajotres

Передача данных со страницы просмотра списка на страницу подробного просмотра в jQuery mobile

ответ

Смежные вопросы