Josh Schumacher: A PHP Developer » Ajax http://blog.joshschumacher.com The biggest and the best in the Northwest Thu, 29 Oct 2009 21:54:30 +0000 en hourly 1 http://wordpress.org/?v=3.0 Playing well together: Prototype JS and PHP http://blog.joshschumacher.com/2007/03/02/playing-well-together-prototype-js-and-php/ http://blog.joshschumacher.com/2007/03/02/playing-well-together-prototype-js-and-php/#comments Sat, 03 Mar 2007 06:30:56 +0000 Josh Schumacher http://blog.joshschumacher.com/2007/03/02/playing-well-together-prototype-js-and-php/ I've decided that manipulating dates client side is a mess. I've been working on a multi-user php calendar for the past few months. One of the features I'm most proud of is an availability chart similar to a feature outlook has so you can schedule a meeting with multiple people and see when everyone is free and busy.

Availability ViewSince I'm using Prototype for my javascript library already, I took advantage of the Prototype Window Class to make modal and dialog windows. One of the downsides to this is it adds another step of complexity to ensuring everything is properly synchronized. For example, my scheduler window has to maintain in sync with it's parent window if dates where changed at that level.

To start off, I create actions for nextDay() and prevDay(). These are simply fired onclick() on buttons with corresponding labels.

PLAIN TEXT
JavaScript:
  1. function nextDay()
  2. {
  3. updateAvailabilityChart('next');
  4. }

Next we'll define the updateAvailabilityChart() function. The arrayInviteUsers holds an array of user ids (this is out of the scope of this article).

PLAIN TEXT
JavaScript:
  1. // param change = none, next or prev
  2. function updateAvailabilityChart(change)
  3. {
  4. var startString = window.parent.getStartDate();
  5. var endString = window.parent.getEndDate();
  6.  
  7. $('availabilityChart').innerHTML = 'Loading...';
  8. var counter = 0;
  9. var params = '';
  10. arrayInviteUsers.each( function(user) {
  11. counter++;
  12. params += 'userid'+counter+'='+user+'&'
  13. });
  14. params += 'startString='+startString+'&';
  15. params += 'endString='+endString+'&';
  16. params += 'change='+change;
  17.  
  18. var url = 'get_availability.php';
  19. var myAjax = new Ajax.Request( url, { method: 'get', parameters: params, onSuccess: loadedAvail });
  20. $('q').value = '';
  21. }

The above code will make an Ajax request to get_availability.php which will increment, decrement or keep the start and end dates the same and then return some cool response text starting with the new start date, new end date and html for the availability table. I defined a delimiter of '^^;;^^' just so I can tell where data starts and stops. Below is the basic code in get_availability.php.

PLAIN TEXT
PHP:
  1. $strStartTime = isset($_REQUEST['startString']) ? strtotime($_REQUEST['startString']) : time();
  2. $strEndTime = isset($_REQUEST['endString']) ? strtotime($_REQUEST['endString']) : time();
  3.  
  4. if(!is_numeric($strStartTime)) {
  5. $strStartTime = time();
  6. }
  7.  
  8. if(!is_numeric($strEndTime)) {
  9. $strEndTime = $strStartTime;
  10. }
  11.  
  12. if($strStartTime> $strEndTime) {
  13. $strEndTime = $strStartTime;
  14. }
  15.  
  16. $change = isset($_REQUEST['change']) ? $_REQUEST['change'] : 'none';
  17. switch ($change) {
  18. case 'prev':
  19. $strTime = mktime(0,0,0,date('m',$strStartTime),date('d',$strStartTime)-1,date('Y',$strStartTime));
  20. break;
  21. case 'next':
  22. $strTime = mktime(0,0,0,date('m',$strStartTime),date('d',$strStartTime)+1,date('Y',$strStartTime));
  23. break;
  24. default:
  25. $strTime = $strStartTime;
  26. break;
  27. }
  28. $strTimeEnd = $strTime + ($strEndTime - $strStartTime);
  29.  
  30. print date('m\/d\/Y',$strTime);
  31. print "^^;;^^";
  32. print date('m\/d\/Y',$strTimeEnd);
  33. print "^^;;^^";
  34.  
  35. $display = new Display();
  36. $display->drawDayAvailibility($usersArray, $strTime);

Finally, the Ajax request defined a function to be called when the request return successfully. This function will update the innerHTML of a div on the page and tell the parent window what the new start date and end date is.

PLAIN TEXT
JavaScript:
  1. function loadedAvail(transport)
  2. {
  3. var entityParts = transport.responseText.split('^^;;^^');
  4. var newStart    = entityParts[0];
  5. var newEnd      = entityParts[1];
  6. var html       = entityParts[2];
  7. $('availabilityChart').innerHTML = html;
  8. window.parent.setStartDate(newStart);
  9. window.parent.setEndDate(newEnd);
  10. }

This is a very small piece of a very large project but it's fun to share with others. If you have questions or could benefit from some more of the details going into this basic process, let me know and I can post more.

]]> http://blog.joshschumacher.com/2007/03/02/playing-well-together-prototype-js-and-php/feed/ 3