Passing variables through querystrings on jquery mobile

Question

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

add listeners rather than using inline JS.

Omar
– Omar

2014-06-05 14:55:10 +00:00
Commented Jun 5, 2014 at 14:55 — Omar
– Omar, Commented Jun 5, 2014 at 14:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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');

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 5, 2014 at 14:56

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

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

4 Comments

MissCoder87 Over a year ago

Thanks so much, again. Is there something not quite right with that document click event, it seems to be malformed in my IDE

Gajotres Over a year ago

Yeah I was missing a quote, I couldn't test it so I wrote it out of my head

MissCoder87 Over a year ago

Sorry for the delay, it kinda did, but i can't seem to see editiID being set correctly

MissCoder87 Over a year ago

I keep saying this, but you are an absolute gem of a person for explaining all these things to me.

Collectives™ on Stack Overflow

Passing variables through querystrings on jquery mobile

1 Answer 1

Update

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related