bootstrap-modal
bootstrap-modal copied to clipboard
Modal Name Requirement for Ajax Modal
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.
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.
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.
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.
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.