Search code examples
javascriptjqueryhtmljquery-mobile

Jquery Mobile Collapsible-Set Not Collapsing On Demand

Good day,

I am having an issue with a Jquery Mobile collapsible-set that I am using as a simple menu. The normal user interaction is fine but when the client is on certain pages I'd like to expand the section containing the menu option that they had selected to get there.

My problem is that the menu is not accordioned/collapsed to the correct state (Image 2) after I execute the JavaScript function at the bottom of this post. I have placed alert('Foo') statements in that function to verify that it is trigger correctly and that alert works without fail. So I am left with the menu looking like Image 1.

I must mention that if I refresh the page with the old F-5 key, the menu correctly changes state to look like Image 2. It also functions exactly the same in IE, Chrome and Firefox.

I have considered that it is a caching issue and have tried various methods of triggering a JQuery Mobile refresh on all parts of the menu, surrounding division and the page in general, to no avail. I have also used quite a few methods of changing the accordion state of the menu, again without fruit.

I would certainly appreciate any advice you all might have.

Respectfully,

Big Fat Mike

This is an example of how it looks when you 1st load the page (Image 1):

Main.png
(source: svfexpress.com)

And this is an example of how it should look after I have expanded Direct Ship and then selected DSS (Image 2):

Main.png
(source: svfexpress.com)

The code to make the menu looks like this (note that I weeded out some of the anchors to reduce the size of this tome but the meat is still there):

<div id="menuDiv">
  <div id="theMenu" data-role="collapsible-set">
    <div id="mainMenu" data-collapsed="false" data-role="collapsible">
      <h3>Menu</h3>
      <p>
        <a href="index.php" title="Home.">Home</a><br />
        <a href="Safety.php" title="Safety.">Safety</a><br />
      </p>
    </div>
    <div id="dssMenu" data-collapsed="true" data-role="collapsible">
      <h3>Direct Ship</h3>
      <p>
        <a href="EditDSS.php" title="Edit Direct Ship Schedule.">DSS</a> 
      </p>
    </div>
    <div id="systemMenu" data-collapsed="true" data-role="collapsible">
      <h3>System</h3>
      <p>
        <a href="EditUsers.php" title="Edit Users.">Users</a><br />
        <a href="EditCustomers.php" title="Edit Customers.">Customers</a> 
      </p>
    </div>
    <div id="adminMenu" data-collapsed="true" data-role="collapsible">
      <h3>Admin</h3>
      <p>
        <a href="ViewLogs.php" title="View System Log.">Logs</a><br />
        <a href="PHPInfo.php" title="phpinfo().">PHPInfo</a><br />
      </p>
    </div>
  </div>
</div>

The JavaScript that I execute after the page has completed loading is this:

function onBodyLoad_EditDirectShipSchedule()
{
  $("#mainMenu").collapsible({collapsed: true});
  $("#dssMenu").collapsible({collapsed: false});
}

It may be worth noting that I am using onload="onBodyLoad_EditDirectShipSchedule() ;"> in the BODY tag to call the above JavaScript.

Solution

  • You should use the jQM page events instead of the body onload to ensure jQM has enhanced the collapsibleset before your code runs:

    $(document).on("pagecreate", "#page1", function(){
  $("#dssMenu").collapsible({collapsed: false});
});

    As the collapsibleset ensures that only one collapsible is expanded at a time, you do not need to collapse the first one, just expand the desired one.

    Of course, change "#page1" to the ID of your actual page.