CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-mobilepreventdefault
frequent
frequent

Reputation: 28513

How to prevent a jQuery Mobile collapsible from expanding?

I'm working with the JQM collapsibleset widget.

I need one collapsible to just be a button (that allows to add more elements to the set/accordeon), so when it's clicked, it should NOT expand (or collapse).

I'm using the following code to no avail:

 $("div.ui-dynamic-tabs div.tab_add").on("collapsiblebeforeexpand", function (e) {

      e.stopPropagation();
      e.stopImmediatePropagation();
      e.preventDefault();
      return false;
      console.log("foo");
 });

with both the collapsibleexpand and the collapsiblebeforeexpand custom event I added to JQM to test whether this would help.

I can register all events and returning false also does prevent the console from being triggered. However... the collapsible still expands... :-(

I thought adding a beforeexpand event would prevent the subsequent code inside JQM to run when calling preventDefault on the event, but it still executes.

Question:
How do I stop the collapsible from expanding correctly by prevent execution of an event triggered before the expanding javascript is run?

PS: I'm also tagging with jQueryUI because both JQM and UI use the same widget factory and event mechanisms.

Upvotes: 3

Views: 2305

Answers (3)

Dave Nottage
Dave Nottage

Reputation: 3602

As per frequent's answer, this is a modification that suits JQM 1.4:

$.widget('mobile.collapsible', $.mobile.collapsible, {
  _handleExpandCollapse: function(isCollapse) {
    if (this._trigger('before' + (isCollapse ? 'collapse' : 'expand'))) {
      this._superApply(arguments);
    }
  }
});

Bind the event:

$('#mycollapsible div').on('collapsiblebeforeexpand', function(event, ui) {
  if (someCondition)
    event.preventDefault(); // prevent node from expanding
});

Upvotes: 1

frequent
frequent

Reputation: 28513

Here is the solution from JQM on Github:

$.widget( "mobile.collapsible", $.mobile.collapsible, {
  _handleExpandCollapse: function( isCollapse ) {
    if ( this._trigger( "collapsiblebefore" +
      ( isCollapse ? "collapse" : "expand" ) ) ) {

          this._superApply( arguments );
     }
    }
});

Upvotes: 1

Frédéric Hamidi
Frédéric Hamidi

Reputation: 263047

In jQuery Mobile 1.3.2, that event is called collapsibleexpand, and its default behavior can indeed be prevented.

You only have to write:

$("div.ui-dynamic-tabs div.tab_add").on("collapsibleexpand", function(e) {
    e.preventDefault();
});

Upvotes: 1

Related Questions