CODEWITHSUNDEEP
jquerymobilecordova
Vineet Sharma
Vineet Sharma

Reputation: 817

How to pass values in jQuery Mobile?

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

Upvotes: 0

Views: 1201

Answers (1)

Th0rndike
Th0rndike

Reputation: 3436

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;

Upvotes: 1

Related Questions