Bootstrap Datepicker is not working properly

Question

I have implemented bootstrap daterangepicker in my script, It is working fine at first time. If I click the link again (in which I have implemented the daterangepicker and loads the page content using AJAX call), the bootstrap daterangepicker is not working.

I am loading a page body content using ajax. I have included the daterange picker scripts and include files in a page body content.

I have implemented the daterangepicker inside a JQuery ready() function.

This is my code, which I have implemented.

HTML code:

     <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
           <i class="icon-calendar icon-large"></i>
           <span></span> <b class="caret" style="margin-top: 8px"></b>
      </div>

JS Code:

 $(document).ready(function() {

       $('#reportrange').daterangepicker({
                    ranges: {
                       'Today': [new Date(), new Date()],
                       'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                       'Last 7 Days': [moment().subtract('days', 6), new Date()],
                       'Last 30 Days': [moment().subtract('days', 29), new Date()],
                       'This Month': [moment().startOf('month'), moment().endOf('month')],
                       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },                        
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    startDate: moment().subtract('days', 6),

                 },
                 function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    start = start.format('MMMM D, YYYY');
                    end = end.format('MMMM D, YYYY');
                    test(start,end);

                 }
              );
      $('#reportrange span').html(moment().subtract('days', 6).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));                  

});

Please help me to solve my problem.

Answer 1

jQuery's document ready function fires as soon as the DOM content for the page loads - this happens usually just before rendering but almost always before any AJAX calls to the server can load any of your content, including your reportrange div. This means that once your ajax call with the reportrange html loads, you would need to fire that $('#reportrange').daterangepicker({ stuff again.

Luckily, jQuery knows we sometimes need to do this, so the question is where you want to put it.

If you load your reportrange div in an explicit way, something like

$(".rangeArea").load("reportRange");

then jQuery gives you the option of a callback:

$(".rangeArea").load("reportRange", function() {
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

If you load your ajax area in some other way, you may want to wire your picker code up through the global ajax complete handler - this fires after every ajax call, so do be careful if you have a lot of back & forth communication:

$.ajaxComplete(function(){
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

Another thing that might bail you out is that you are calling your <div id=reportrange> which means there can only be one of them on the page - remember that id attributes must be unique on a page, even if content is loaded later. If you might ever have a second reportrange on the same page, you will probably want to switch from IDs to class names: <div class=reportrange> and $(".reportrange") .

Final thing - jQuery(document).ready(function(){...}) can be written more succinctly like $(function(){...})