Jump to content

Anyone know AJAX

vchris

By vchris
in General

 Share

Recommended Posts

jesh Devoted Member

jesh

Posted
Posted

Hmm, don't know anything about ColdFusion myself, but here's the javascript I use for my AJAX stuff. I hope it helps! Only thing to keep in mind here is that both the page that the visitor is on and the page that the AJAX request goes off to must be in the same domain (i.e. www.mysite.com):

var http_request;function getHttpObject(){    var object = false;        if(window.XMLHttpRequest)    {        object = new XMLHttpRequest();    }    else if(window.ActiveXObject)    {        try        {            object = new ActiveXObject("Msxml2.XMLHTTP");        }        catch(e)        {            try            {                object = new ActiveXObject("Microsoft.XMLHTTP");            }            catch(e)            {            }        }    }        return object;}function ajax_GetRequest(url, handler){    http_request = getHttpObject();        if(http_request)    {        http_request.onreadystatechange = handler;        http_request.open("GET", url, true);        http_request.send("");    }}function ajax_PostRequest(url, handler, data){    http_request = getHttpObject();        if(http_request)    {        http_request.onreadystatechange = handler;        http_request.open("POST", url, true);        http_request.setRequestHeader("Content-Type", "application/x-www-urlencoded");        http_request.setRequestHeader("Content-Length", data.length);        http_request.setRequestHeader("Connection", "close");        http_request.send(data);    }}function sample_ajax_Handler(){    if(http_request.readyState == 4)    {        if(http_request.status == 200)        {            var text = http_request.responseText;            //var xml = http_request.responseXML;                        // do something with text (or xml).        }    }}// Here is what a call would look like:ajax_GetRequest("http://www.mysite.com/mypage.html", sample_ajax_Handler);

Link to comment
Share on other sites
vchris Dedicated Member

vchris

Posted
  • Author
Posted

That's no issue since I won't be redirecting. How do I include a library file for ajax? Can I simply link to the library file online?

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

When you say library file, are you referring to something like a class library? If so, it shouldn't be necessary. All the code that is needed to perform the AJAX request is in that code I provided combined with what is already built into the browsers (XMLHttpRequest() for most browsers and ActiveX stuff for IE).Here's an example of a webpage that would use AJAX. It requires some other page that handles the request and spits out some data based on parameters either POSTed to the page or provided in the query string. This would typically be a PHP page, an ASPX page, or a CFM (is that cold fusion? :)) page. When I build these, I usually just return plain text because I don't feel like bothering with the XML, but that's up to you.First, I'd put all that javascript into a file - let's call it ajax.js.

<html><head><script type="text/javascript" src="ajax.js"></script><script type="text/javascript">function DoSomething(somevalue){    // this URL is for the page that will handle the AJAX request.    var url = "http://www.mysite.com/somepage.php?someparameter=" + somevalue;    ajax_GetRequest(url, handleAjaxRequest);}function handleAjaxRequest(){    if(http_request.readyState == 4)    {        if(http_request.status == 200)        {            var text = http_request.responseText;            document.getElementById("ResultDiv").innerHTML = text;        }    }}</script><body><div id="ResultDiv" /><a href="#" onclick="DoSomething('testing');">Click Me</a></body></html>

Link to comment
Share on other sites
vchris Dedicated Member

vchris

Posted
  • Author
Posted

hmmm... I'll show you what I got. First what I wanna do is when the user chooses an option in select 1, the select 2 choices should be changed depending on the choice in select 1. Select 2 gets it's choices from a sql query.

<script language="javascript">function getOptions(parentId){	/*	This executes the CF function GetMenu(parentId)	and executes the JS function showNewOptions(result) when it returns.	It's Asynchronous, so getOptions() doesn't wait for anything.	*/	DWREngine._execute(_cfscriptLocation_Assignments, null, 'GetMenu', parentId, showNewOptions);}function showNewOptions(result){	/*	result is the CFAJAX return from the query.	In this case we get a CF query that's been	turned into a JS Array of Objects.	*/	//first, clear out the existing options	var mySelect = document.getElementById('process');	mySelect.options.length = 0;	//now populate the new options	for (var i=0; i < result.length; i++ ) {		mySelect.options[i] = new Option(result[i].OPTIONTEXT,result[i].OPTIONVALUE);	}}</script><!--- CF function to populate process list --->	<cffunction name="GetMenu" output="false" returntype="query" hint="Returns a query of the submenu items based on the parent menu ID">		<cfargument name="ParentID" required="yes" type="numeric" hint="The parent ID of the items to return">		<cfset var QGetMenu="">		<cfquery datasource="xxxxx" name="QGetMenu">			SELECT * 			FROM Process 			WHERE ProcessGroup_code = <cfqueryparam cfsqltype="cf_sql_numeric" value="#ARGUMENTS.ParentID#">		</cfquery>		<cfreturn QGetMenu>	</cffunction>

Select 1:

<div id="processGroupContainer">			<p><label>Process Group <span class="star">*</span></label>			<select name="processGroup" id="processGroup" onChange="getOptions(this.value);">				<option value="default">Make a Selection</option>				<cfoutput query="getProcessGroup">					<option value="#getProcessGroup.ProcessGroup_Code#">#getProcessGroup.Description_E#</option>				</cfoutput>			</select></p>		</div>

Select 2:

<div id="processContainer">			<p><label>Process <span class="star">*</span> <span class="small"><a href="/pdbis/oecd/oecd/admin/addproc.cfm" target="_blank" id="addProcessLink">Add Process</a></span></label>			<select name="process" id="process">			</select></p>		</div>

All this is based on http://www.fusionauthority.com/Techniques/...ldFusion-Part-I

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

Hmm, I just don't know anything about cold fusion and how it would be possible to execute a function (that GetMenu cffunction) on the server from within the same page. In my experience (PHP, ASP.NET), you need a second page which handles all requests from AJAX calls. You send it parameters and it returns specific data based on those parameters. To get a cffunction to run on the same page that the AJAX request originates from, you'll probably have to turn to the Cold Fusion developers here.If it were me, I'd have a page on the server build the necessary output (i.e. a list of options delimited by some character like a comma or newline; or using XML) and then use that data to clear out the options in the second dropdown and populate it with the new options.

var select = document.getElementById("process");var option;select.options.length = 0; // clear the options from the list.for(var i = 0; i < newoptions.length; i++){	option = document.createElement("option");	option.value = newoptions[i][0];	option.text = newoptions[i][1];	select.add(option, null);}

The step missing above would be to convert the data that is returned by your page into a two dimensional array (called newoptions).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...