CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modal
ani_css
ani_css

Reputation: 2126

Ajax load with bootstrap modal

I have bootstrap modal please click to see demo and my modal has been opening automatically and closing automatically too and I need one more thing is ajax content and I guess it can be with load function I found some function but I couldn't apply it because I don't want to loaded clicking by link I have to loaded automatically after my modal open

I have two attribute data-open and data-close to open and close automatically my modal

$(function(){
  setTimeout(function(e){
    $('#AniPopup').modal('show');
  }, parseInt($('#AniPopup').attr('data-open')) * 1000);
  setTimeout(function(e){
    $('#AniPopup').modal('hide');
  }, parseInt($('#AniPopup').attr('data-close')) * 1000);
 
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true"  data-close="1000" data-open="2" data-src="https://www.youtube.com">
  <div class="modal-dialog">
    <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="memberModalLabel">Popup Header</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Kapat</button>
      </div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 1

Views: 12250

Answers (3)

Rawburner
Rawburner

Reputation: 1395

This is my solution I use in every project.

Root javascript so I can open modal on every page:

$('body').on('click', '[data-toggle="modal"]', function(e) {
    var url = $(this).data('href');
    var modalId = '#'+$(this).prop('href').split('#')[1];
    if (url.indexOf('#') === 0) {
    } else {
        $(modalId+' div.modal-content').html(
            $(modalId+' div.modal-dialog img#ajax-loader').clone().removeClass('hidden')
        );
        $.get(url, function(data) {
            $(modalId+' div.modal-content').html(data) ;
        });
    }
});

Then you need this HTML in your template, I include it in base template so it is available on every page:

<div class="modal fade" role="dialog" style="display: none" id="ajax-modals">
    <!-- Fix if datepicker is used in modal -->
    <style>
        .datepicker{z-index:1151 !important;}
    </style>
    <div class="modal-dialog">
        <img src="/img/select2-spinner.gif" id="ajax-loader" class="hidden" style="margin: 20px auto; display: block;"/>
        <div class="modal-content">
            <!-- comes from ajax -->

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

To trigger the modal you need links like this:

<a data-toggle="modal" href="#ajax-modals" data-href="/ajax-url" class="btn btn-default btn-xs" >Load Modal with AJAX content</a>

And at least, this is the content your AJAX-Controller should return:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        ×
    </button>
    <h4 class="modal-title">
        Modal title
    </h4>
</div>
<div class="modal-body">

    Modal body goes here

    <div class="form-actions">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            Close window
        </button>
    </div>
</div>
<script type="application/javascript">
    $('document').ready(function(){

        //you can do some javascript here

    });
</script>

Upvotes: 0

Abhinav
Abhinav

Reputation: 1200

you call call your ajax request into this code..

$(function(){
          setTimeout(function(e){
              $.ajax({
                  type: 'GET',
                  data: {},
                  url: [Server URL],
                  success: function(response){
                      // do anything with response you want
                      $('#AniPopup').modal('show');
                      hidePopUp(); // you have to initiate hidepopup to ensure you timeout is after ajax complete not before as ajax are async call.
                  }
              })
          }, parseInt($('#AniPopup').attr('data-open')) * 1000);

            function hidePopUp(){
              setTimeout(function(e){
                $('#AniPopup').modal('hide');
              }, parseInt($('#AniPopup').attr('data-close')) * 1000);
            }
        });

Upvotes: 1

REDEVI_
REDEVI_

Reputation: 684

Bootstrap provides you with these options

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...probably make an ajax call and get data 
})

$('#myModal').on('shown.bs.modal', function (e) {
  // do something...
})

http://getbootstrap.com/javascript/#modals

Upvotes: 2

Related Questions