JqueryMobile collapsibleset with table column toggle error in multipage

Question

I am building a jquery mobile website and came across this error. I am using JqueryMobile 1.4.2 and multipage. One of the pages has a Collapsibleset and inside each collapsible I have a table containing the column toggle feature.

Everything works fine until I click out to close the columtoggle menu. Instead of being staying in the same page, I get redirected back to the first page.

Is this a bug or am I doing something wrong?

Here is the example: http://jsfiddle.net/3hmea/

HTML CODE:

<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Page 1</h1>

    </div>
    <div data-role="content">
        This is page one
        <a href="#" id='changepage'>Click Here for page 2</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>            
    </div>
</div>

<!-- Page 2 -->
<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed">
        <h1>Page 2</h1>

    </div>
    <div data-role="content">
      <div data-role="collapsibleset" data-inset="false">
<div data-role="collapsible">
    <h3>Collapsible 1</h3>
    <table data-role="table" id="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
     <thead>
       <tr class="ui-bar-d">
         <th>Horário</th>
         <th>De</th>
         <th>Para</th>
         <th data-priority="2">Trans.</th>
         <th data-priority="1">Obs.</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
         <td>1941</td>
         <td>100%</td>
         <td>74</td>
       </tr>           
     </tbody>
    </table>
</div>
<div data-role="collapsible">
    <h3>Collapsible 2</h3>
    <table data-role="table" id="table1" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
     <thead>
       <tr class="ui-bar-d">
         <th>Horário</th>
         <th>De</th>
         <th>Para</th>
         <th data-priority="2">Trans.</th>
         <th data-priority="1">Obs.</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
         <td>1941</td>
         <td>100%</td>
         <td>74</td>
       </tr>           
     </tbody>
    </table>
</div>

Jquery:

$('#changepage').on('click', function() {
$(':mobile-pagecontainer').pagecontainer('change', '#page2', {
    transition: 'flip',
    changeHash: false,
    reverse: true,
    showLoadMsg: true
});
});

STEPS: Click on the link to the second page and then open the collapsible and the 'columns to display' button. Finally click outside to close the menu.

Answer 1

Just remove changeHash : false parameter and everything will work just fine.

Working example: http://jsfiddle.net/d6z5y/

JavaScript:

$(document).on('vclick', '#changepage',function() {
    $(':mobile-pagecontainer').pagecontainer('change', '#page2', {
        transition: 'flip',
        reverse: true,
        showLoadMsg: true
    });
});

You need to understand pagecontainer is still work in progress so bug are to be expected.