I have created two HTML pages page1.html and page2.html . In page1.html,I have three text fields and one submit button and in page2.html i have a list view. So, when i fill the texts and clicked on submit button in page1.html ,the data should come in list view. Please assist me.
Thanks in advance
Add a comment
|
3 Answers
SOLUTIONs :
(1). Loading page2 html element into your current DOM is also possible but you need to learn about this,** How the DOM is handled by the JQM ?
EXAMPLE : Consider two HTML file named has first and second and each file consist of five page . At the time of loading only the first html file will loaded into DOM fully even though the first page in the file is shown to you , rest of the page's will be hidden and partially loaded by JQM. Till now everything is ok but once you try to navigate page in different file, there's a lock.
For example ,now you are in page 1(first.html), trying to navigate page 3 in second file using ($.mobile.load..). It simply load the page 3 HTML element from second file into current DOM rest of them (including that page event) will be ignored.
(2). Using localStorage is best for passing value to external file.
Code :
page1.httml
var listvalues = { "1": "value1", "2": "value2", "3": "value3" }
*// OR IF INTPUT IS INSIDE FORM BETTER USER JQUERY SERIALIZER var listvalues = $("#form").serialize();*
localStorage.setItem('lists', JSON.stringify(listvalues));
page2.html
var listvalues = localStorage.getItem('lists');
//pase the value
var finalvalue = JSON.parse(listvalues);
// it look like this { "1": "value1", "2": "value2", "3": "value3" };
(3). You can also try sessionStorage to do the same.,
(4). If it is multi-page architecture try using global variable by declaring variable in common file.
2 Comments
mounika
Hi Kamesh, Can u plz help me .. I can see the data what i entered on first screen in second screen. My requirement is,it should display the data on list(which is in jquery ) .So when i keep on submitting(adding) in firstscreen, the data should be adding in listview(second screen).Thanks in advance
kamesh
@user3132144 Add the data while submitting the button in first page and store it in localstorage and get the value in second page . I have created the fiddle check it .. jsfiddle.net/koushikKumar/2zX5J/1
In the page1.html script you can pass the textfields values through URL(GET) method handle through script and access it in page2.html like the following.
page1.html:
$(#submit').click(function{
window.location.href="page2.html?text1="+$('#text1').val()...etc
});
page2.html:
$(document).ready(function(){
var idx = document.URL.indexOf('?text1=');
if (idx !== -1) {
//take each textfield values from the "document.URL" using substring function
}
});
Comments
// page1.html
// build an object
window.onload = function() {
var form = document.getElementById("my-form");
form.submit.onclick = function() {
var obj = {};
obj.full_name = form.full-name; // string
obj.age = form.age; // number
obj.location = form.location; // string
// store it into locale storage as a string
localStorage.setItem("obj", JSON.stringify(obj));
form.submit();
}
}
// page2.html
// retrieve it back from storage
var obj = localStorage.getItem("obj");
// use it
console.log(JSON.parse(obj));
// or
// for (var prop in obj) { console.log(obj[prop]); }
5 Comments
mounika
Thanks for ur reply.. Iam getting the data to the next page but it is not displaying on list.How can it happen?
hex494D49
@user3132144 Are you kidding me?
mounika
Nope.I can see the data what i entered on first screen in second screen. My requirement is,it should display the data on listview (which is in jquery ) .So when i keep on submitting(adding) in firstscreen, the data should be adding in listview(second screen).Thanks in advance
hex494D49
@user3132144 You already accepted an answer so I believe you don't need any further help.
mounika
yes ofcrse..but i want to see the data in the list :(.Please help me