How I Can I Delay The Expansion Of A Collapsible Until Its Content Is Fetched?

I want to integrate a collapsible in my jQM app (1.3.2) that works as follows: It starts collapsed. On click it starts to fetch listitems for the collapsible from the server. The

Solution 1:

When expand/collapse events are triggered, jQM adds several classes to show/hide contents as well as update collapsible button/header.

In this case, event.preventDefault() isn't going to prevent event(s) from bubbling and stop them from executing. Thus you need to use event.stopImmediatePropagation() to stop expand event once header is clicked.

When a collapsible is collapsed, it has a class ui-collapsible-collapsed and once expanded, the class is removed. Therefore, when collapse is triggered, it works normally without interruption.

$(".ui-collapsible-heading-toggle").on("click", function (e) {

    // check if collapsible is whether expanded or collapsedif ($(this).closest(".ui-collapsible").hasClass("ui-collapsible-collapsed")) {

        // true// stop "expand" event on click,tap,vclick,touchstart, etc...
        e.stopImmediatePropagation();

        // show loading msg - optional
        $.mobile.loading("show", {
            text: "Loading...Please wait",
            textVisible: true
        });

        // for demo// add items, expand and hide loading msgsetTimeout(function () {                
            $("#lv").empty().append(items).listview("refresh");
            $("#c").trigger("expand");
            $.mobile.loading("hide");
        }, 1000);
    }

    // false// collapse normally or do something else
});

Demo

Solution 2:

I'm not intimately familiar with JQM but my first thought was empty the list before sending for more data....which seems to prevent it expanding.

var stop = function(event) {    
    $(this).find('.ui-listview').empty()
    event.preventDefault();

    /* do ajax and then refresh component with expand enabled */
}

$('#c').on('expand', stop);

DEMO - without ajax

Solution 3:

After wading around in the event system, I concluded for now that if you set preventDefault() once you are stuck with it forever. Based on the solution of charlietfl I added code to make the visual impact minimal, maybe there is also a way to prevent the GUI from refreshing for the 20ms to make it fully unnoticable.

var stop_n_load = function (event) {
  $('#lv').empty();
  $('#lv').listview('refresh');

  setTimeout(function() {
    $('#c').trigger('collapse');
  }, 20);

  // Do some work that takes time and trigger expand afterwards ...setTimeout(function () {
    dd = newDate();
    $('#lv').empty();
    $('#lv').append("<li><a href='#'>Item A (" + dd + ")</a></li>");
    $('#lv').append("<li><a href='#'>Item B (" + dd + ")</a></li>");
    $('#lv').listview('refresh');

    $('#c').trigger('expand');
    $('#c').one('collapse', reset);
  }, 2000);
};

I'm still searching for a solution that resets the event to its previous state, though.