0

I am trying to load a url via ajax in bootstrap modal when modal is focused but it's not working.

Modal Code

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" id="loadMediaFiles" data-target="#myMediaModal">Launch demo modal</button>
<div class="modal fade" id="myMediaModal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
       <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Media</h4>
       </div>
       <div class="modal-body" id="mediaFilesResult">
          <div class="text-center">
              <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
         </div>
       </div>
       <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
  </div>

Javascript

$('#loadMediaFiles').focus(function () {
    $.ajax({
        url: '/Uploads/Browse',
        contentType: 'application/html; charset=utf-8',
        type: 'GET',
        dataType: 'html'
    })
    .success(function (result) {
        $('#mediaFilesResult').html(result);
    })
});

what am I doing wrong, I need help. Thanks

aadi1295
  • 982
  • 3
  • 19
  • 47
  • Have you seen this anwser? https://stackoverflow.com/questions/35758658/bootstrap-modal-focus-not-working – Jose Diego Diaz Cardenas Jul 14 '17 at 21:59
  • First thing I notice is you are replacing all HTML inside of `#mediaFilesResult` element with whatever result you are returning. Is this your intention? Also, add `console.log(result)` in your success function to see if you are even getting data returned. – Aaron Eveleth Jul 14 '17 at 22:02

0 Answers0