Question posted in
You can find the official documentation here.

Why modal calling from ajax response is not closing? – Jquery ajax

I am working for a small project.In this project I have a modal which is called with ajax response after clicking.But the modal is not closing.Any ideas about how I can sove this bugs.Thanks in advance.

My demo code:

<button class="open-modal">Open modal</button>
<div
  class="modal fade reactor_modal "
  id="modal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="modalTitle"
  aria-hidden="true"
>
</div>

JS code

$('.open-modal').click(function(post_id) {
  var $modal = $('.modal');
  $.ajax({
    url: 'get_react_user.php',
    type: get,
    cache: false,
    success: function(data) {
      console.log(data);
      $($modal).modal("show");
      $($modal).html(data)
      console.log($modal);
    }
  })
})
$(document).on('click','.close-modal',function()
$('.modal').modal('hide')
})

PHP code

<div class="modal-dialog modal-dialog-scrollable" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="modalTitle">Reactions</h5>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
      <h1>Working</h1>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary close-modal" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Try adding class="btn btn-default" to the close button.
    Also try looking at this URL example, hope that It will help.

    https://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-close-bootstrap-modal

    <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>
    Login or Signup to reply.
  2. 0

    Maybe something like this [ demo jsfiddle : https://jsfiddle.net/8u19pgrn/ ]

    you need to replace url https://picsum.photos/480/320 with your src

    $('.open-modal').click(function(post_id) {

  var $modal=  $('.modal');
  $.ajax({
    url: 'https://picsum.photos/480/320',
  type:'get',
  dataType: 'HTML',
    cache: false, 
    beforeSend:function(){
        $('.modal-body').html('<h3>Please wait... Loading...</h3>')
    },
    success:function(data){    
            // set your respone in your modal-body
       let response = '<h1>this is just response temporary</h1>'
       // $('.modal-body').html(data) // uncomment to set your response & comment next code
       $('.modal-body').html(response)  // comment     
    }
  })  
})
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<!-- Button trigger modal -->
<button type="button" class="btn btn-primary open-modal" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search