Bootstrap Modal Hide Not Working With Jquery Ajax

My Ajax script not hide Bootstrap Modal after submit

Edit: You could just use $('.modal').hide() if you want to only hide the modal.

You need to set the value of the modal's id inside a script like:

<script type="text/javascript">
    var id = '#dataModal<?php echo $record['ID']; ?>';
</script>

Then you can use:

$(id).hide();

jQuery - Function on Hide Modal Not Working After Ajax Success On First Run

        .done(function(data) {
            // hide modal (before)
            $('#myModal').modal('hide');

            ...

            // register hide event listener (after)
            $('#myModal').on('hide.bs.modal', function (e) {
                ...
            })
        })

You hiding modal and after that adding hide action listener. Listener starts working after declaration, so it handles hide action just from second time.

And after that, when done occurs, you adding every time new listener for hide event without deleting old one.

I recommend to move $('#myModal').on('hide.bs.modal', ...}); outside done method (what means create listener only once, when page loaded).

• EDIT1: working code sample

$( document ).ready(function() {

  // create event listener once when page loaded
  $('#myModal').on('hide.bs.modal', function (e) {
     $(".alert.alert-success").show();
     getSessions();
  });

  $('#deleteSession').click(function(event) {
    $.ajax({
        url: `/session/${userId}`,
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        dataType: 'JSON',
            data: {
            userId: userId,
            _method: "DELETE"
          },
        })
        .done(function(data) {
            $('#myModal').modal('hide');
            $('.alert.alert-success > span').text('Success');
            userId = "";

        })
        .fail(function() {
            console.log("error");
        })
  });
});

Jquery on 'event' don't runs operations inside of it, but register operations that will be ran when 'event' occurs.

Bootstrap hide modal not working in Rails 6 using ajax

This might be a total hack but I was able to resolve this issue by setting jquery to the global object explicitly in application.js.

import jquery from 'jquery';
window.$ = window.jquery = jquery;

application.js:

require("@rails/ujs").start();
require("@rails/activestorage").start();
require("channels");
import jquery from 'jquery';
window.$ = window.jquery = jquery;

import "bootstrap";
import "../stylesheets/application";

environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'] 
  })
)

module.exports = environment

Bootstrap Modal Hide is not working at Laravel 7

You can try to replace
$("my-modal").modal("hide");
by
$("#my-modal").modal("toggle");

bootstrap 4 modal not closing after calling hide

At the end, the solution for this is quite simple.

As it is stated in the Bootstrap docs about .modal('show'), the call returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

In your case this means, that when you give the order to the modal to open up, it starts to open up, but right after that, the execution continues with your other code. So at the end of your operations, when you call the .modal('hide') method, the modal actually did not finished to load up completely. In order to get around this, you could watch for the shown.bs.modal event, when the modal has finished loading, and just then call .modal('hide').

Also, as you want to close the modal at various places, could be convenient to write up a function that handles the closing of the modal. Something like the one below.

function closeModal() {
    $('#progessDialog').on('shown.bs.modal', function(e) {
        $("#progessDialog").modal("hide");
    });
}

Here is your fiddle with the suggested modification: https://jsfiddle.net/dferenc/5wehfss9/

The modal screen remains black on showing AJAX response after modal hide

Just add data-dismiss to your [Upload File] button :

<button type="button" data-dismiss="modal" disabled class="btn btn-primary" id="btn-upload-selected-file">Upload File</button>

And then get rid of the redundant $('#mdl-upload-file').modal('hide'). It is bad practice. Instead you could prevent users from clicking [Upload File] before a file is selected by

$('#customFile').on('change',function(){
  if (this.files.length>0) $('#btn-upload-selected-file').removeAttr('disabled')
})

Have added the disabled attribute to [Upload File] as well.

Bootstrap modal hide is not working

You are using both modal toggling methods: via Javascript and via data attributes. So your click is firing the modal show as your data attributes set, and your Javascript does not affect this trigger.

Just remove the data attributes and go with the Javascript method:

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>

---

Related Topics