I have created two modals using Bootstrap and those are opening using jQuery with Ajax requested data. The problem is these modals are working properly on Google Chrome, but not working on Firefox. How do I fix it?

My code is below:

$(document).on("click", "#file_popup", function() {
  $.ajax({
    url: "fileshare.php",
    method: "post",
    dataType: 'text',
    success: function(data) {
      $("#tbl_content").html(data);
      jQuery.noConflict();
      $("#pp_filedownload").modal('show');
    }
  });
});

<script src=".1.1/jquery.min.js"></script>
<div class="modal fade" id="pp_filedownload" role="dialog" hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <strong class="modal-title">File Download</strong>
      </div>
      <div class="modal-body" id='tbl_content'>
      </div>
    </div>
  </div>
</div>

I have created two modals using Bootstrap and those are opening using jQuery with Ajax requested data. The problem is these modals are working properly on Google Chrome, but not working on Firefox. How do I fix it?

My code is below:

$(document).on("click", "#file_popup", function() {
  $.ajax({
    url: "fileshare.php",
    method: "post",
    dataType: 'text',
    success: function(data) {
      $("#tbl_content").html(data);
      jQuery.noConflict();
      $("#pp_filedownload").modal('show');
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="pp_filedownload" role="dialog" hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <strong class="modal-title">File Download</strong>
      </div>
      <div class="modal-body" id='tbl_content'>
      </div>
    </div>
  </div>
</div>

• javascript
• jquery
• html
• ajax
• twitter-bootstrap

• 1 @Mr.x: Good edit overall, but FWIW it's jQuery, not jquery, and proper names like Google and Firefox are initially-capped, not all-lower-case. (If you seem to be getting unusual feedback on your edits, it's probably because of this post on MSO.) – T.J. Crowder Commented Jan 3, 2018 at 12:49
• 1 When posting your code as a snippet, please make sure that it actually works as a stand-alone snippet here. When I run the snippet, nothing appears, and judging by the JavaScript code, it also doesn’t make much sense to try. – poke Commented Jan 3, 2018 at 12:52
• Why "jQuery.noConflict();" in success callback? – Hanif Commented Jan 3, 2018 at 13:00

1 Answer 1

I tried a sample, it works fine in all browsers. Try with this, may be this will help u

//You can launch the modal with the code below this.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <input type="submit" id="submitButton"/>

 <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>