title: Saving dates from DatePicker in cookies and sending date to Datatable
body: <p>As my dev is not available I'm trying to progress with my little JQuery knowledge in my project but I'm facing a blocker. I'm trying to create a cookie that will save the date range selected by the user in datepicker and make the report available in datatable when the user refreshes or return to the page.</p>
  
  <p>All I succeeded to do now is create/refresh the cookie when the dates are selected and make the date range selected back on datepicker when the user returns, but the report is not refreshed for those dates as the Ajax request is not sent to datatable. </p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>$('#demo').daterangepicker({
      "timePicker24Hour": true,
      "autoApply": true,
      ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      "alwaysShowCalendars": true,
      "startDate": Cookies.get('startdate'),
      "endDate": Cookies.get('enddate'),
      "opens": "left",
      }, function(start, end, label) {
          $("#datereturn").text(start.format('MMMM D, YYYY') + ' to ' + end.format('MMMM D, YYYY'));
          var todaydate = start.format('YYYY-MM-DD')+"to"+end.format('YYYY-MM-DD');
          Cookies.set('startdate', start.format('MM/DD/YYYY'));
          Cookies.set('enddate', end.format('MM/DD/YYYY'));
          $.ajax({
              url:"campaign-table.php",
              method:"POST",
              data:{todaydate:todaydate},
              success:function(data){
                  $('#campaigntable').html(data);
              }
          });
  });
  </code></pre>
  
  <p>I need the Ajax request at the end of the code to be executed at page load. I tried the code below but it doesn't seem to work. Shorty, it creates cookies at page load if not existing else it will send the Ajax request to datatable with the dates from the cookies to show the report:</p>
  
  <pre><code>$(function(){
      var d = new Date();
      var month = d.getMonth()+1;
      var day = d.getDate();
  
      var output = 
          ((''+month).length&lt;2 ? '0' : '') + month + '/' +
          ((''+day).length&lt;2 ? '0' : '') + day  + '/'
          + d.getFullYear() ;
  
      if (Cookies.get('startdate')  == null || Cookies.get('enddate') == null) {
            Cookies.set('startdate', output);
            Cookies.set('enddate', output);
      }
  
      if (Cookies.get('startdate') &amp;&amp; Cookies.get('enddate')) {
          var todaydate = Cookies.get('startdate')+"to"+Cookies.get('enddate');
          $.ajax({
              url:"campaign-table.php",
              method:"POST",
              data:{todaydate:todaydate},
              success:function(data){
                  $('#campaigntable').html(data);
              }
          });
      }
  });
  </code></pre>
  
  <p>EDIT: I think that I'm not making the changes at the appropriate place. I have this code that is exactly where the campaign-table.php should load.</p>
  
  <pre><code>$(document).ready(function(){
      var todaydate = (new Date()).toISOString().split('T')[0]+"to"+(new Date()).toISOString().split('T')[0];
      $.ajax({
          url:"campaign-table.php",
          method:"POST",
          data:{todaydate:todaydate},
          success:function(data){
              $('#campaigntable').html(data);
          }
      });
  });
  
  $('li.dropdown.mega-dropdown').on('click', function (event) {
      $(this).parent().toggleClass('open');
  });
  
  $('body').on('click', function (e) {
      if (!$('li.dropdown.mega-dropdown').is(e.target) 
          &amp;&amp; $('li.dropdown.mega-dropdown').has(e.target).length === 0 
          &amp;&amp; $('.open').has(e.target).length === 0) {
          $('li.dropdown.mega-dropdown').removeClass('open');
      }
  });
  </code></pre>