Using Ajax with Model-Glue - it's really quite simple
At first glance, the topic can seem somewhat overwhelming. The key, however, is to understand each of them separately and then using them together won't seem overwhelming in the least. I'll touch briefly on each of them independently, but will assume for the bulk of this post that you have at least an elementary understanding of what each is and generally how they work.
Ajax refers to the ability we have to make Javascript run back to our web server and retrieve information for us, without reloading the entire page. It is doing nothing more than making an http call to a web page, just like we would do everytime we click a link on a page. The Javascript, however, makes the call in the background, unseen by the user, receives whatever content results from that web page call, and then does something with it inside of our current page.
Model-Glue is a popular Coldfusion application framework that is becoming the "procedural man's tour guide to object oriented programming", breaking "the rest of us" into the world of OO. If you haven't played with it or invested the time to get familiar with it, you have a lot of your peers who HIGHLY recommend it. I recently had the privilege of doing a presentation for the Kansas City ColdFusion User's Group on Model-Glue that was saved as a Breeze preso if you need or want some kind of intro.
Okay, from this point forward I can safely assume that you have at least a working understanding of Ajax and Model-Glue as separate tools, and will now share with you how the two integrate easily (from the 1,000 foot view). I will NOT be focusing on any one Ajax library, as there are several good ones out there, and as the specific Ajax library being used is (or should be, if the Ajax library is intuitive enough) COMPLETELY IRRELEVANT to understanding how they integrate with one another.
First thing, consider a basic Model-Glue event lifecycle:
1. A Model-Glue event is called via navigation to a URL (index.cfm?event=app.home).
2. The Model-Glue framework looks up the event (in the modelglue.xml file), determines what broadcasts to make, what results to evaluate, and what views to render.
3. Rendered views are returned to the browser.
4. Browser displayes the rendered view.
Hmm, nothing complex here, eh?
Now consider a basic Ajax call to a Model-Glue event:
1. A Model-Glue event is called via Javascript library (var newcontent = ajax.remotecall('index.cfm?event=ajax.getInfo');).
2. The Model-Glue framework looks up the event (in the modelglue.xml file), determines what broadcasts to make, what results to evaluate, and what views to render.
3. Rendered views are returned to the browser.
4. Javascript receives the rendered view and does whatever it was told to do with it (document.getElementById('ajaxDiv').innerHTML = newcontent;)!!
So what is different when incorporating Ajax into the mix? Very, very little. The only REAL difference that I've found I need to keep in mind is in regard to what my view contains when the event I'm calling was specifically created for an Ajax call. For instance, in a "normal" event call, i'm typically going to be returning an entire html page, complete with body tags and the works. In an Ajax call, it will be either a chunk of html or some kind of Javascript-ready data (XML, JSON data, etc.) I have found that it's simpler, whenever possible, to return a chunk of pre-rendered HTML and have my client-side javascript simply place the returned html into the target div. Working with returned XML is where Ajax will become more complex, but even then, the complexity is STILL on the client side JS coding and not anything to do with Model-Glue at all.
I don't believe that there's anything else a person needs to know in order to be able to "think about" and visualize the interaction between Model-Glue and Ajax...it really is straightforward stuff! Not sure why just a few months ago it sounded like such a difficult concept to me....
Here's an illustration showing how Ajax would work with a Model-Glue page:
The actual Javascript that would handle the call could be as simple as the following example:
That's it, really! Nothing more to it. After grasping this very basic understanding, the only thing left to do now is to select an Ajax library (personally, I take a shine to Scriptaculous...) and start learning how to use it!
Doug out.
Ajax refers to the ability we have to make Javascript run back to our web server and retrieve information for us, without reloading the entire page. It is doing nothing more than making an http call to a web page, just like we would do everytime we click a link on a page. The Javascript, however, makes the call in the background, unseen by the user, receives whatever content results from that web page call, and then does something with it inside of our current page.
Model-Glue is a popular Coldfusion application framework that is becoming the "procedural man's tour guide to object oriented programming", breaking "the rest of us" into the world of OO. If you haven't played with it or invested the time to get familiar with it, you have a lot of your peers who HIGHLY recommend it. I recently had the privilege of doing a presentation for the Kansas City ColdFusion User's Group on Model-Glue that was saved as a Breeze preso if you need or want some kind of intro.
Okay, from this point forward I can safely assume that you have at least a working understanding of Ajax and Model-Glue as separate tools, and will now share with you how the two integrate easily (from the 1,000 foot view). I will NOT be focusing on any one Ajax library, as there are several good ones out there, and as the specific Ajax library being used is (or should be, if the Ajax library is intuitive enough) COMPLETELY IRRELEVANT to understanding how they integrate with one another.
First thing, consider a basic Model-Glue event lifecycle:
1. A Model-Glue event is called via navigation to a URL (index.cfm?event=app.home).
2. The Model-Glue framework looks up the event (in the modelglue.xml file), determines what broadcasts to make, what results to evaluate, and what views to render.
3. Rendered views are returned to the browser.
4. Browser displayes the rendered view.
Hmm, nothing complex here, eh?
Now consider a basic Ajax call to a Model-Glue event:
1. A Model-Glue event is called via Javascript library (var newcontent = ajax.remotecall('index.cfm?event=ajax.getInfo');).
2. The Model-Glue framework looks up the event (in the modelglue.xml file), determines what broadcasts to make, what results to evaluate, and what views to render.
3. Rendered views are returned to the browser.
4. Javascript receives the rendered view and does whatever it was told to do with it (document.getElementById('ajaxDiv').innerHTML = newcontent;)!!
So what is different when incorporating Ajax into the mix? Very, very little. The only REAL difference that I've found I need to keep in mind is in regard to what my view contains when the event I'm calling was specifically created for an Ajax call. For instance, in a "normal" event call, i'm typically going to be returning an entire html page, complete with body tags and the works. In an Ajax call, it will be either a chunk of html or some kind of Javascript-ready data (XML, JSON data, etc.) I have found that it's simpler, whenever possible, to return a chunk of pre-rendered HTML and have my client-side javascript simply place the returned html into the target div. Working with returned XML is where Ajax will become more complex, but even then, the complexity is STILL on the client side JS coding and not anything to do with Model-Glue at all.
I don't believe that there's anything else a person needs to know in order to be able to "think about" and visualize the interaction between Model-Glue and Ajax...it really is straightforward stuff! Not sure why just a few months ago it sounded like such a difficult concept to me....
Here's an illustration showing how Ajax would work with a Model-Glue page:
The actual Javascript that would handle the call could be as simple as the following example:
<!--- First, we load up the ajax library... --->
<script src="/js/AjaxLibrary.js" type="text/javascript"></script>
<!--- Now define the function we'll be using when the user clicks our "Ajaxified" link... --->
<script>
function gotClicked(){
/*first, retrieve the new content ... */
var newcontent = ajax.remotecall('index.cfm?event=ajax.getInfo');
/*now stuff the newly retrieved content into our ajaxDiv... */
document.getElementById('ajaxDiv').innerHTML = newcontent;
}
</script>
<script src="/js/AjaxLibrary.js" type="text/javascript"></script>
<!--- Now define the function we'll be using when the user clicks our "Ajaxified" link... --->
<script>
function gotClicked(){
/*first, retrieve the new content ... */
var newcontent = ajax.remotecall('index.cfm?event=ajax.getInfo');
/*now stuff the newly retrieved content into our ajaxDiv... */
document.getElementById('ajaxDiv').innerHTML = newcontent;
}
</script>
That's it, really! Nothing more to it. After grasping this very basic understanding, the only thing left to do now is to select an Ajax library (personally, I take a shine to Scriptaculous...) and start learning how to use it!
Doug out.
Subscription Options
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
Re: Using Ajax with Model-Glue - it's really quite simple
@Doug: "personally, I take a shine to Scriptaculous...)" Well.... you actually take a shine to Prototype which handles the XHR stuff. Scriptaculous handles all of the cool effects. ;o)
BTW, take a look at jQuery (jQuery.com). I think you'll be VERY pleasantly surprised.
BTW, take a look at jQuery (jQuery.com). I think you'll be VERY pleasantly surprised.
Posted by Rey Bango on March 20, 2007 at 8:23 AM
Re: Using Ajax with Model-Glue - it's really quite simple
Yeah, I was aware that Scriptaculous was built upon Prototype, but didn't want to cloud the issue by delving into little details like that. JQuery.com, huh...I'll have to take a peek at it! ;) Thanks Rey.
Posted by dougboude on March 20, 2007 at 11:39 AM
Re: Using Ajax with Model-Glue - it's really quite simple
Great post, very useful.
Posted by Joe on March 20, 2007 at 11:54 AM
Re: Using Ajax with Model-Glue - it's really quite simple
Inside the 'ajaxgetinfo' event's view,you are including a page.
How can I render a partial html through the view to the already displayed page?
Hope you will help me....
Thanks in advance for your time
Rahul...
How can I render a partial html through the view to the already displayed page?
Hope you will help me....
Thanks in advance for your time
Rahul...
Posted by Rahul on June 26, 2008 at 8:26 AM
Re: Using Ajax with Model-Glue - it's really quite simple
Would you let me know how can I use the new cfajaxproxy in CF8 with Model-Glue?
Posted by Rahul on June 26, 2008 at 8:32 AM
Re: Using Ajax with Model-Glue - it's really quite simple
@Rahul:
I don't personally use the CF8 built in ajax stuff; my preference is Prototype, a third party, free ajax javascript library. So, although I did experiment with the CF 8 Ajax functionality initially, I found it too unnatural in syntax and application so just kept going with Prototype and consequently, don't have any good examples to share. I have also heard a lot of good things about jQuery as well as an ajax library, so that might be worth a look as well! :)
I don't personally use the CF8 built in ajax stuff; my preference is Prototype, a third party, free ajax javascript library. So, although I did experiment with the CF 8 Ajax functionality initially, I found it too unnatural in syntax and application so just kept going with Prototype and consequently, don't have any good examples to share. I have also heard a lot of good things about jQuery as well as an ajax library, so that might be worth a look as well! :)
Posted by dougboude on June 27, 2008 at 10:28 AM