Wednesday, July 10, 2013

An advanced AJAX example




This example is to use AJAX to transfer data from MySQL to JavaScript and display.
First we create an input button:
  <input type="button" onclick="getEventData();" name="get_enroll_data" id="get_enroll_data" value="Get hint of the modules in which this event may use"  />
which called JavaScript function getEventData(). This function is to fetch data from MySQL database and display using AJAX.

1) We create an AJAX event
var enrollData_Ajax = new Ajax();
If AJAX success, function  selectModule is called
Event.attachListener(enrollData_Ajax, 'ajaxSuccess', selectModules);
If AJAX failed, showError function is called
Event.attachListener(enrollData_Ajax, 'ajaxFailure', showError);

2) Main function getEventData(), using AJAX called another function xml_user_event_data.php to fetch xml data from database
function getEventData(){
     jQuery.noConflict();
   enrollData_Ajax.request('/_lib/xml_user_event_data.php?event_name='+document.getElementById('event_name').value);
}


3) xml_user_event_data.php is to fetch data from MySQL and output in XML format as follows
 <?php 
require_once($_SERVER['DOCUMENT_ROOT'].'/_includes/cesei_globals.inc.php');
   header('Expires: 0');
   header('Pragma: no-cache');
   header('Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0');
   validate_cesei_access(STATUS_INSTRUCTOR);
   header('Content-Type: application/xml');
   echo('<?xml version="1.0" encoding="UTF-8"?>');

$event_name = addslashes(trim($_GET['event_name']));
if($event_name)
   $sql = "SELECT module_id AS ed FROM cesei_activity_mod  WHERE event_id in (SELECT event_id FROM cesei_activity_new WHERE  event_name='$event_name')";
$result = mysql_query($sql,$db);
echo('<e_data>');
echo('<enrollment>0</enrollment>'); //make sure its always an array
while($row = mysql_fetch_assoc($result)){
   echo('<enrollment>'.$row['ed'].'</enrollment>');
}
echo('</e_data>');
?>

4)  selectModule:  using XMLObject.toJS(enrollData_Ajax.getXML()).e_data to process XML data in JS when ajax is successfully:
function selectModules(thisAjaxObject){
   if(this == thisAjaxObject){
       userData = new Object();
      userData = XMLObject.toJS(enrollData_Ajax.getXML()).e_data;
      if(userData){
         if(userData.enrollment){
            var m_out = document.getElementById('modules-out');
            var m_in = document.getElementById('modules');
            for (j=0;j<m_in.options.length;j++){
               var s_me = true;
               var current = m_in.options[j];
               for(var i=0; i<userData.enrollment.length; i++){
                  var module_id = parseInt(userData.enrollment[i]._text);
                  if(current.value == module_id){
                     s_me = false;
                     break;
                  }
               }
               current.selected = s_me;
            }
            transfer_select(m_in,m_out);
           
            for(var i=0; i<userData.enrollment.length; i++){
               var module_id = parseInt(userData.enrollment[i]._text);
               if(module_id > 0){
                  for (j=0;j<m_out.options.length;j++){
                     var current = m_out.options[j];
                     if(current.value == module_id){
                        current.selected = true;
                     }
                  }
               }
            }
            transfer_select(m_out,m_in);
         }else{
            showError(thisAjaxObject);
         }
      }else{
         showError(thisAjaxObject);
      }
   }
}


5) Finally the error function
function showError(thisAjaxObject){
   if(this == thisAjaxObject){
      dim_pop_div(300,200);
      window.pop_html = "<strong class='error'>No enrollment data found for this user.</strong>";
      doWrite_pop_div();
      show_pop_div(true);
   }
}

1 comment: