обновление страницы на jquery mobile

Я создаю динамический список в jquery mobile на основе файла JSON в моем локальном хранилище (не файл PHP, просто локальное хранилище), список перестраивается каждый раз, когда вы переходите на эту страницу на основе элементов, которые были удалены или добавлены к ней , это все в jquery mobile, однако, когда я возвращаюсь к списку, мне приходится вручную нажимать кнопку обновления, чтобы обновить его, я пытался использовать

$('#myListPage').on('pageshow', function(){
  window.location.reload(true);
});

Однако, похоже, это ничего не делает, все отлично работает, если я вручную нажимаю F5 или обновляю.

Вот как список создается каждый раз:

function run2() { 
  peopleList();
  $("#list").listview("refresh").trigger("create");
};


function peopleList() {
    $("#peopleList ul li").each().remove();
    for (i = 0; i < cars.length; i++) {
        if (cars[i].availability == "true") {
            $("#peopleList ul").append('<li value = ' + i + ' id="colas">' + '<div  data-role="collapsible" data-theme="b" data-content-theme="a">' + '<h3>' + cars[i].carName + '</h3>' + '<span data-inset="true">' + '<img src="' + cars[i].imageSrc + '" style="width:auto; margin:0px auto" id="imgcar"/>' + '<h2>' + cars[i].carModel + ", " + cars[i].gear + "</h2> " + '</span>' + '<input type="button" value="Select this car" data-icon="check" onclick="aval(' + i + ')"/></div>' + '</li>');
        }
    }
}

Извините, если у него простой ответ. Я новичок в этом, я пытаюсь учиться, но мои инструкции заключались в том, чтобы использовать только локальное хранилище, а не php, большое спасибо, ребята, заранее.

Редактировать:

Вот html кода

<div data-role="page" id="catalog">
  <div data-role="header" data-theme="a">
    <h1>Choose your car!</h1>
  </div>
  <div data-role="content" id="peopleList" class="ui-grid-b">
    <ul data-role="listview" data-inset="true" id="list" class="ui-block-a">
    </ul>
    <div class="ui-block-c">
      <canvas id ="myCanvas"  style="margin-left:100px; width:300px; height:300px"></canvas>
    </div>
    <div class="ui-block-b"></div>
  </div>
  <div data-role="footer" data-position="fixed"  class="copyright"><h2> &copy  </h2></div>
</div>

person Ziv Kesten    schedule 16.12.2013    source источник
comment
вы пытаетесь использовать список?   -  person Md. Al-Amin    schedule 16.12.2013
comment
Разместите также свой HTML-код, чтобы мы могли дать вам точный ответ.   -  person Md. Al-Amin    schedule 16.12.2013
comment
возможный дубликат добавление элементов в список с помощью JQuery Mobile в Javascript   -  person Omar    schedule 16.12.2013
comment
Я не нашел вопрос, который вы упомянули, полезным @Omar, все, что я ищу, - это способ полностью обновить страницу, когда я вернусь на страницу каталога, что-то, что позволит мне продолжить, не нажимая f5.   -  person Ziv Kesten    schedule 16.12.2013
comment
когда вы вызываете метод refresh .listview("refresh"), вам не нужно обновлять страницу (f5). Элементы стилизуются jQM в DOM.   -  person Omar    schedule 16.12.2013
comment
да, но это не меняет список для меня, не добавляет и не убирает элементы, где f5 делает это.   -  person Ziv Kesten    schedule 16.12.2013
comment
Вы заполняете элементы, когда страница каталога активна? Или перед просмотром? Я только что заметил, что вы добавляете складные элементы внутри элементов списка. В этом случае вам нужно обновить складные элементы следующим образом $("[data-role=collapsible]").collapsible();.   -  person Omar    schedule 16.12.2013
comment
это то, чего вы хотите достичь? jsfiddle.net/Palestinian/9EAuG   -  person Omar    schedule 16.12.2013
comment
@ Омар, это действительно похоже на мой проект, и я пробовал $([data-role=collapsible]).collapsible(); однако список остается прежним, когда я возвращаюсь к нему после удаления элемента из хранилища, нажатие f5 удаляет его, а также добавляет один, если я сделал это до перенаправления на эту страницу ... ваш ответ заставил меня выйти! но это не сработало :( также я действительно не понимаю, для чего это: $([type=button]).button(); - для. Большое спасибо за то, что уделили свое личное время, чтобы помочь!!   -  person Ziv Kesten    schedule 16.12.2013
comment
$("#list").listview("refresh").trigger("create"); достаточно, как в демо. Функции с комментариями // предназначены только для того, чтобы показать вам, сколько задействовано wdigets.   -  person Omar    schedule 16.12.2013
comment
я так и думал, я использовал $(#list).listview(refresh).trigger(create); он идет сразу после функции, которая содержит цикл, который добавляет список, я редактирую свой исходный код, чтобы вы могли видеть, он все еще не работает, к сожалению   -  person Ziv Kesten    schedule 16.12.2013
comment
это невозможно, это должно происходить внутри функции, в которую вы добавляете данные.   -  person Omar    schedule 16.12.2013
comment
только что попробовал, все еще показывает элемент, который я удалил, как только я нажимаю «Обновить», элемент берется из списка :( я должен что-то пропустить, очевидно...   -  person Ziv Kesten    schedule 16.12.2013
comment
потому что при обновлении вы загружаете старые данные и удаляете новые, вы просто перезагружаете страницу. почему вы все равно используете обновление? $(document).on('pageshow','#myListPage', function() { peopleList() });   -  person Omar    schedule 16.12.2013
comment
я не должен использовать обновление, я пытаюсь найти код, который будет обновлять страницу для меня, чтобы список добавлял новые данные с новыми элементами и без старых элементов, об этом варианте, который вы только что написали, я пробовал уже, по какой-то причине, я как бы перепутал свой код, исключив действие на кнопке, используемой для выбора элемента... я признаю, onpageshow тоже казался мне очевидным выбором, но он потерпел неудачу, любая логическая вещь, которую я сделал, потерпела неудачу, единственное, что делает то, что я хочу, это кнопка обновления... я не понимаю...   -  person Ziv Kesten    schedule 16.12.2013
comment
Вы нашли решение?   -  person Omar    schedule 17.12.2013


Ответы (3)


Вы можете обновить свой список следующим образом:

$('#peopleList').listview('refresh');  

проверьте документацию здесь: http://jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

person Md. Al-Amin    schedule 16.12.2013
comment
я пробовал это', это не работает, мне нужно что-то более простое, просто обновление самой страницы, как нажатие f5 - person Ziv Kesten; 16.12.2013
comment
Если вы хотите перезагрузить страницу, измените страницу на текущую страницу и используйте параметры reloadPage и/или allowSamePageTransition в вызове changePage. - person frequent; 17.12.2013

после долгих поисков в темных уголках интернета я нашел команду, которая делает свое дело, я понятия не имею, что она означает и как она это делает, но она работает.

var path = location.pathname;
var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1]+".html";
location.href= filename;
person Ziv Kesten    schedule 22.12.2013

как если использовать:

$(document).ready(function(){
    //window.location.reload(true);
    location.href = 'url';
});
person yovie    schedule 16.12.2013
comment
а почему на documnet.ready? мне нужно, чтобы это применялось только тогда, когда я возвращаюсь на страницу каталога, я пробовал это: $('#catalog').on('pageshow', function(){location.href='#catalog' }); не работал. - person Ziv Kesten; 16.12.2013