CODEWITHSUNDEEP
twitter-bootstrapmodal-dialog
Adrian
Adrian

Reputation: 535

open bootstrap modal from modal

I'm trying to open a new bootstrap modal view from an actually opened modal view.

I'm using the following template to open all my different modals:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">&nbsp;</h3>
  </div>
  <div class="modal-body">
    <div class="alert alert-error" style="text-align: center;">
      <strong>ERROR!</strong><br />You should not be able to see this text!^
    </div>
  </div>
</div>
<script>
    $("a[data-target=#myModal]").click(function(ev) {
        ev.preventDefault();
        var target = $(this).attr("href");

        // load the url and show modal on success
        $("#myModal .modal-body").load(target, function() {
            $("#myModal").modal("show");
        });
    });
</script>

Then I call my modals with RoR:

<a href='<%= url_for :controller => :customers, :action => :new %>' data-target='#myModal' type='button' class='btn' role='button' data-toggle='modal'>
  <i class="icon-plus"></i> new Customer</a>

actually, when i press a button inside a modal like that one, nothing happens.

Upvotes: 0

Views: 1567

Answers (1)

Sherbrow
Sherbrow

Reputation: 17379

First of all, the data-toggle="modal" attribute should not be used when you use your own modal loading, because the remote page will be loaded twice (by you and the plugin).

Secondly, when you bind events, it only uses the elements already on the page, unless you use delegated events like :

$(document).on('click','a[data-target="#myModal"]', function(ev) {

});

Notice the simple quotes ' around the selector and the double quotes " around the attribute value.

And from there, it should work : Demo (jsfiddle)

Upvotes: 3

Related Questions