CODEWITHSUNDEEP
jquerytwitter-bootstrap-3asp.net-mvc-5
Alnedru
Alnedru

Reputation: 2655

MVC call bootstrap modal from ajax success

I would like to call a modal on ajax success call, but dont know how to do it:

Here is what i have, simple modal on my page:

<div class="modal fade" id="myModalSetMain">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

And here is the call, where after success i would like to show that modal:

 $.ajax({
                url: "/Controller/Action/" + id,
                type: "GET",
                error: function (response) {

                },
                success: function (response) {

                }
            });

Because by default i see examples they call it with button like so:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

How can i avoid using button then?

Upvotes: 1

Views: 4944

Answers (2)

Irvin Dominin
Irvin Dominin

Reputation: 30993

I think you can trigger programmatically the modal opening using:

$('#myModal').modal('show');

in your success callback function, where myModal is your modal div id.

Ref: http://getbootstrap.com/javascript/#modals

Demo: http://jsfiddle.net/IrvinDominin/fYG5b/

Upvotes: 2

ReNiSh AR
ReNiSh AR

Reputation: 2852

you just give a button and trigger click event for that button from ajax success. and also set the button to hidden.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="butn" style="display:none;">
  Launch demo modal
</button>

and in the ajax success, just put.

$('#butn').trigger('click');

Upvotes: 0

Related Questions