Jump to content

Anyone know AJAX

Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...