CODEWITHSUNDEEP
javascriptjqueryjquery-mobilecordova
MissCoder87
MissCoder87

Reputation: 2669

Passing variables through querystrings on jquery mobile

I'm trying to pass a variable through from one page to another in my phone gap application. The function however, never seems to get called.

Heres what's building up the links:

$.each(data, function(index) {
    $("#listpetsList").append("<li><a href='javascript:loadPetdialog(" + data[index].AnimalCode + ")' data-rel=\"dialog\" data-transition=\"flip\"><img src='" + data[index].Picture + "'><h2>" + data[index].Name + "</h2><p>Type</p></li>");
});

Heres the loadPetDialog:

var editingId = 0

function loadPetdialog(id) {
    alert("hit");
    editingId = id;
    $.mobile.changePage("#select-pet-dialog");
}

However, it never seems to get hit

Upvotes: 1

Views: 66

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Don't use inline JavaScript with jQuery Mobile.

Do it like this:

$.each(data, function(index) {
    $("#listpetsList").append("<li><a data-custom='"+ data[index].AnimalCode + "' data-rel=\"dialog\" data-transition=\"flip\"><img src='" + data[index].Picture + "'><h2>" + data[index].Name + "</h2><p>Type</p></li>");
});

$(document).on('click', '#listpetsList li a', function(){ 
    editingId  = $(this).prop('data-custom');
    $.mobile.changePage("#select-pet-dialog");
});

var editingId = 0

Inline JavaScript has a tendency not to work or even misfire when used with jQuery Mobile. So it is best to bind click event to each listview element and get particular li element value when you click on it.

In my example I have bound click event to each listview elements. data[index].AnimalCode is saved as a custom data value. When you click on listview click event will trigger on selected listview element only, then we can easily find custom data value, add it to global variable and programatically change page.

Click event is bound in such way that it doesn't care if listview have or don't have inner content. It will work for any existing and future listview content.

Update

I made a working example out of your code: http://jsfiddle.net/Gajotres/92XG5/

There's only one difference between this code and last weeks example.

Change this line:

    editingId  = $(this).prop('data-custom');

To this line:

    editingId  = $(this).attr('data-custom');

Upvotes: 3

Related Questions