语言

Menu
Sites
Language
Pages and js functions. Saving/loading data to localStorage problem

Hi, im making an app with few pages (tizen web project -> UI builder -> navigation application) and i cant handle the error which occurs while im trying to call my functions.

I have 2 related pages:
1. contacts page
2. add new contact page

I have written function "createContact" which is getting data from forms (name, lastname etc) in "addContactPage" page then is making an unique key (var key) and concatenate strings from input forms (var data). Finally it calls setItem(key, data) function and saves data in localStorage.

The "contactsPage" is set to invoke "loadContacts" function on "page create" and "page show" events.

ID's of html elements, page elements, submit buttons are set properly.
Functions are placed in new js file ./saveData.js and also in index.managed.js.

Errors that i get in browser console:
1. file:///home/alan/tizen-sdk/tools/websimulator/web/ripple.js Failed to load resource
also some warnings from ripple.js
2. Uncaught TypeError: _addContact_page.prototype.createContact is not a function

I noticed that a lot of warnings appearing (even in tizen generated files) when im creating page event (f.e on page create) functions. Most of them are same: 'element' was used before it was defined.

I just want to save data from one page to localStorage and load that data to another page. Ill be gratefull for any help.

 

If you need code of functions or whole project just tell me below. I dont want whole code solution, i want to know what i did wrong to avoid same errors in future development.

 

列表

响应

6 回复
AVSukhov

Hello,

If you can share your sample project it will be very helpfull for analysis.

Alan Sobieraj

speedyshare dot com /Yt2wj/TinyContacts.zip

 

thanks a lot that you will look at my project. Tizen IDE looks and works great (i made some Android projects with Android Studio and i really enjoy with the Tizen IDE) but i think i have too little knowledge to develop anything for Tizen now. It would be great if somebody give me some advice and tips, helps me understand how it works. Couse i want to stay here longer :D

AVSukhov

Hello,

Hmm...

Fisrt of all:

first problem when user tap Submit button on addContact page:

you create an function object:

_addContact_page.prototype.createContact = function(event) {};

after this in init function you assign a value of HTMLObject to this createContact object:

_addContact_page.prototype.createContact = document.getElementById("createContact");

and after this you try call this (HTMlObject) as function when user click button:

tau.event.on(document.querySelectorAll("#createContact"), "tap", function(event) { _addContact_page.prototype.createContact(event); });

It is causing an error.

You need you need to remove this line: (index.managed.js line 266).

Further:

in _addContact_page.prototype.createContact method from index.js:

you can try get value from inputs:

var lastname = document.getElementById("lastname");

but at first, using this line you get HTMLObject instead value, secondly you id "lastname" does not correspond id from html "textinput2".

in this case, you need use:

var lastname = document.getElementById("textinput2").value;

 

When you set item to localStorage you use:

localStorage.setItem(key.value, data.value);

but key and data are strings in your case and key.value and data.value returns undefined.

 

Also, you you have not implimented transition from addContact page to page1.

you have not used loadContacts() method.

 

and etc

In this case, probably easier to rewrite everything in place to correct it.

If you do not have a lot of experience in web development, it is best not to use UI builder and implements all pages and scripts by yourself.

Alan Sobieraj

Thanks a lot for your time that you spend on explaining me how it works!

 

Now ive called loadContacts() in index.managed.js:

        _page1_page.prototype.loadContacts(event);

but i need to call it everytime when page1 is showing (f.e. when im returning to page1 from addContact page). Ive made some actions for showPage event, createPage event and others but it still doesnt works. But i will try to make it by myself. Thanks for your help again!

Alan Sobieraj

Hey,

 

i noticed that browser console is displaying logs:

onpagechange, onpagebeforechange etc

i found those methods in index.js and this is what i placed there:

app.onpagechange = function() {
    // TODO:: Do your job after switching from the current page to the new page
    _page2_page.prototype.loadEvents(event);
    _page1_page.prototype.loadContacts(event);
    console.log("onpagechange");
};

now, when i add contact or event and back to contacts page or events page they are loading data from localStorage. Im not sure if its good idea to invoke functions like that but its the only solution that i found.

Would be great if you tell me something about my idea.

AVSukhov

Hello,

Sorry for delay.

Yes, it is good practice to place the code for initialization in pagechange, pagebeforechange and pageshow, pagebeforechange event habdlers.

For more info about this events:

https://api.jquerymobile.com/category/events/