// This'll hold our XMLHttpRequest method var xmlHttp; // This makes our http request object, it's used internally // and doesn't need to be called directly in the html function ajax_start() { // XMLHttpRequest is the correct method, // however, it is not supported by IE, because they // like to do things a "little" different. try { xmlHttp=new XMLHttpRequest(); } // try -> catch statements will attempt to do something and // then fall into the catch block when it runs into a problem // instead of erroring. In this case it will be because the user is in // IE and doesn't support XMLHttpRequest catch (e) { // This one is IE 6.0+ try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { // This one is IE 5.5+ try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // There's nothing else to fall back on, // the user is using a pretty outdated browser, so // we error them. alert( "Your browser does not support AJAX." + "Please consider upgrading or the asynchronous features will not be supported." ); return false; } } } } // This function is one we send to a URL with some // data, it should be a script that deals with our // data and returns the text that jscript will deal with. // Could go in something like onClick for buttons etc // // Be aware that URL -has- to be on the same domain as the // Javascript is, just a little oddity I came accross that // would have you stumped otherwise. // // Third parameter can be null to use the default name. function ajax_send_data_get(url, data, statechange) { // First get the xmlHttpRequest object ajax_start(); // How Ajax works is that when calls are sent to the // server, the onreadystatechange function will fire depending // on where the current action is. We specify a function to call // when the state changes which will do things at specific states. if(statechange == null) xmlHttp.onreadystatechange = ajax_statechange; else xmlHttp.onreadystatechange = statechange; // This opens the request, this one we set to GET method. // The third parameter defines if the request is asynchronous or not, // if this is false, the browser can crash because it will wait for the // request to come back, and sometimes it may never come back! xmlHttp.open("GET", url, true); // This one sends our data of course.. Then it's all up to ajax_statechange. xmlHttp.send(data); } // Same as above but uses post function ajax_send_data_post(url, data, statechange) { if(statechange == null) xmlHttp.onreadystatechange = ajax_statechange; else xmlHttp.onreadystatechange = statechange; xmlHttp.open("POST", url, true); // Post needs the correct header type to work xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlHttp.send(data); } /* ---------------------------------------------------------------------- ********************************************************************** ---------------------------------------------------------------------- This is an outline of an ajax_statechange, we can just copy paste this and edit it in other jscript files. function ajax_statechange() { // Request has not been started. if(xmlHttp.readyState == 0) { } // Request has been started if(xmlHttp.readyState == 1) { } // Request has been sent to the server if(xmlHttp.readyState == 2) { } // Request is being dealt with server-side if(xmlHttp.readyState == 3) { } // Request is finished, now use the data. if(xmlHttp.readyState == 4) { // Data returned is stored in xmlHttp.responseText // with PHP, we just use echo to get our response. } } */ // This bit is a function for getting an element we want by id. // There's a lot of cross browser stuff going on, but in practice all // you do is. // var my_element = find_dom("foo"); // This will return whichever element on our page has the ID "foo". var is_dhtml = 0; var is_layers = 0; var is_all = 0; var is_id = 0; if(document.getElementById) { is_id = 1; is_dhtml = 1; } else { if(document.all) { is_all = 1; is_dhtml = 1; } else { browserVersion = parseInt(navigator.appVersion); if((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) { is_layers = 1; is_dhtml = 1; } } } function find_dom(objectID, withStyle) { if(withStyle == 1) { if(is_id) return (document.getElementById(objectID).style); else { if(is_all) return (document.all[objectID].style); else if(is_layers) return (document.layers[objectID]); } } else { if(is_id) return (document.getElementById(objectID)); else { if(is_all) return(document.all[objectID]); else if(is_layers) return (document.layers[objectID]); } } return false; } var extra_name2 = ""; function change_dropdown(extra_name) { extra_name2 = extra_name; var dropdown = find_dom("manu" + extra_name, 0); var value = dropdown.options[dropdown.selectedIndex].value; ajax_send_data_get("ajax_dropdown.php?type=standard&extra_name="+ extra_name +"&val=" + value, null, dropdown_statechange); } // Deal with it yo function dropdown_statechange() { var div_box = find_dom("model_box" + extra_name2, 0); // Request has been started and will now be dealt with server-side if(xmlHttp.readyState == 1) { } // Request is finished, now use the data. if(xmlHttp.readyState == 4) { if(xmlHttp.responseText == "ERR_DBCONN") handle_error("Error connecting to database!"); else if(xmlHttp.responseText == "ERR_DATA") handle_error("Invalid data was submitted."); else if(xmlHttp.responseText == "ERR_UPDATE") handle_error("Error updating dropdown. Please try again."); div_box.innerHTML = xmlHttp.responseText; } } // Error box function handle_error(message) { alert(message); } function submit_form(extra_name) { var manu_dropdown = find_dom("manu" + extra_name, 0); var manu_value = manu_dropdown.options[manu_dropdown.selectedIndex].value; var model_dropdown = find_dom("model" + extra_name, 0); var model_value = model_dropdown.options[model_dropdown.selectedIndex].value; var keywords_text = find_dom("keyword" + extra_name, 0); var keywords_value = keywords_text.value; var final_value = "" if(manu_value != "") final_value = manu_value.replace(" ", "%20"); if(model_value != "") final_value = final_value + "%20" + model_value.replace(" ", "%20"); if(keywords_value != "" && keywords_value != undefined) final_value = final_value + "%20" + keywords_value.replace(" ", "%20"); if(final_value == "") return false; else window.location = "index.php?main_page=gsearch_results&cPath=14&q=" + final_value + "&submit=Search"; return false; }