0

Okay so when I click delete on a record it seems to delete it from the Localstorage fine, but then when the page reloads none of the "drop downs" display the other records in localstorage even though they still exist?

Just wondering how I would go about fixing that.

// Variable Defaults
var aragStyles = ["1, 2 , 3 , 4"],
aragValue,
save = $("#submit"),
;
H E L T E R
  • 51
  • 8

1 Answers1

1

If you use your Developer Tools, you will see that the content is actually being loaded into the 'dropdowns' ( I think they're officially called 'Collapsible Lists' ) But I think that what's happening is that the lists aren't being properly 're-initialized' when they are being injected into the DOM. Check out this post or this post for some help with 

.trigger('create');

I looked at your code and I think you'll want that in your getData() function. something like this:

$('#'+id+'items').append(elems);

becomes 

$('#'+id+'items').append(elems).trigger('create');

Not sure I followed everything correctly, but it looks like that is where you are actually 'pushing' the Collapsible List to the browser.

EDIT:

To just update the whole page, you could do something like this:

$("div[data-role='content']").trigger("create").trigger( 'updatelayout' );
Community
  • 1
  • 1
davehale23
  • 4,374
  • 2
  • 27
  • 40
  • Yea that sounds like you'd be right.. but just adding that didn't work it actually seemed to add the collapsable lists into other collapsable lists and still not show the data that exists in local storage. But when I go back and go back into that same page the data just shows again like it did normal in the lists, hmm – H E L T E R Oct 30 '12 at 05:21
  • hmm. well, check out the [mobile docs about events](http://jquerymobile.com/test/docs/api/events.html) scroll to the very bottom and check out the `updatelayout` section. I've updated my answer as well. – davehale23 Oct 30 '12 at 14:50
  • That seemed to work somewhat, but when I am on the form page for some reason the first time when I load the form page Display Data or th eback button in header cannot be clicked to #showall ... very odd but when i go back it can. Maybe I'm adding it to the wrong spot? I put it above the var elems = – H E L T E R Oct 30 '12 at 16:20
  • and this is returned in console Uncaught TypeError: Cannot read property 'jQuery18207078574332408607' of undefined jquery.mobile-1.2.0.min.js:2 – H E L T E R Oct 30 '12 at 16:39
  • Fixed some minor bugs, newest version is up – H E L T E R Oct 30 '12 at 18:51
  • could you try changing your binding to the `pageinit` rather than the `pagecreate` in main.js line:25 `$('#distance').on("pageinit", function() {` the reason is, I looked at the events docs here http://jquerymobile.com/demos/1.2.0/docs/api/events.html and it says >"...because this will work regardless of whether the page is loaded directly or if the content is pulled into another page..." – davehale23 Oct 31 '12 at 14:41
  • Doing that gets rid of the Collapsable lists – H E L T E R Oct 31 '12 at 18:56