Question

I have a jquery mobile application with two “pages”. On the first page is a Google map, and on the second page is a listview of buildings, where each list item has an id associated with it. When the user clicks a building, the map is meant to pan to that building and show a marker. However, one of the quirks of jquery mobile is that I have to call google.maps.event.trigger(map, 'resize') and map.panTo(somePosition) after the page transition takes place, otherwise the map shows up funky. I am tapping into the jQuery Mobile pageshow event to do this. My question is, is there anything either in the pageshow event handler arguments or any way of attaching something to the pageshow event handler arguments that will allow me to identify the id of the list item that was clicked which caused the page transition in the first place, so I can use this to determine where to pan the map to?

At the moment, I’m having to do it in a round about kind of way, where I tap into the click event of the selected list item, store the selected list item id in a global variable and then use that global variable later on when in the pageshow event handler.

So something like:

var selectedBuilding;

$('a.buildingSelect').click(function(e) {
    e.preventDefault();
    selectedBuilding = $(this).attr("data-buildingNum");
});


$('div').live('pageshow',function(event, ui){
    if (ui.prevPage.attr('id') === "buildingSelect") {
        google.maps.event.trigger(map, 'resize');
        map.panTo(selectedBuilding);
    }
});

Apart from being a little messy, one of the problems with this is if the user didn’t select a building number at all, such as when they press the ‘back’ button on the building list page. In this case, the pageshow event handler still gets executed, though the selected building will be either non existent if the user hasn’t selected a building previously, or will cause the map to pan to the last selected building if they have selected a building previously, which isn’t actually the intended behaviour. I am sure I could make some additional global variables available to both event handlers to code around this, but it would be a little messy. Ideally what I’m looking for is a way to only have to bind to the pageshow event and from within the binded function be able to derive which building id was clicked.

I am still relatively new to jQuery and javascript in general, so please keep this in mind. Though I’ve had a bit of a play with the javascript debugging tools in Chrome, I’m still not really sure how I would go about effectively finding what information is made available in the ui argument to the pageshow event handler, which I imagine would be a good start towards solving problems like this.

Answer 1

You could stick the pageshow event handler inside buildingSelect‘s click handler, and use the syntax that allows you to pass data through event binders: .live( eventType, eventData, handler ) from http://api.jquery.com/live/.

But then you’d have to die the other live pageshow handlers before doing this. If it was me, I’d just clean up the way you’re storing those global variables and call it a day. Maybe put them in a nice object that sits off a namespace so it’s safer.

EDIT: changed my incorrect colloquial “destroy” to the correct die. So you would want to die the event handlers as in $('div').die() or any of the other variations explained in the documentation: http://api.jquery.com/die/