How to send data from one page to another page using Jquery mobile?

Question

Possible Duplicate:
How-to store variable beetween jQM pages?

I am new to jquery mobile and a bit confused of sending data to another page. In my html file it consists of listview. when i click on list it needs to redirect to another page and at the same time i want to send data in that list to second page. Actually my code is..

Polls.html

     <body>
    <section id="pollsscreen" data-role="page">
        <header data-role="header" > 
            <h1> Video </h1>
            <a href="index.html" data-role="button" data-icon="back" data-direction="reverse" data-transition="slide"> Back </a>
        </header>
        <div data-role="content">
            <ul id="pollslist" data-role="listview" data-theme="e" >
            </ul>
        </div>
    </section>
</body>

Polls.js (my javascript file)

   var addPollsList = function addPollsList() {
     $("#pollslist").prepend("<li><a href='pollsdetails.html'>What is your name?</a></li>");
     $("#pollslist").prepend("<li><a href='pollsdetails.html'>Give review of new movie..</a></li>");  
     $("#pollslist").listview("refresh");      
}

pollsdetails.html

    <section id="pollsdetailspage" data-role="page">
        <header data-role="header">   
            <h1> Polls </h1>
            <a href="polls.html" data-role="button" data-icon="back" data-direction="reverse" data-transition="slide"> Back </a>             
        </header> 
        <div data-role="content" class="pollsdetailsscreen">
            <p>Polls details page</p>
        </div>
    </section>    
</body>

As per the code everything is working good. when i click on list it is redirecting to "pollsdetails.html" file. But here i am not getting any idea how to send the data to that html page and i want to set that data to

tag in pollsdetails.html page. can anyone help me with this.......

Thanks in advance...

score 1 · Answer 1 · answered Jun 13 '12 at 08:47

you can use global variables for this..

In Polls.js

var addPollsList = function addPollsList() {
 $("#pollslist").prepend('<li><a href="#" onclick="test('+Ur_data+')">What is your name?</a></li>');
 $("#pollslist").prepend('<li><a href="#" onclick="test2('+Ur_data+')">Give review of new movie..</a></li>');  
 $("#pollslist").listview("refresh");

}

function test1(data){
    // set urs global variable here
    global_variable = data;
     $.mobile.changePage( "pollsdetails.html");
}

function test2(data){
    // set urs global variable  2 here
    global_variable_2 = data;
     $.mobile.changePage( "pollsdetails.html");
}

and in pollsdetails.js you can access global_variable and global_variable_2.

score 1 · Answer 2 · answered Jun 13 '12 at 15:04

You could use Query string parameters if you are trying to pass simple name-value pairs to the next page.

var addPollsList = function addPollsList() {
     $("#pollslist").prepend("<li><a href='pollsdetails.html?myparam=value1'>What is your name?</a></li>");
     $("#pollslist").prepend("<li><a href='pollsdetails.html?myparam=value2'>Give review of new movie..</a></li>");  
     $("#pollslist").listview("refresh");      
}

score 1 · Answer 3 · answered Jun 13 '12 at 15:19

I would go with Localstorage

var userReview = {
                "Name":"Bob",
                "Review":"Awesome party movie!!",
                "MovieTitle":"Project X"
               };

            //Store the object in local storage
            localStorage.setItem('UserReview',JSON.stringify(userReview));

then you can always call the localstorage to get the info back when you navigate to a different page.

var userReview = JSON.parse(localStorage.getItem("UserReview"));
var userName = userReview.Name;
var review = userReview.Review;
var movieTitle = userReview.MovieTitle;

How to send data from one page to another page using Jquery mobile?

3 Answers3