JSMX
I like what im ready about this one, a very light footprint. There is only a single .js file to include in the page. That is really lite, and probably will do all that i need it to do at this point. Perhaps if i continue to push out ajax solutions, i will find a situation where a more *robust framework is needed.
I love this paragraph from the site;
"The beauty of this API is its simplicity and its straight forward syntax. It consists of just one file (engine.js) which marshals requests between the client and the server via the http() function (which is the only function you need to know about in order to use JSMX)."
and this too;
"You simply place the engine.js file in your display page. You then write two functions within JavaScript for each call to the server, a request function and a callback function. The request function makes either a "GET" or "POST" to the server by calling the http() function (which resides in the engine.js file). The server fires off the request and returns JavaScript, XML, JSON, or WDDX to engine.js which in turn converts the response into a valid JavaScript Object/Variable and returns it to the callback function in your display template."
The notion of a request and callback function both in the invoking method is common at all the frameworks that i have peaked at the past few days.
this framework will return to the invoking function (the view page) a javascript object, in either JSON, WDDX, XML form - depending on what you specify in the invoker.
Here is a sample implementation using this framework
1 - include the javascript file
<script src="JSMX/engine.js"></script>
2 - jscript in calling view page
<script>
function my_request(val){param = 'arg=' + val;
http( "POST" , "model/ajaxCalls.cfc?method=getPIKeys2" , getPIsHandler, param);
}
function getPIsHandler(r){ document.getElementById("showResults").innerHTML = sDumper(r);
}
</script>
This is the html code that calls the my_request() function
<form name="myForm">
<div>
<span>
<b>Select a pi key group:</b>
</span>
<span>
<select name="key" onChange="my_request(this.value)">
<option value="h">like h</option>
<option value="r">like r</option>
<option value="p">like p</option>
</select>
</span>
</div>
<div id="piList">
</div>
</form>
3 - coldfusion cfc function
Here is the big thing that took me about 2 days to figure out!
<cffunction name="getPIKeys2" access="remote" returntype="query">
<cfargument name="arg" type="string" required="yes" default="z">
<cfquery name="q" datasource="accelerateu">
SELECT strandID, piID, auID, piKey, piDescription, piCode
FROM dbo_performanceIndicator
WHERE (piKey LIKE '%#arguments.arg#%')
</cfquery>
<cfreturn q>
</cffunction>
I have been trying to pass arguments, parameters (whatever you wish to call them) to my coldfusion function, a very common practice/need. In each case, i was passing the value from the selector box to the jscript function as a paramater, then passing the parameter from the jscript function into the coldfusion function via the nice http object. But, the parameter was not being reconized in the CF function. I fiddled around and around with this, which actually caused me to look for other frameworks, since i could not get it to work in the ajaxCFC framework (althought it was not the problem of the framework). The problem was this.
In a javascript invocation, your parameter name MUST MATCH THE ARGUMENT NAME IN THE CFC. no kidding. If you pay attention to the code above, you notice the same name in the param statement and in the CFC function, arg .
That arguments/parameter could be called bob or joe or skippy, as long as the name is the same. I guess i get spoiled or lazy by using ColdFusion all these years, which does not care if the name is the same, just the order and data type.
So thats it. A pretty good accomplishment, i needed to slove this, so i can get on with manipulating the returned data set using javascript to loop and output, not CF.
and, oh yea, its cross browser compatible - it works in IE and FF and Safari. Its actually a little zippier in Safari.
peace out for now.
No comments:
Post a Comment