This Coldfusion Custom Tag let's you add ajax functionality to a form, but instead of using the XMLHttpRequest object, it uses a dummy gif and cookies to get the data from the server.
Right now it just let's you add text fields, textarea fields and select fields with ajax functionality, but since the gateway is already there, with a little javascript programming, you can do anything that needs an ajax gateway.
This tag is completly based in an article by Jim Davis, the Depressed Press of Boston.
Website: www.depressedpress.com
Using a GIF as a Data Pipe
Ever want to send data to the server and return data to the browser without refreshing the page? This customtag uses a simple technique that
allows you to do that by using an HTML img tag as a conduit. The technique takes advantage of JavaScript's ability to modify the source of a
img tag on the fly and ColdFusion's ability, via cfcontent, to mimic a graphic.
With this technique you can create adaptive forms, gain detailed control over session time out, better deal with user error, and other things we
haven't thought of.
JavaScript can manipulate the src attribute of the img tag, using JavaScript we can create, populate, and append URL variables to
the modified src attribute allowing us to send arbitrary data to the server. (sendPacket function)
Communication back to the browser is achieved through the use of cookies set by the serverside page and added to the graphic response header.
The size of the info that can be passed with this method is about 4kb.
Parameters:
Init
This is to intialize the javascript functions in the header of the clientside page, there should be a tag with this parameter at the end of the clientside page.
Type
This is to especify wat type of input field we are generating, options are: text, textarea and select.
Trigger
This is to especify the event that will send the request, by default onfocus starts a timer to check the field for changes and onblur stops the timer, but if we specify "onblur", then when we focus on the field nothing happens and when we leave the field, the info is sent, defaults to "onfocus".
Function
This is to especify a function to call when we receive a packet, defaults to "manageResults()" if defined or to "manageResults0()" if not, manageResults0() just popups an alert with the packet content.
gwFile
This is the name of the serverside page, defaults to "fauxGif.cfm".
cookieN
This is the name of the cookie to use as gateway, defaults to "fauxGif".
Send
This is used with the type=select parameter, especify whether we want to send the value or the text of the selected option, defaults to "value".
sendData
This is for the serverside page, with this we pass the data to the clientside page.
parseData
This is for the serverside page, with this we process the info passed to the page and return an array named "gP" with the Dateseed, fieldName, fieldtype, and fieldValue
Usage:
By default all responses go to the INCLUDED manageResults0() function that fires an alert with the content of the packet, if you create a manageResults() function in the clienside page, then all the responses go there instead, also if you especify a function to receive the packet, then it goes that way.
The receiving function gets the response from the server plus the field that originated the request separated by a "|", so if a field "Name" asks for "Jim", the response could be, depending on our serveside page:
"packet|fieldName" -- "Jim Davis|Name"
At the end of the clientside page, you should add a call to the custom tag with the parameter "Init". (<cf_gifPipe Init>)
Text Input Field: Here we create a text field, with a default value="xxx", size="30", name="Message" and we are also especifying that the response should go to the function dummyFunction(packetReceived), the value of the field will be sent to the serverside page "onfocus" of the field every half second.
Textarea Field: Here we create a textarea, NOTE the closing tag, with cols="30", rows="5", name="TA1", a content of xxx and we are also especifying that the response should go to the function dummyFunction(packetReceived,theField), the value of the field will be sent to the serverside page "onfocus" of the field every half second.
Select Field: Here we create a select field, NOTE the closing tag, with name="select1" and we are especifying that we want to send the TEXT of the selected option, we can especify whether we want to send the "value" or the "text" to the serverside page by default the VALUE gets sent, on the select field we send the packet "onchange".
<cf_gifPipe type="select" name="select1" send="text">
<option value=a>Send A
<option value=y>Send Y
<option value=w>Send W
</cf_gifPipe>
Server Side: To send back the data from the serverside page, we use the "sendData" parameter, we pass the processed data in a string back to the tag, and on the clientside we receive the data from the server AND the form field who originated the call.