mobile.changePage after listview.refresh causes double transition in JQueryMobile

mobile.changePage after listview.refresh causes double transition in JQueryMobile

HI Everyone,

I am loading a nexted listview with values and then allowing the user to filter the items.

Rather than use the built-in filter functions, I have my own #filterpage div which has a few checkboxes. WHen the user clicks the 'Apply Filter' button, then the listview on the main page is rebuilt and I use .changepage to go back to the main page. This is where it goes haywire - if the user clicks on a list item then the sublist page slides into view, then immediately slides away. If the user clicks the list item again, then the sublist page slides into view and stays (which is the desired behaviour).

Note: This bug only shows up on the Safari for the iPhone. It works fine on FF/Safari for the desktop.

I have loaded the test page here: http://iwantthatflight.com.au/temp/listdemo.htm

To replicate:

  1. Click 'Filter'
  2. Untick an item.
  3. Click 'Filter Flights'. You will be returned to the home page.
  4. Click on '17 Mar, 2011' list item
  5. The flights for this day will slide into view, and then immediately slide out of view.
The code that sits on the 'Filter Flights' button is:
  1. $('#FilterFlights').bind("tap",function( e )
    {
    LoadData(true);
    $
    .mobile.changePage("#mainpage", "slide", false, true);
    });


The LoadData(true) causes the listview to be rebuilt. If I leave this line out, then the double transition does not occur (but the filter is not applied). If I leave out the .changePage, then the listview is rebuilt and I can click the 'Back' button which will manually take me back to the homepage - and the double transition will not occur. I have tried replacing the .changePage with window.history.back();return false; (replicating clicking the back button) but that hasn't worked for me either.

Any help would be much appreciated.