/** * Ajax.js * * Collection of Scripts to allow in page communication from browser to (struts) server * ie can reload part instead of full page * * How to use * ========== * 1) Call retrieveURL from the relevant event on the HTML page (e.g. onclick) * 2) Pass the url to contact (e.g. Struts Action) and the name of the HTML form to post * 3) When the server responds ... * - the script loops through the response , looking for newContent * - each tag in the *existing* document will be replaced with newContent * * NOTE: is case sensitive. Name *must* follow the first quote mark and end in a quote * Everything after the first '>' mark until is considered content. * Empty Sections should be in the format */ //global variables var req; var which; function sendAlert(alertMessage){ alert(alertMessage); } /** * gets the value of the formelemet of the form as a URL encoded String * suitable for appending to a url * @param formName to encode * @return string with encoded form values , beings with & */ function retriveValueFromPost(formName, nameInputType){ //Setup the return String returnString =""; //Get the form values formElements=document.forms[formName].elements; //we escape (encode) each value returnString=returnString+"&"+escape(formElements[nameInputType].name)+"="+escape(formElements[nameInputType].value); //return the values return returnString; } function getNewLstValueFilterValues(url, formName, nameInputType){ //get the (form based) params to push up as part of the get request url=url+retriveValueFromPost(formName, nameInputType); //Do the Ajax call if (window.XMLHttpRequest) { // Non-IE browsers req = new XMLHttpRequest(); //alert("firefox"); req.onreadystatechange = processStateChange; try { req.open("GET", url, true); //was get } catch (e) { alert("Problem Communicating with Server\n"+e+url); } req.send(null); } else if (window.ActiveXObject) { // IE req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(); } } } /** * Get the contents of the URL via an Ajax call * url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1) * nodeToOverWrite - when callback is made * nameOfFormToPost - which form values will be posted up to the server as part * of the request (can be null) */ function retrieveURL(url,nameOfFormToPost) { // alert('Ajax url:' + url); //alert(nameOfFormToPost); //get the (form based) params to push up as part of the get request if (nameOfFormToPost.length > 0){ //alert("si va bene"); url=url+getFormAsString(nameOfFormToPost); } //alert(url); //Do the Ajax call if (window.XMLHttpRequest) { // Non-IE browsers req = new XMLHttpRequest(); req.onreadystatechange = processStateChange; try { req.open("GET", url, true); //was get } catch (e) { alert("Problem Communicating with Server\n"+e+url); } req.send(null); } else if (window.ActiveXObject) { // IE // Try ActiveX try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // first method failed try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { // both methods failed } } if (req) { req.onreadystatechange = processStateChange; req.open("GET", url, true); req.send(); } else alert("Browser non compatibile..."); } } /** * Get the contents of the URL via an Ajax call * url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1) * nodeToOverWrite - when callback is made * nameOfFormToPost - which form values will be posted up to the server as part * of the request (can be null) */ function retrieveURLForDivReplacing(url,nameOfFormToPost) { ///alert('Ajax url:' + url); //alert(nameOfFormToPost); //get the (form based) params to push up as part of the get request if (nameOfFormToPost.length > 0){ //alert("si va bene"); url=url+getFormAsString(nameOfFormToPost); //alert(url); } //Do the Ajax call if (window.XMLHttpRequest) { // Non-IE browsers req = new XMLHttpRequest(); req.onreadystatechange = processStateChangeForDivReplacing; try { req.open("GET", url, true); //was get } catch (e) { alert("Problem Communicating with Server\n"+e+url); } req.send(null); } else if (window.ActiveXObject) { // IE // Try ActiveX try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // first method failed try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { // both methods failed } } if (req) { req.onreadystatechange = processStateChangeForDivReplacing; req.open("GET", url, true); req.send(); } else alert("Browser non compatibile..."); } } /* * Set as the callback method for when XmlHttpRequest State Changes * used by retrieveUrl */ function processStateChange() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response //alert("Ajax response:"+req.responseText); //Split the text response into Span elements spanElements = splitTextIntoSpan(req.responseText); //Use these span elements to update the page replaceExistingWithNewHtml(spanElements); } else { alert("Problem with server response:\n " + req.statusText); } } } /* * Set as the callback method for when XmlHttpRequest State Changes * used by retrieveUrl */ function processStateChangeForDivReplacing() { if (req.readyState == 4) { // Complete if (req.status == 200) { // OK response //alert("Ajax response:"+req.responseText); //alert(req.responseText); //Split the text response into Span elements divElements = splitTextIntoDiv(req.responseText); //Use these span elements to update the page replaceExistingDivWithNewHtml(divElements); } else { alert("Problem with server response:\n " + req.statusText); } } } /** * gets the contents of the form as a URL encoded String * suitable for appending to a url * @param formName to encode * @return string with encoded form values , beings with & */ function getFormAsString(formName){ //Setup the return String returnString =""; //alert("getFormAsString"); //Get the form values formElements=document.forms[formName].elements; //alert(formElements.length); //loop through the array , building up the url //in the form /strutsaction.do&name=value for ( var i=formElements.length-1; i>=0; --i ){ formElements[i].disabled=1; //we escape (encode) each value returnString=returnString+"&"+escape(formElements[i].name)+"="+escape(formElements[i].value); } //return the values return returnString; } /** * Splits the text into elements * @param the text to be parsed * @return array of elements - this array can contain nulls */ function splitTextIntoSpan(textToSplit){ //Split the document returnElements=textToSplit.split("") //Process each of the elements for ( var i=returnElements.length-1; i>=0; --i ){ //Remove everything before the 1st span spanPos = returnElements[i].indexOf("0){ subString=returnElements[i].substring(spanPos); //alert(subString); returnElements[i]=subString; } } return returnElements; } /** * Splits the text into
elements * @param the text to be parsed * @return array of
elements - this array can contain nulls */ function splitTextIntoDiv(textToSplit){ //alert("text resp:"+textToSplit); //Split the document returnElements=textToSplit.split("
") //Process each of the elements for ( var i=returnElements.length-1; i>=0; --i ){ //Remove everything before the 1st span divPos = returnElements[i].indexOf("0){ subString=returnElements[i].substring(divPos); //alert(subString); returnElements[i]=subString; } } return returnElements; } /* * Replace html elements in the existing (ie viewable document) * with new elements (from the ajax requested document) * WHERE they have the same name AND are elements * @param newTextElements (output of splitTextIntoSpan) * in the format texttoupdate */ function replaceExistingWithNewHtml(newTextElements){ //loop through newTextElements for ( var i=newTextElements.length-1; i>=0; --i ){ //alert(newTextElements[i]); //check that this begins with -1){ //get the name - between the 1st and 2nd quote mark startNamePos=newTextElements[i].indexOf('"')+1; endNamePos=newTextElements[i].indexOf('"',startNamePos); name=newTextElements[i].substring(startNamePos,endNamePos); //alert(i+" ele"+name); //get the content - everything after the first > mark startContentPos=newTextElements[i].indexOf('>')+1; content=newTextElements[i].substring(startContentPos); //Now update the existing Document with this element //check that this element exists in the document if(document.getElementById(name)){ //alert("Replacing Element:"+content); document.getElementById(name).innerHTML = content; } else { alert("Element:"+name+"not found in existing document"); } } } } /* * Replace html elements in the existing (ie viewable document) * with new elements (from the ajax requested document) * WHERE they have the same name AND are elements * @param newTextElements (output of splitTextIntoSpan) * in the format texttoupdate */ function replaceExistingDivWithNewHtml(newTextElements){ String.prototype.substr = function() { var x=this; return x.toString(); //return x.split(" "); } //var str_data = "Hello World"; //var test = str_data.substr(); //alert(test); //loop through newTextElements for ( var i=newTextElements.length-1; i>=0; --i ){ // alert(newTextElements[i]); //check that this begins with -1){ //get the name - between the 1st and 2nd quote mark startNamePos=newTextElements[i].indexOf('"')+1; endNamePos=newTextElements[i].indexOf('"',startNamePos); name=newTextElements[i].substring(startNamePos,endNamePos); //alert ("name"+i+" "+name); //get the content - everything after the first > mark startContentPos3=(newTextElements[i].indexOf('>'))+1; lunghezza = newTextElements[i].length; //alert (lunghezza); var content = newTextElements[i].substr(); //alert(content); // content = content.substr(startContentPos3, lunghezza); // content = content.substr(); //alert (content); //Now update the existing Document with this element //check that this element exists in the document if(document.getElementById(name)){ //alert("Replacing Element:"+name+":"+content); document.getElementById(name).innerHTML = content; } else { alert("Element:"+name+"not found in existing document"); } } } }