Question

I am making a web page which will allow users to input and view data for different dates, and to change the date, there are two buttons, one of which will display the previous day, and one which will show the next day. I know that I can do this by submitting forms and reloading the page every time they press one of these buttons, but I would rather use javascript and not have to submit a form, but I am having troubles getting it to work. Currently, I have the two buttons, and the date stored in a PHP variable, as shown in my code below:

<script>
function init() {
    <? $nutrDate = $this->parseDate(date('m/d/Y')); ?>
}
function nutrPrevDay() {    
    <? $nutrDate = mktime(0, 0, 0, date('m',$nutrDate), date('d',$nutrDate)-1, date('Y',$nutrDate)); ?>
    alert("<? echo(date("m/d/y", $nutrDate)) ?>");
}
function nutrNextDay() {
    <? $nutrDate = mktime(0, 0, 0, date('m',$nutrDate), date('d',$nutrDate)+1, date('Y',$nutrDate)); ?>
}
window.onload = init;
</script>

<p style="text-align:center; font-size:14px; color:#03F">
  <button onclick="nutrPrevDay()" style="width:200px" >< Show Previous Day</button>                 
  <? echo(date('m/d/Y', $nutrDate)) ?>          
  <button onclick="nutrNextDay()" style="width:200px">Show Next Day ></button>  
</p>

I have the alert in the nutrPrevDay() only as debugging. What happens is when I click on the button, the alert shows that the day is correctly decreased (for example from May 17 to May 16), but only decreases one day, and not one day for every click. Also, I do not know how to make the text on the page (created by the line ) change to display the new date after a button is clicked.

So here are my questions:
1) Is it possible to dynamically change data (such as text, and in the future, SQL queries) on a page using javascript without having to reload a page when clicking on a button?
2) If possible, how can I make those changes?
3) How can I fix this so that it will increment and decrement through dates every time a button is clicked?

Answer 1

Q1:

Yes, it is possible, AJAX is probably what you’re looking for.

Q2:

Well, first of all you have to learn that JavaScript works at client side while PHP works at server side. With that in mind, you can’t expect that php scripts are executed when you click a button just because you wrote them inside javascript functions.

The most you can do is print something from a PHP script into a JavaScript script. And your script fails in that, except for the alert part. Example:

<script>
function javascriptFunction(){
  // This php script, will be executed when you call your page, however $nutrDate is an assigned php variable, javascript will never know about it;
  <?php $foo = 'bar'; ?>
  // This will give you a javascript error because $foo is a string
  var foo = <?php echo $foo; ?>;
  // This is the code which will do the expected, notice the quotes.
  var foo = '<?php echo $foo; ?>';

  // If you have a single quote inside $foo, it will break javascript
  <?php $foo = "ba'r";
  var foo = '<?php echo $foo; ?>';
}
</script>

Q3:

The idea is to make an AJAX request every time your buttons click event is triggered… This is the same as saying, when you click a button, you call a javascript function which will make a request to some other page and get something from it if the request is successful. Here the example:

<script>
var current = <? echo time(); ?>;
function requestSomething(action){
    if (window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();
    }
    else {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
      // readyState info: http://www.devguru.com/technologies/xmldom/quickref/httpRequest_readyState.html
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // this is where we tell where the result will appear
        document.getElementById("current").innerHTML=xmlhttp.responseText;
        current = xmlhttp.responseText;
      }
    }

    xmlhttp.open("GET","somescript.php?action="+action+'&curday='+current,true);
    xmlhttp.send();
}
</script>

<p style="text-align:center; font-size:14px; color:#03F">
  <button onclick="requestSomething('decrease')" style="width:200px" >< Show Previous Day</button>
  <!-- this is where the result will appear -->
  <span id="current"></span>
  <button onclick="requestSomething('increase')" style="width:200px">Show Next Day ></button>
</p>

Now, at your somescript.php file,

<?php 
  if(isset($_GET['action'])){
    if($_GET['action'] == 'increase'){
      // your increasing day logic here
    } elseif ($_GET['action'] == 'decrease'){
      // decreasing logic here
    } else {
      // whatever...
    }
  }
  ?>

Note: This is almost written from scratch and with some copy/past from here and there, and didn’t check if the code actually works… It is just a guideline…

Hope it helps.