Question

I’m asking this question only for learning purpose as I solved the problem even before writing this, but maybe you’ll point out something useful for someone else.

I’m using Twitter Bootstrap and its modal lib and here’s what my code does. We open a modal, ask the user to input some json and then, the user press a “compute button” to compute the data and then the modal closes because of the data-dismiss.

I just want to know if it’s possible to prevent an action triggered by the html data-dismiss attribute using jQuery, javascript or something else.

Here is the HMTL code for the modal:

<div class="modal hide fade" id="source_modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Manually insert the data</h3>
    </div>
    <div class="modal-body">
        <textarea class="source_input">Insert your data here</textarea>
        <div class="clear"></div>
        <a href="#" class="btn action_clear">Clear</a>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a class="btn btn-primary action_compute" data-dismiss="modal" href="#"><i class="icon-fire"></i> Compute</a>
    </div>
</div>

Note the last button (compute button) has data-dismiss="modal"

So basically, there’s a try catch function attached to the action_compute class of the anchor.

See this jQuery code:

// compute graph with json input
  $('.action_compute').on('click', function(event) {
    try
    {
      var json = JSON.parse($('.source_input').val());
      create_graph(json);
    }
    catch(err)
    {
      txt="There was an with your json data.\n";
      txt+="Error description: " + err.message + "\n\n";
      txt+="you can try to validate it with JSONLint. You may also leave the textarea blank for default behaviour";
      alert(txt);
    }
  });

Is it possible to prevent the action triggered by data-dismiss?

Note:

• The Twitter bootstrap provide a jquery method to close the modal so I removed data-dismiss and I dismiss the modal using $('#upload_modal').modal('hide'); only if I get to the end of the try so it does what I want.
• The jQuery event.preventDefault(); doesn’t stop the dismiss action when placed on the first line of the catch(err) jQuery code 😉

Answer 1

Try adding a listener to prevent the execution of the hide method.

$('.modal').one('hide', function (e) {e.preventDefault()});​​​​​​​​​​​​​​​

Place this inside the error catching section. As long as the click event is handled before the call to hide(), this should work.

JSFiddle

---

Since you did say the question was for learning purposes, I’ll add some additional info here on the architecture of Bootstrap plugin events.

Many of the Bootstrap plugins include both “before” and “after” events. The “before” events, in this case hide, are triggered and propagate up the DOM before any of the essential actions of the associated methods have been executed. When execution is returned back to the originally triggering methods, the first thing that happens is a check to see if the action has been cancelled:

if (e.isDefaultPrevented()) return

Hence, any event listener which calls e.preventDefault() will effectively cancel the action. Simple and as you would expect.

Any well implemented jQuery plugin which triggers events should have this functionality.