How to Open Bootstrap Modal in Ajax Success

Pop up Bootstrap modal on success AJAX call

<script>
    $(function() {
      $('#beta-signup').submit(function(event) {
        event.preventDefault();

        var formEl = $(this);
        var submitButton = $('input[type=submit]', formEl);

        $.ajax({
          type: 'POST',
          url: formEl.prop('action'),
          accept: {
            javascript: 'application/javascript'
          },
          data: formEl.serialize(),
          beforeSend: function() {
            submitButton.prop('disabled', 'disabled');
              }
        success: function(data) {
           $('#your-modal').modal('toggle');
          }
        }).done(function(data) {
          submitButton.prop('disabled', false);
        });
      });
    });
</script>

After your done call back, add:

 success: function(data) {
               $('#your-modal').modal('toggle');
              }

And make sure your modal has similar attributes as:

<div class="modal fade" id="your-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>

Closing bootstrap modal on ajax success

I had a similar issue and it was driving me crazy. As a result I came up with a kind of crazy solution.

I added a class to the template used to create the popover. Here's the template used as an option to the popover() function:

template: '<div class="popover popover-width-control add-calendar-event"><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',

The key here is the addition of the class add-calendar-event. Then to get hide the modal I used:

$(".add-calendar-event").hide();

Bootstrap Modal pop-up in Ajax success flush (like shadow) than disappear MVC

Well, since I don't have access to your server, I'll mock the ajax call for this example.

HIH

$("#create").click(function(e){ 
var myModel = {  "TribeName": $('#TribeName').val()};
var jsonToPost = JSON.stringify(myModel);console.log('Sending post request...')$.ajax({    url: 'https://jsonplaceholder.typicode.com/posts',    async: true,    processData: false,    data: jsonToPost,    type: 'post',    contentType: 'application/json; charset=utf-8',    success: function (data) {        console.log(data)    //in this case data is {"id": 101}, so I have to modify the IF a bit        //if (data == true) {        if (data.id == 101) {            $('#myModal').modal('show');        }    },    error: function (err) {        console.log('error', err.status);    }});});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<input type="submit" id="create"  value="@Resource.Create" class="btn btn-primary" />

<!--Modal PopUp-->    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">        <div class="modal-dialog" role="document">            <div class="modal-content">                <div class="modal-header alert alert-success">                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">                        <span aria-hidden="true">×</span>                    </button>                    <h4 class="modal-title" id="myModalLabel">@Resource.InfromationDialog</h4>                </div>                <div class="modal-body">                    <p class="success-message">@Resource.PrompSuccess </p>                </div>                <div class="modal-footer">                    <button class="btn btn-success delete-confirm">@Resource.Ok</button>                    @*<button class="btn btn-default" data-dismiss="modal">@Resource.Cancel</button>*@                </div>            </div>        </div>    </div>

Set results from jQuery (AJAX) into Bootstrap modal

yes possible use this.

    <script type="text/javascript">
   function getBreak(breakid,pos,countrycode){
      $.ajax({
       url: "{{ url('getBreak') }}",
       type: "GET",
       data: "id="+breakid+"&pos="+pos+"&countrycode="+countrycode,
       success: function (result) {
       $('#divhtml').html(result);
       $('#myModal').modal('show');},
       error: function(data){
            alert("Error")
        }
      });
   }
</script>

and in the desiging you have to do this

<div id="myModal" class="modal fade" role="dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
   <div id="divhtml"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

---

Related Topics