[JustinDupuy]

I’m attempting to create a settings page where a user can enter information into text boxes and save as local storage using the Onchange: Run Javascript:

localStorage.setItem('nameSuper',$('#m1-mscPayroll_home-nameSuper').val());

Under documentReadyHandler I am retrieving the local storage to repopulate the textbox:

//retrieve stored settings
    $('#m1-mscPayroll_home-nameSuper').val(localStorage.getItem("nameSuper"));

The app is set up as a multipage application, and I can’t figure out how to populate other textboxes with this saved local storage data. I believe I could use pre/postPageTransition or prePageLoad if I set up multiple pages, but that could get messy in my file explorer.
On a sidenote, I am going to start another thread asking when to use the pre/postPageTransition, prePageLoad, documentReadyHandler, and what order they fire in. They seem very similar and a bit confusing.

This is a native app, using 2.6.3, Windows 7 pro, cordova 2.9.0.
Thanks, you have always been helpful.

[Brandon Batie]

Hi,

The documentReadyHandler will fire once its loaded and ready. Which is good if you only need to get the info on startup. If I understand you correctly, you need a consistent save and retrieve I would suggest making a new function that both saves to the local storage and populates any needed elements. You could easily call this in the onChange event, effectively saving to local storage and populating any elements as the data changes.

The prePage load will fire before the page change, post after is it loaded, but remember, unlike the document ready handler, these will fire on any page changes, so any code there will be called quite a bit i you have a lot of navigation in your app. So be sure to validate (using an if statement is a good way to go) what page is changing as you use them to keep your app running as smooth as possible. You can use either the currentPageId or targetPageId, or both if needed in the prePageTransition. The postPageTransition uses the newPageId.

Hope this helps.

[JustinDupuy]

Brandon,
Thanks for replying. I was able to get it working, my problem was that I was using the same textbox id on the settings page as I was on the other pages. I renamed the textboxes and it is functioning.
The settings page looks the same, textbox with onChange javascript function:

localStorage.setItem('nameSuper',$('#m1-mscPayroll_home-nameSuper').val());

documentReadyHandler code looks like this:

    //retrieve stored settings
    $('#m1-mscPayroll_home-nameSuper').val(localStorage.getItem('nameSuper'));  //settings page textbox
    $('#m1-mscPayroll_home-nameSuper2').val(localStorage.getItem('nameSuper'));  //other page textbox

Now I can navigate to the settings page, change a user’s name and click back, and the new name will be updated in a textbox. If I click on settings again, the texbox on that page is correctly showing the new user name.
It all works, but it doesn’t make sense. The code in the documentReadyHandler should only excecute once when the app is loaded up initially. So how does it “get” the new value again?

[Brandon Batie]

Hi,
You are correct, the ready handler only fires once. What you are seeing is a side effect of the single page application (SPA) structure. Since all your information is in a single page the textbox will retain the information you put in until its erased or the application is reloaded. So, technically its not retaining anything, just showing the last data typed in.

Hope this helps.

[Author]

Posts