1

I am making a dynamic list in jquery mobile, based on a JSON file in my local storage (not a PHP file, just local storage) the list gets rebuilt every time you go to that page based on items that were removed or added to it, it is all in jquery mobile, however, when I go back to the list I have to manually press refresh to update it, i tried using 

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

However, it does not seem to do anything, everything works great if I manually press F5 or refresh.

This is how the list is created every time:

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

Sorry if it has a simple answer I am new at this, I am trying to learn but my instructions were to use local storage only, not php, thank you guys very much in advance.

Edit:

Here is the html of the code

<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>
user3023313
  • 124
  • 11
Ziv Kesten
  • 1,206
  • 25
  • 41
  • are you trying to use listview? – Md. Al-Amin Dec 16 '13 at 09:41
  • Post your HTML code also, so that we can give you exact answer. – Md. Al-Amin Dec 16 '13 at 09:46
  • possible duplicate of [Adding Items to the List Using JQuery Mobile in Javascript](http://stackoverflow.com/questions/20588993/adding-items-to-the-list-using-jquery-mobile-in-javascript) – Omar Dec 16 '13 at 10:12
  • i didnt find the question you mentiond helpful @Omar, all i am looking for is way for the page to refresh totally when i get back to the catalog page, something that will allow me to proceed without pressing f5. – Ziv Kesten Dec 16 '13 at 13:25
  • when you call _refresh_ "`.listview("refresh")`" method, you dont need to refresh page (f5). Items get styled by jQM in DOM. – Omar Dec 16 '13 at 13:30
  • yes, but that does not change the list for me, does not add or substract items, where as f5 does so. – Ziv Kesten Dec 16 '13 at 14:09
  • You populate items when catalog page is active? Or before viewing it? I just noticed that you're appending collapsibles inside listview items. In this case, you need to refresh collapsibles this way `$("[data-role=collapsible]").collapsible();`. – Omar Dec 16 '13 at 14:23
  • is this what you want to achieve? http://jsfiddle.net/Palestinian/9EAuG/ – Omar Dec 16 '13 at 16:12
  • @Omar this looks like my project indeed, and i have tried $("[data-role=collapsible]").collapsible(); however the list still stays the same when i go back to it after removing an item from the storage, pressing f5 reomves it, as well as adding one if i did so before redirecting to this page... your answer got me exited! but it didnt work :( also i dont really understand what this: $("[type=button]").button(); - is for. thank you so much for giving your personal time to help!! – Ziv Kesten Dec 16 '13 at 17:12
  • `$("#list").listview("refresh").trigger("create");` is enough as in the demo. The `//` commented functions are only to show you how many _wdigets_ are involved. – Omar Dec 16 '13 at 17:17
  • thats what i thought, i used $("#list").listview("refresh").trigger("create"); it comes right after the function that holds the loop which appends the list, i am editing tmy original code for you to see, it still not working unfortunatly – Ziv Kesten Dec 16 '13 at 17:23
  • it's not possible this way, it should go within the function where you append data. – Omar Dec 16 '13 at 17:31
  • just tried it, still shows the item i have removed,once i hit refresh, the item is taken of the list :( i must be missing something obvius... – Ziv Kesten Dec 16 '13 at 17:45
  • because when you refresh, you load old data and remove new ones, you simply reload the page. why are you using refresh anyway? `$(document).on('pageshow','#myListPage', function() { peopleList() });` – Omar Dec 16 '13 at 17:47
  • i am not supposed to use refresh, i am trying to find the code that will refresh the page for me, so that the list will append the new data with new items and without old items, about this variation that you just wrote i tried it already, i kinda meesed up my code for some reason, eliminating the action on the button used to select the item... i admit, onpageshow seemed like the obvious choise to me as well but it failed, any logical thing i did failed, the only thing that does what i want to happen is the refresh button... i dont understad it... – Ziv Kesten Dec 16 '13 at 18:21
  • have you reached a solution? – Omar Dec 17 '13 at 10:51

3 Answers3

1

You can refresh your listview by this : 

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

check documentation here : http://jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

Md. Al-Amin
  • 1,423
  • 1
  • 13
  • 26
  • i tried this' it does not work, i need something more simple then that, just a refresh to the page itself, just like pressing f5 – Ziv Kesten Dec 16 '13 at 13:15
  • If you want to reload the page, make a change page to the current page and use either `reloadPage` and/or `allowSamePageTransition` options on the changePage call. – frequent Dec 16 '13 at 22:19
0

after a long search in the dark corners of the internet i found a command that does the trick, i have no idea what it means or how it does it but it works.

var path = location.pathname;
var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1]+".html";
location.href= filename;
Ziv Kesten
  • 1,206
  • 25
  • 41
-1

how if use :

$(document).ready(function(){
    //window.location.reload(true);
    location.href = 'url';
});
yovie
  • 81
  • 2
  • but why on "documnet.ready"? i need this to apply only when i get back to the catalog page, i tried this: $('#catalog').on('pageshow', function(){ location.href='#catalog' }); didnt work. – Ziv Kesten Dec 16 '13 at 13:20