title: Previous and next date using jquery (ajax) and php
body: <p>I have some kind of calendar written in php with previous and next buttons. Now I want to use some ajax to go to the previous or next date without refreshing the page. </p>
  
  <p>In the php file called by ajax I have a query which returns the tasks for a selected day (something like : <code>...WHERE date = $date</code>).</p>
  
  <p>The problem is that I can't get to the day before today and so on, and to the day after today and so on. </p>
  
  <p>Someone who can help?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Buttons:</p>
  
  <pre><code>&lt;button class='btn btn-default previous' data-date='$date'&gt;
    &lt;span class='glyphicon glyphicon-arrow-left' aria-hidden='true'&gt;&lt;/span&gt;   
  &lt;/button&gt;
  &lt;button class='btn btn-default next' data-date='$date'&gt;
    &lt;span class='glyphicon glyphicon-arrow-right' aria-hidden='true'&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$(document).ready(function() {
      $('button.previous').click(function() {
          var date = $(this).data('date');
          $.ajax({
              type: "POST",
              data: { action : "previous" , date: date },
              url: "includes/ajax/plannerdata.php",               
              success: function(returnData){                    
                  $("#planner-data").html(returnData);
              }
          });
      });
      $('button.next').click(function() {
      var date = $(this).data('date');
          $.ajax({
              type: "POST",
              data: { action: 'next', date: date },
              url: "includes/ajax/plannerdata.php",               
              success: function(returnData){                    
                  $("#planner-data").html(returnData); 
              }
          });
      });
  });
  </code></pre>
  
  <p>plannerdata.php:</p>
  
  <pre><code>switch ($_POST['action']) {
      case 'next':
          $date = strftime('%Y-%m-%d', strtotime($_POST['date'] .' -1 day'));
          break;
      case 'previous':
          $date = strftime('%Y-%m-%d', strtotime($_POST['date'] .' +1 day'));
          break;
  }
  </code></pre>
  
  <p>And then I use $date in my query.</p>
  
  <p><strong>UPDATED plannerdata.php:</strong></p>
  
  <pre><code>if (!isset ($_POST['date'])) { // At first page load or refresh (without using the previous/next buttons), plannerdata.php is also loaded bij ajax and injected in index.php
      $currentDatetime = new DateTime('NOW');
  }
  else { // Previous or next button is pressed
      $currentDatetime = new DateTime($_POST['date']);
  }
  
      $dateModification = $_POST['action'];
  
      switch ($dateModification) {
          case 'previous':
              $currentDatetime-&gt;modify('-1 day');
              break;
          case 'next':
              $currentDatetime-&gt;modify('+1 day');
              break;
      }
      $date = $currentDatetime-&gt;format('Y-m-d');
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>plannerdata.php;</strong></p>
  
  <pre><code>if (!isset ($_SESSION['date'])) {
      $_SESSION['date'] = new DateTime('NOW');
  }
  
  if (isset ($_POST['action'])) {
      switch ($_POST['action']) {
          case 'previous':
              $_SESSION['date']-&gt;modify('-1 day');
              break;
          case 'next':
              $_SESSION['date']-&gt;modify('+1 day');
              break;
      }
  }
  
  $date = $_SESSION['date']-&gt;format('Y-m-d');
  </code></pre>
  
  <p><strong>buttons (inside index.php). I removed the data-date attribute:</strong> </p>
  
  <pre><code>&lt;button class='btn btn-default previous'&gt;&lt;span class='glyphicon glyphicon-arrow-left' aria-hidden='true'&gt;&lt;/span&gt;&lt;/button&gt;
  &lt;button class='btn btn-default next'&gt;&lt;span class='glyphicon glyphicon-arrow-right' aria-hidden='true'&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>The buttons are inside an  and between both buttons the selected date is shown.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;button previous&lt;/li&gt;
      &lt;li&gt;&lt;span id="planner_date"&gt;selected date&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;button next&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p><strong>I also changed the Jquery. I make a simultaneous ajax call.</strong> </p>
  
  <pre><code>$(document).ready(function() {
      $('button.previous').click(function() {
          $.when(
                  $.post("includes/ajax/plannerdata.php", {action: 'previous'}, function(data) {
                      plannerData = data;
                  }),
                  $.post("includes/ajax/date.php", {action: 'previous'}, function(date) {
                      calendardate = date;
                  })
          ).then(function() {
              $("#planner-data").html(plannerData);
              $("#planner_date").text(calendardate);
          });
      });
      $('button.next').click(function() {
          $.when(
                  $.post("includes/ajax/plannerdata.php", {action: 'next'}, function(data) {
                      plannerData = data;
                  }),
                  $.post("includes/ajax/date.php", {action: 'next'}, function(date) {
                      calendardate = date;
                  })
          ).then(function() {
              $("#planner-data").html(plannerData);
              $("#planner_date").text(calendardate);
          });
      });
  });
  </code></pre>
  
  <p><strong>Date.php for returning the current date:</strong></p>
  
  <pre><code>if (!isset ($_SESSION['current_date'])) {
      $_SESSION['current_date'] = new DateTime('NOW');
  }
  
  if (isset ($_POST['action'])) {
      switch ($_POST['action']) {
          case 'previous':
              $_SESSION['current_date']-&gt;modify('-1 day');
              break;
          case 'next':
              $_SESSION['current_date']-&gt;modify('+1 day');
              break;
      }
  }
  
  $date = $_SESSION['current_date']-&gt;format('Y-m-d');
  echo $date;
  </code></pre>
  
  <p><strong>EDIT 2015-03-05:</strong></p>
  
  <p><strong>Jquery:</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('button.previous').click(function() {
          $.when(
              $.post("includes/ajax/date.php", 
                  {action: 'previous'}, 
                  function(date) {
                     dates = jQuery.parseJSON(date);
                     calendardate = dates.dutch;
  
                      $.post("includes/ajax/plannerdata.php", 
                          {date: dates.sql},
                          function(data) {
                              plannerData = data;
                          })
                      })
                      ).then(function(){
                  $("#planner_date").text(calendardate);
                  $("#planner-data").html(plannerData);
              });
          });
  });
  </code></pre>
  
  <p><strong>date.php</strong></p>
  
  <pre><code>if (!isset ($_SESSION['current_date'])) {
      $_SESSION['current_date'] = new DateTime('NOW');
  }
  if (isset ($_POST['action'])) {
      switch ($_POST['action']) {
          case 'previous':
              $_SESSION['current_date']-&gt;modify('-1 day');
              break;
          case 'next':
              $_SESSION['current_date']-&gt;modify('+1 day');
              break;
      }
  }
  $date_1 = $_SESSION['current_date']-&gt;format('Y-m-d');
  $date_2 = $_SESSION['current_date']-&gt;format('d-m-Y');
  $response = array('sql' =&gt; $date_1, 'dutch' =&gt; $date_2);
  echo json_encode($response);
  </code></pre>
  
  <p><strong>UPDATE 2015-03-08</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('button.previous').click(function() {
          var calendardate;
          var plannerData;
          $.when(
              $.post("includes/ajax/date.php", 
                  {action: 'previous'}, 
                  function(date) {
                     dates = jQuery.parseJSON(date)
                     calendardate = dates.dutch;
  
                      $.post("includes/ajax/plannerdata.php", 
                              {date: dates.sql},
                              function(data) {
                                 plannerData = data;
                              })}
                          )).then(function(){
                  $("#planner_date").text(calendardate)
                  $("#planner-data").html(plannerData);
              });
          });
  });
  </code></pre>