//This web site uses one page that has its div "ecocontent" updated through multiple AJAX requests. This was done to allow the client //maximum flexibility in maintaining and updating the site. They can easily add, update, and remove pages by creating simple html //fragments that get loaded into the main page. Plus, the form handling on the server is generic. They can add or remove any field //from any form and the server will still send the data forward. The meta data is the key for google indexing so this one page //AJAX solution is a nice fit. There is no worry that the AJAX pages won't be properly indexed. Will revist if they add a shopping //cart to the site. //File Created by Jim Coffey 02/01/2008 //Needs to be global or multiple mouse clicks will end up stepping on each other based on who completes first. //Every time the function is called this variable resets which effectively kills any outstanding requests. var http_request = null; //Harcoded value as this site uses one page with a div named "ecocontent" that is the only HTML that updates. var HTML_ELEMENT_ID_NAME = "ecocontent"; //This function is responsible for creating the request, binding the asnychrnonous callback function, and sending the request. function processXMLRequest(url, parameters) { if (window.XMLHttpRequest) { try { http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/html'); } } catch (e) {} } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Cannot create XMLHttp object. Make sure to allow ActiveX Objects to run when prompted in Internet Explorer.'); return false; } try { http_request.onreadystatechange = handleResponse; http_request.open("GET", url + parameters, true); http_request.send(null); } catch (e) { return false; } return true; } //Asynchrous callback function for handling the response from our AJAX request. function handleResponse() { if ((null != http_request) && (4 == http_request.readyState)) { try { if (200 == http_request.status) { updateInnerHTML(http_request.responseText); } else { updateInnerHTML(http_request.responseText); //Do same thing as success for now, but improve error handling later - JC } } catch (e) { //Exception will alert() inside updateInnerHTML function } finally { http_request = null; } } } //This code is generic for 4 forms and possibly more. The only requirement on all the forms is that the fields //checked by this function are not blank function validateForm(form) { var reason = ""; reason += validateRequiredField(form.first_name); reason += validateRequiredField(form.last_name); reason += validateRequiredField(form.address); reason += validateRequiredField(form.city); reason += validateRequiredField(form.state); reason += validateRequiredField(form.zipcode); reason += validateRequiredField(form.phone); reason += validateRequiredField(form.email); if (reason != "") { alert("Some required fields have been left blank:\n\n" + reason); return false; } return true; } //Simple validation to make sure they don't completely miss filling something in a required field. This is still a family business //so they don't want to be real strict as they usually follow up by phone/email anyway. function validateRequiredField(fld) { var error = ""; if (fld.value.length == 0) { fld.style.background = 'Yellow'; error = fld.name + "\n" fld.focus(); } else { fld.style.background = 'White'; } return error; } //Updates the inner HTML with the value in content. It uses HTML_ELEMENT_ID_NAME defined at the top to determine the //DIV ID to update. Simply add a variable instead of using this constant and you can update multiple parts of any page. function updateInnerHTML(content) { try { document.getElementById(HTML_ELEMENT_ID_NAME).innerHTML = content; } catch (e) { alert("There was a problem updating the page.\nError is:\n" + e); } } //This function is the starting point for updating the main "ecocontent" div. Optionally, it takes a form for the pages //that have data submitted to the server. This function should be called directly in the href="" for any of the anchor tags //To create a new page and menu item, you simply create a new file "div_new.html" and a link to the sidebar on the index.html file. //My Link function updateContent(url, form) { var formattedParameters = ""; var serverResponse; if(null!=form) { if(!validateForm(form)) return false; formattedParameters = formatXMLGetRequestParameters(form); } processXMLRequest(url, formattedParameters); } //The AJAX code for get requests is a little simpler then when you are dealing with form posts. This function turns the form //variables into one long HTTP Style GET request. The ecoclean forms are simple so this code will be revisited if they decide //to add more complicated order style forms or credit card info. function formatXMLGetRequestParameters(form) { var formattedParameters = ""; var elements; if (null != form) { try { formattedParameters += "?"; elements = form.elements; for (i=0; i < elements.length; i++) { switch (elements[i].type) { case 'text': case 'select-one': case 'hidden': case 'textarea': if(elements[i].value.length > 0) formattedParameters += escape(elements[i].name) + '=' + escape(elements[i].value.replace(/[\n\r\t]/g,' ')) + '&'; break; case 'checkbox': case 'radio': if(true == elements[i].checked) formattedParameters += escape(elements[i].name) + '=' + escape(elements[i].value) + '&'; break; default: } } } catch (e) { } } return(formattedParameters); }