AJAX
[ class tree: AJAX ] [ index: AJAX ] [ all elements ]

Source for file index.php

Documentation is available at index.php

  1. <?php
  2. /**
  3.  * Almost real life example, show a list reviews, letting you add one, and then updating the list
  4.  *
  5.  * @category   HTML
  6.  * @package    AJAX
  7.  * @author     Joshua Eichorn <josh@bluga.net>
  8.  * @copyright  2005 Joshua Eichorn
  9.  * @license    http://www.opensource.org/licenses/lgpl-license.php  LGPL
  10.  * @version    Release: @package_version@
  11.  * @link       http://pear.php.net/package/HTML_AJAX
  12.  */
  13.  
  14. // include the helper class
  15. require_once 'HTML/AJAX/Helper.php';
  16.  
  17. // create an instance and set the server url
  18. $ajaxHelper = new HTML_AJAX_Helper();
  19. $ajaxHelper->serverUrl = 'auto_server.php';
  20. $ajaxHelper->jsLibraries['JSON'// not included in the default list before 0.2.6
  21.  
  22. ?>
  23. <html>
  24. <head>
  25.  
  26. <?php
  27.     // output a javascript neded to setup HTML_AJAX
  28. // by default this is all the libraries shipped with HTML_AJAX, take a look at $ajaxHelper->jsLibraries to edit the list
  29.     
  30.     echo $ajaxHelper->setupAJAX();
  31.  
  32.     // ajax helper should do this for you but it doesn't yet
  33. ?>
  34. <script type="text/javascript" src="auto_server.php?stub=review"></script>
  35.  
  36. <script type="text/javascript">
  37. var reviewCallback = {
  38.     // after a review we get a chunk of html that we can update the reviewList with
  39.     newReview: function(result) {
  40.         document.getElementById('reviewList').innerHTML += result;
  41.     },
  42.     // after a review is updated we get a chunk of html, replace a node from our lookup list with that
  43.     updateReview: function(result) {
  44.         var newdiv = document.createElement('div');
  45.         newdiv.innerHTML = result[1];
  46.         document.getElementById('reviewList').replaceChild(newdiv.firstChild,reviewCallback.nodeList[result[0]]);
  47.     },
  48.     nodeList: []
  49. }
  50. function sendReview(form) {
  51.     var remoteReview = new Review(reviewCallback);
  52.     var payload = new Object();
  53.     for(var i = 0; i < form.elements.length; i++) {
  54.         if (form.elements[i].name) {
  55.             payload[form.elements[i].name] = form.elements[i].value;
  56.         }
  57.     }
  58.  
  59.     // do any needed validation here
  60.  
  61.     remoteReview.newReview(payload);
  62. }
  63.  
  64. function updateReview(id,form) {
  65.     var remoteReview = new Review(reviewCallback);
  66.     var payload = new Object();
  67.     for(var i = 0; i < form.elements.length; i++) {
  68.         if (form.elements[i].name) {
  69.             payload[form.elements[i].name] = form.elements[i].value;
  70.         }
  71.     }
  72.  
  73.     // do any needed validation here
  74.  
  75.     remoteReview.updateReview(id,payload);
  76. }
  77.  
  78.  
  79. function editReview(id,node) {
  80.     var form = document.getElementById('reviewForm').cloneNode(true);
  81.     form.onsubmit = function() { updateReview(id,this); return false; }
  82.  
  83.     var data = new Object();
  84.     var divs = node.getElementsByTagName('div');
  85.     for(var i = 0; i < divs.length; i++) {
  86.         if (divs[i].className) {
  87.             data[divs[i].className] = divs[i].innerHTML;
  88.         }
  89.     }
  90.  
  91.     for(var i = 0; i < form.elements.length; i++) {
  92.         if (form.elements[i].name) {
  93.             form.elements[i].value = data[form.elements[i].name];
  94.         }
  95.     }
  96.  
  97.     document.getElementById('reviewList').replaceChild(form,node);
  98.     reviewCallback.nodeList[id] = form;
  99. }
  100. </script>
  101.  
  102. <style type="text/css">
  103. .name {
  104.     margin-top: 5px;
  105.     background-color: #ddd;
  106. }
  107. #reviewList {
  108.     width: 300px;
  109. }
  110. </style>
  111.  
  112. </head>
  113. <body>
  114.  
  115. <h2>Add a new Review</h2>
  116. <form id="reviewForm" onsubmit="sendReview(this); return false;" style="border: dotted 1px black">
  117.  
  118. Your Name: <input name="name"><br>
  119. Your Review: <textarea name="review"></textarea><br>
  120. <input type="submit">
  121. </form>
  122.  
  123. <div id="reviewList">
  124. <?php
  125.     if (isset($_SESSION['reviews'])) {
  126.         foreach($_SESSION['reviews'as $key => $review{
  127.             echo "<div onclick='editReview($key,this)'><div class='name'>$review->name</div><div class='review'>$review->review</div></div>\n";
  128.         }
  129.     }
  130. ?>
  131. </div>
  132. </body>
  133. </html>
  134. <?php 
  135. /* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */
  136. ?>

Documentation generated on Sat, 05 May 2007 18:00:15 -0400 by phpDocumentor 1.3.0. PEAR Logo Copyright © PHP Group 2004.