Play with xmlhttp and Coldfusion
This is our implementation of xmlhttp so far... but we are certainly looking at ways to improve it.
<form name="formName">
<input name="inputFieldYourPassing" type="text" value="Frogs">
<input name="inputName" type="button" onclick="javascript:funkyfunction();" value="Hit Play">
</form>
<div id="divName">
</div>
This is the form that we are passing to the function which should be in the of the page.
<input name="inputFieldYourPassing" type="text" value="Frogs">
<input name="inputName" type="button" onclick="javascript:funkyfunction();" value="Hit Play">
</form>
<div id="divName">
</div>
function funkyfunction() {
call the function
document.getElementById('divName').innerHTML = 'Processing Request';
Tell your user friend you are doing something...
var Current = "actionPage.cfm?varYoursPassign=" + document.formName.inputFieldYourPassing.value;
What you are doing here is setting the action page to hit with the variables. You can send any document objects by passing them through the function like document.formName.whatever.value
The best way to test to see if everything thing is working, is to put
<cfdump var="#url#>
on your action page. Now open up your Xmlhttp Connection
xmlhttp.open("GET", Current, true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
Now 4 is "Successful Connection" and if you would like to put a few cushions incase the connection was not as success as you would have liked then this is the place to do it. However if all is well you can pass through whatever the action page outputed into your div
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById('divName').innerHTML = xmlhttp.responseText;
Otherwise nothing will happen and most likley one of your variables are spelt incorrectly, you can test that by going into the javascript debug menu in FireFox.
}
}
xmlhttp.send(null)
}
}
xmlhttp.send(null)
}
Hope this helps and we have certainly extensively used this, But as we said we are certainly looking at ways to make this better.
Nice work.. But I got a JS error when tried it!
I used ColdFusion 7.0, IE 6.0, and FireFox 5.0.
Seems like they don't recognize the variable "xmlhttp", so you need to create an object for that..
Here is my version of your code:
<Html>
<Head>
<title>Untitled</title>
</Head>
<script language="JavaScript">
function funkyfunction(){
// Display a waiting messege..
document.getElementById('actionDiv').value = "Processing...";
var Current = "useAjax_action.cfm?varYoursPassign=" + document.formName.inputField.value;
// Create the XML Http Request Object:
if(window.XMLHttpRequest){
request = new XMLHttpRequest( );
} else if (window.ActiveXObject){
request = new ActiveXObject("Msxml2.XMLHTTP");
if (! request){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.open("GET", Current, true);
// Call the Object:
request.open("GET", Current, true);
// When return:
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById('actionDiv').innerHTML = request.responseText;
}
}
/**/
request.send(null);
}
</script>
<Body>
<Form name="formName">
<input name="inputField" type="text" value="Frogs">
<input name="inputName" type="button" onclick="javascript:funkyfunction();" value="Hit Play">
</Form>
<div id="actionDiv"></div>
</Body>
</Html>
Notice that I wrote a conditional statement to create that object in every possible way.. to make it work in both browsers.
Waleed.
And in another file -name it "useAjax_action.cfm", put the follwing code:
<cfoutput>
<cfdump var="#url#">
</cfoutput>
And on your broswer's URL type "<yourFilesPath>/useAjax.cfm"
And open the gate for a new world.. :)
Waleed Elbashier
ImageTrend, Inc.
simply put above you funky funtion but after the <script type="text/javascript">
var xmlhttpp = false;
if (!xmlhttp && typeof XMLHttpRequest !='undefined') {
xmlhttp = newHttpRequest();
}
and you should be sweet
hope this helps let me know if it doesn't.
xmlhttp.open("GET", Current, true);
I already replaced it with:
request.open("GET", Current, true);
Here is cheap laptop ac adapter online shop in uk. We specialize in http://www.adaperlist.com laptop AC adapters. All our products are brand new, with the excellent service from our customer service team.