bootstrap-modal icon indicating copy to clipboard operation
bootstrap-modal copied to clipboard

Modal Name Requirement for Ajax Modal

Open donniefitz2 opened this issue 12 years ago • 4 comments

I really like this plugin, but there's on thing missing in the documentation. It seems that naming the modal dialog div with -modal is required for the ajax functionality to work, but it's not explained anywhere.

I struggled to get the plugin to work, but after appending -modal to my modal container div, it worked fine. Noting that in the readme would be very helpful if it is indeed a requirement.

donniefitz2 avatar Aug 26 '13 17:08 donniefitz2

There shouldn't be any enforcement of naming baked into the library. Some of the examples assume you are setting up the modal according the Bootstrap's official 2.3 documentation but that's about it.

Would be curious to see if you can provided an example of the issue you saw.

jschr avatar Aug 26 '13 18:08 jschr

You're right, after looking deeper into the cause, I find that it's a simple matter of not using the Bootstrap default means of opening/identifying a modal. In the Bootstrap examples, they use this method to open a modal:

a href="#myModal" role="button" class="btn" data-toggle="modal"

So, when using the plugin, we are triggering the modal using the button's id instead of the href parameter. But if the href parameter is in place, it seems that the default Bootstrap modal will trigger, not the plugin. When I renamed my modal div using -modal, I didn't rename the href param of my button so the plugin worked instead of the default Bootstrap modal.

In short, don't use href=#myModal from the examples on the Bootstrap site or else the plugin doesn't work for whatever reason. Hope that makes sense.

donniefitz2 avatar Aug 26 '13 19:08 donniefitz2

You'll notice that the demo page uses the href method for the examples so I'm still no quite sure why you would be running into any issues.

jschr avatar Aug 26 '13 20:08 jschr

Yeah, the demo page uses the href method for the non-ajax examples, but the ajax example is not. It's using a button so there's no href. My original method was done using an anchor tag with the #idofthemodal and that's what caused the problem.

donniefitz2 avatar Aug 27 '13 03:08 donniefitz2