locked
How to implement a jQuery Collapsible Widget RRS feed

  • Question

  • I'm attempting to implement a jQuery Mobile Collapsible Widget for some of my data. According to the example, I need the DOM to look like this:

    <div data-role="collapsible" data-collapsed="false">
        <h4>Heading</h4>
        <ul data-role="listview">
            <li><a href="#">List item 1</a></li>
            <li><a href="#">List item 2</a></li>
            <li><a href="#">List item 3</a></li>
        </ul>
    </div>

    So, I've written code like so:

    myapp.ProductOptions.PressureConst_render = function (element, contentItem) {
        contentItem.screen.getPressures().then(function (results) {
            var strOptions;
            results.data.forEach(function (pressure) {
                strOptions += '<li><a href="#">' + pressure.DisplayName + '</a></li>';
            });
    
            $(element).append('<div data-role="collapsible" data-collapsed="false"> \
                                <h4>Heading</h4> \
                                <ul data-role="listview"> ' +
                                strOptions + '</ul> </div');
        });
    };

    Which ends up looking like this:

    And has a DOM that looks like this:

    <div class="msls-last-column  msls-presenter msls-ctl-value-custom-control msls-vauto msls-hauto msls-leaf msls-redraw">
      <div class="msls-label msls-label-align-top msls-clear msls-vauto">
        <label>Pressure Construction</label>
      </div>
      <div class="msls-clear msls-presenter-content msls-font-style-normal msls-vauto">
        <div data-role="collapsible" data-collapsed="false">
          <h4>Heading</h4>
          <ul data-role="listview">
            undefined
            <li>
              <a href="#">0-0.5 PSI</a>
            </li>
            <li>
              <a href="#">0-4.9 PSI</a>
            </li>
            <li>
              <a href="#">0-14.9 PSI</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    That looks close enough to the example for me that I don't understand why it's not rendering correctly. Can anyone see a mistake?

    Wednesday, November 18, 2015 8:54 PM

Answers

All replies

  • I wonder whether you might have to trigger a 'create' afterwards to get jQM to render that correctly?

    See this old blog post on how I had to do the above to render jQM buttons correctly: A LightSwitch HTML client header for a desktop browser LOB application look and feel

    Also make sure that the collapsible widget is supported in jQM version 1.3 which is the version used by LightSwitch.


    Regards, Xander. My Blog

    • Edited by novascape Wednesday, November 18, 2015 10:00 PM corrected jQM version
    • Marked as answer by kyle ls Wednesday, November 18, 2015 10:17 PM
    Wednesday, November 18, 2015 10:00 PM
  • myapp.ProductOptions.PressureConst_render = function (element, contentItem) { contentItem.screen.getPressures().then(function (results) { var strOptions; results.data.forEach(function (pressure) { // air code not tested

    pressure.getDisplayName().then(function (dispName) { if (!!dispName) { strOptions += '<li><a href="#">' + dispName + '</a></li>'; }

    }); }); $(element).append('<div data-role="collapsible" data-collapsed="false"> \ <h4>Heading</h4> \ <ul data-role="listview"> ' + strOptions + '</ul> </div'); });

    }); };


    I don't see a mistake, but it may be that the data isn't loaded at the time you first enter the loop.  Can you do an asynchronous get() on the DisplayName like you did for the collection? 
    • Edited by Hessc Wednesday, November 18, 2015 10:13 PM
    Wednesday, November 18, 2015 10:10 PM
  • My guess is that the data is actually loaded and available as the actual items are listed/displayed, just not rendered or marked up correctly.

    Regards, Xander. My Blog

    Wednesday, November 18, 2015 10:15 PM
  • That was it. I had to add .trigger('create') to the end of my append statement.

    I'll take the time to read that entire article in-depth tomorrow. But in the meantime, do you have any idea why the create trigger was necessary here and not, for example, when I use similar code to make radio buttons?

    Wednesday, November 18, 2015 10:15 PM
  • The 0-0.5 PSI is the DisplayName so it's getting loaded just fine. novascape has the correct answer above.
    Wednesday, November 18, 2015 10:16 PM
  • Glad it worked for you. I suspect that a standard radio button is a standard HTML control and not jQuery Mobile specific and therefore does not need any enhancing by jQuery Mobile. Something like the Collapsible Widget on the other hand is a jQuery Mobile specific control with more CSS (and JS?) and therefore needs jQuery Mobile to do it's "magic" to render correctly.

    So you will probably find you need .trigger() on any jQuery Mobile specific control.


    Regards, Xander. My Blog

    Wednesday, November 18, 2015 10:30 PM