How to pass values in jQuery Mobile?

Question

While working with PhoneGap I have created a SQLite database that stores the name and phone number along with an autoincrementing id field. I am using jQuery Mobile to fetch the result and display it in a listview, here is the code

 function queryDB(tx){

    tx.executeSql('SELECT * FROM DEMO',[],querySuccess,errorCB);
}

 function querySuccess(tx,result){

    $('#contactList').empty();

    $.each(result.rows,function(index){

        var row = result.rows.item(index);

        $('#contactList').append('<li><a href="#"><h3 class="ui-li-heading">'+row['name']+'</h3><p class="ui-li-desc">Phone '+row['phone']+'</p></a></li>');


    });


  $("#contactList").listview();

}

Now I want that when the user tap on certain list element on the screen he be should taken to a new page. Along with that I want to pass the id of that user to the new page so that I can save more details in the DB using that ID. As I am new to JQM, I am not able to figure out how to do it

not new, I have done some jQuery before, but I haven't touched its advanced features — Vineet Sharma
– Vineet Sharma, Commented May 7, 2012 at 14:42
Ok i might be able to help you. Do you use a div with data-role=page for the next page? or is it in a separate file? — Th0rndike
– Th0rndike, Commented May 8, 2012 at 8:09

Th0rndike · Accepted Answer · 2012-05-08 09:58:41Z

1

First thing you need to attack the event to all LI

    $('#contactsList li').on("vclick",function(){
        //do what you need to do to change the page
    });

You're also missing the 'data-role="button"' on each of the links inside li. I would change them like this:

    $('#contactList').append('<li><a href="#" id='+row['id']+' data-role="button"><h3 class="ui-li-heading">'+row["name"]+'</h3><p class="ui-li-desc">Phone '+row["phone"]+'</p></a></li>');

In the end:

      $('#contactsList li').on("vclick",function(){
        localStorage.currentId = $('a',this).attr("id");
        $.mobile.changePage('myOtherPage.html');
    });

To access the id from the other page:

    var currentId = localStorage.currentId;

answered May 8, 2012 at 9:58

Th0rndike

3,4363 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Th0rndike Over a year ago

@VineetSharma would you mind posting the code that actually worked? if i remember correctly you were having some issues with my code. I would like to clean this answer up for other people.

Vineet Sharma Over a year ago

I was having the issue with localstorage in jQuery Mobile. I was not able to retrieve the value from localstorage. I resolved that by placing the JS code inside <div data-role="page" id="page">

Collectives™ on Stack Overflow

How to pass values in jQuery Mobile?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related