Executing code after modal-body is loaded

[Nerian]

I am using a modal with the remote option. I'd like to be able to execute some code once the modal-body is loaded.

Currently the only events we have available is show and shown. I tried using shown but loading the modal-body occurs after the shown event is fired.

How could I achieve this?

[qnal]

Could you use the jQuery .change() functionality?

E.g.

$('.modal-body').change(
function() {alert('something'); // ?
});

[Nerian]

According to the docs, it just works for elements such as input, textareas, etc.

http://api.jquery.com/change/

El 17/09/2012, a las 21:03, Kunal Das notifications@github.com escribió:

Could you use the jQuery .change() functionality?

E.g.

$('.modal-body').change(
function() {alert('something'); // ?
});

—
Reply to this email directly or view it on GitHub.

[andrewdeandrade]

Hey @Nerian,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[Nerian]

Sure, here it is.

http://jsfiddle.net/Qz6rA/

[Nerian]

@koenpunt That last comment includes the jsfiddle :)

[koenpunt]

My bad, did run make haunt to see what it does and at first it showed me nothing, but now I see; it commented on all the issues..

[fat]

the remote option was mostly just added for people using the data api. if you're using js, you might as well just call load yourself on your modal (that way you can listen for errors as well). thanks!

[tghw]

@fat Not including this simple callback increases the complexity of the Javascript that you need to write.

if you're using js, you might as well just call load yourself on your modal

That same argument can be made for show, shown, hide, and hidden.

With the load event, the code is straight forward:

$('#foo').bind('load', function() { /* do something cool */ });

But without a load event, it becomes a lot more complex.

  $('#do-modal').click(function(e) {
      e.stopPropagation();
      $('#foo .modal-body').load(this.href, function(response, status, xhr) {
          /* do something cool */
          $('#foo').modal();
      });
  });

The fact that I have to go digging for jQuery's .load() API belies the fact that this is less than optimal.

The change is simple, adds functionality that a number of people have asked for, and does so in a very straightforward way.

I hope you'll reconsider your decision.

[Nerian]

I agree with Tyler. This will make enhancing Bootstrap much more easier and it just adds one line of code.

Please add this.

[cvn]

I would like to see this as well.

[pixelcode]

Seconded, if remote is an option then I think a loaded event should be included as well

[stylenclass]

+1 on this, is there an easy way, @fat what's the best way to add the 'loaded' event outside of a minified bootstrap-min.js

[feens]

Add me to the list of those needing this functionality. It became especially apparent in IE (9) where code in the 'click' handler for the link being used to open the dialog was being after before the 'shown' callback as well.

[tghw]

@feens Can you add a comment with your support on pull request #6846?

[hugochinchilla]

+1

this should be merged

[cvrebert]

Quasi-duplicate of #4735.

[tafs7]

+1 This is absolute crucial to make modals that load remote data work. I have an app that fetches HTML based on parameters passed to the controller action, and the response includes a form that relies on jquery validation. However, for validation to work, I have to wire up to the form after it has been added to the modal body. Without this fix, I have to manually call .load() as described above, and then open the modal once my form has been wired up. Very painful, when I could accomplish this with a data- attribute.

[jfortier-haptiq]

+1 here too! Actually found it very surprising that it wasn't there to begin with, seems only natural to me.

[Elyx0]

+1 Too. Please add it.

[cdekok]

+1 Was looking for the same thing :)

[cvrebert]

Future +1s should probably be directed at #6846 instead.

[wimklerkx]

+1 This issue is potentially a show-stopper, now we're planning conversion from a custom developed front-end framework to Bootstrap

[Vinorcola]

+1 I would need this functionality too.

[cvrebert]

@wimklerkx @Vinorcola I refer you both to #6846 (where someone has posted a workaround).

[Robdel12]

Yeah without this it makes using the remote option pretty useless. Unless you're just loading HTML/CSS, then it's okay.

[brycenesbitt]

+1 needed for google maps in a modal.

[cvrebert]

Locking this, since remote modals are deprecated per #14034.