Question posted in
You can find the official documentation here.

AJAX call not triggered on show.bs.modal – Jquery ajax

I have a button which is supposed to trigger a modal with a contact form. Part of the show.bs.modal function is an AJAX call to my DB to get some file details which are then meant to be shown in the modal-body.

The problem is that the modal does indeed open, but with no modal-body content, which means that the JavaScript code to trigger to the AJAX call is not working. I do not see any network activity in the browser debug menu, no call to the PHP file, and even an alert on top of the JS code telling me that that a button was pressed is not triggered. It seems like the whole JS code is circumvented, yet the modal still shows.

The same code works in another project, anyone has any idea as to why this is happening?

Button:

<div class="card-footer bg-light text-center">
    <button id="modal_btn" name="modal_btn" type="button" class="btn bg-teal-400" data-toggle="modal" data-target="#modal_contact_form" data-imgid="'.$row['image_id'].'" data-keyboard="true">
        <span class="icon-ico-mail4"></span>  Anfragen
    </button>
</div>

Modal:

<!-- Contact form modal -->
<div id="modal_contact_form" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-teal-300">
                <h3 class="modal-title">Kaufanfrage - Artikel #1234</h3>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">Abbrechen</button>
                <button type="submit" class="btn bg-teal-300">Nachricht Senden</button>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- /contact form modal -->

JavaScript:

<script type="text/javascript"> 

    // DISPLAY EDIT RECORD MODAL
    $('#modal_contact_form').on('show.bs.modal', function (event) {
            //var button = $(event.relatedTarget)   // Button that triggered the modal
            window.alert("button clicked.");
            var imgid = $(event.relatedTarget).data('imgid')    // Extract info from data-* attributes
            var modal = $(this);
            var dataString = 'action=contact&imgid=' + imgid;

            $.ajax({
                type: "POST",
                url: "./assets/ajax/ajax_action.php",
                data: dataString,
                cache: false,
                success: function (data) {
                    console.log(data);
                    modal.find('.modal-body').html(data);
                },
                error: function(err) {
                    console.log(err);
                }
            });  
    });
    
</script>
Tags:

2

Answers


  1. 0

    try this:

    $(document).on('show.bs.modal','#modal_contact_form', function (event) {
// TODO ....
});

    Or you can use the onclick button trigger instead of modal show trigger

    $("#modal_btn").click(function(event){
// TODO ...
});
    Login or Signup to reply.
  2. 0

    Try This

      const bsModal = document.querySelector('#exampleModal');    
    $(bsModal).on('shown.bs.modal', function() {
       // YOUR CODE HERE....
    })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search