phpeveryday.com

The best tutorial of php, php framework, php strategies, object oriented oriented,


AJAX - Grid: Creating JavaScript for Client Side

Tag: ajax, grid, javascript   Category: PHP Application
post: 27 Mar 2008 read: 593


AJAX Grid Step By Step Tutorial 5: Ok, may be, it is a part that you wait for. It is heart of our application. This is javascript for ajax grid. Save as "grid.js" within www/test/ajax/books.

var xmlHttp = createXmlHttpRequestObject();
var xsltFileUrl = "grid.xsl";
var feedGridUrl = "books.php";

var gridDivId 	= "gridDiv"; 
var statusDivId	= "statusDiv";

var tempRow;

var stylesheetDoc;

function init()
{

  if(window.XMLHttpRequest && window.XSLTProcessor && window.DOMParser)
  {
	loadStylesheet();
	loadGridPage(1);
	return;
  }
  
  if(window.ActiveXObject && createMsxml2DOMDocumentObject())
  {
	loadStylesheet();
	loadGridPage(1);
	return;
  }
  
  alert("Your browser doesn't support the necessary functionality.");
}


function createMsxml2DOMDocumentObject()
{
  var msxml2DOM;
  var msxml2DOMDocumentVersions = new Array("Msxml2.DOMDocument.6.0","Msxml2.DOMDocument.5.0","Msxml2.DOMDocument.4.0");
  for (var i=0; i< msxml2DOMDocumentVersions.length && !msxml2DOM; i++)
  {
    try
	{
	  msxml2DOM = new ActiveXObject(msxml2DOMDocumentVersions[i]);	
	}
	catch (e) {}
  }
  
  if(!msxml2DOM)
    alert("Please upgrade your MSXML version from \n" + "http://msdn.microsoft.com/XML/XMLDownloads/default.aspx");
  else
	return msxml2DOM;
}

function createXmlHttpRequestObject()
{

  var xmlHttp;
  try
  {
	xmlHttp = new XMLHttpRequest();  
  }
  catch(e)
  {
	var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
									"MSXML2.XMLHTTP.5.0",
									"MSXML2.XMLHTTP.4.0",
									"MSXML2.XMLHTTP.3.0",
									"MSXML2.XMLHTTP",
									"Microsoft.XMLHTTP");    
	for(var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
	{
		
	  try
	  {
		xmlHttp = new ActiveXObject(XmlHttpVersions[i]);	  
	  }
	  catch (e) {}		  
	}
  }
  
  if(!xmlHttp)
    alert("Error creating the XMLHttpRequest Object.");
  else
    return xmlHttp;
}

function loadStylesheet()
{

  xmlHttp.open("GET", xsltFileUrl, false);	
  xmlHttp.send(null);

  if(this.DOMParser)
  {
	var dp = new DOMParser();
	stylesheetDoc = dp.parseFromString(xmlHttp.responseText, "text/xml");
  }
  else if(window.ActiveXObject)
  {
	stylesheetDoc = createMsxml2DOMDocumentObject();
	stylesheetDoc.async = false;
	stylesheetDoc.load(xmlHttp.responseXML);
  }
}

function loadGridPage(pageNo)
{
  editableId = false;

  if(xmlHttp && (xmlHttp.readyState == 4 || xmlHttp.readyState == 0))
  {
	var query = feedGridUrl + "?action=SHOW_PAGE&page=" + pageNo;
	xmlHttp.open("GET", query, true);
	xmlHttp.onreadystatechange = handleGridPageLoad;
	xmlHttp.send(null);
  }
}

function handleGridPageLoad()
{
  if(xmlHttp.readyState == 4)
  {		  	
	if(xmlHttp.status == 200){
	  response = xmlHttp.responseText;	
	  
	  if(response.indexOf("ERRNO") >= 0 || response.indexOf("error") >= 0 || response.length == 0){
		alert(response.length == 0 ? "Server error. " : response);  
		return;
	  }

	  xmlResponse = xmlHttp.responseXML;

	  if(window.XMLHttpRequest && window.XSLTProcessor && window.DOMParser)
	  {	
		 var xsltProcessor = new XSLTProcessor();
		 xsltProcessor.importStylesheet(stylesheetDoc);
		 page = xsltProcessor.transformToFragment(xmlResponse, document);
		 var gridDiv = document.getElementById(gridDivId);

		 gridDiv.innerHTML = "";
		 gridDiv.appendChild(page);
	  }
	  else if (window.ActiveXObject)
	  {
		var theDocument = createMsxml2DOMDocumentObject();
		theDocument.async = false;
		theDocument.load(xmlResponse);

		var gridDiv = document.getElementById(gridDivId);
		gridDiv.innerHTML = theDocument.transformNode(stylesheetDoc);
	  }
	}
	else
	{
	  alert("Error reading server response");	
	}
  }
}


Series this article:
AJAX - Grid: Prepare Table Grid
AJAX - Grid: Creating Server Side Task
AJAX - Grid: Testing Server Side Task
AJAX - Grid: Creating XSL for Client Side
AJAX - Grid: Creating JavaScript for Client Side
AJAX - Grid: Creating Page for Final Display

| Give Your Opinion | Recommend
Share and Bookmark to: These icons link to social bookmarking sites where readers can share and discover new web pages.
digg del.icio.us technorati Ma.gnolia BlinkList

Recommended articles by other readers:
Web Services: How PHP Kiss VB.NET? (Part 1)
Chart: How to Build Cool Animation Real Time Chart
Joomla: Fast Road to Understand Component Programming
Email: Send Attachement Mail
mod_rewrite - Part 1: create your "fantasy" URL

What do You Think?
Your Name *:
Email *:
(Will not be published)
Website/URL:
Your Comment *:
* Required


615
posting