Ajax call in ModelGlue without rendering a view

Making an Ajax call is simple and straight forward in ModelGlue.  The concept is simple and is given in detail in Doug’s blog. Read the full tutorial.

In ModelGlue(2) to call the Ajax call we need to have a view. i.e a page needs to be created to act as the view. This is in need if we are using the Ajax call to dynamically load HTML content. The Javascript receives the rendered view and does whatever it was told to do with it. But however there are times when we do not want to have a view rendered for our event(i.e our Ajax call). We simply want to return a value from server(it can even be a mere checking..!!) and assign it to a Javascript variable. For this simple purpose we do not want to create a new page/view.

In order to accomplish this we will have to break the ModelGlue architecture (till now..i couldn’t find any other suitable methods). Anyone who is familiar to ModelGlue architecture will find it easy to understand the below code.

My ModelGlue event:

<event-handler name="test.testFunction">          
     <broadcasts>
          <message name="testFunction" />
     </broadcasts>
</event-handler>                    

Please note that i am not using a view in this event.

And my controller function:-

<cffunction name="testFunction" returnType="any" output="true" >    
<cfargument name="event" type="any" required="true">        

<cfset justtest = 1>

<CFCONTENT TYPE="text" RESET="Yes"><CFOUTPUT>#serializeJSON(justTest)#
<cfset request.modelGlueSuppressDebugging = true />
<cfsetting showdebugoutput="false" /></CFOUTPUT><cfabort>

</cffunction>

Here we are converting the justtest variable in JSON format and outputting via cfcontent. Here cfcontent acts as the rendered view and returns justtest in JSON format. Here aborting at the end of controller function can be considered as breaking the ModelGlue archi , but this is one way around to solve the problem.

By the way here is my Ajax call:-

new Ajax.Request(root+'test.testFunction',{
  method: 'post',
  parameters: {param1:paramval},
  onSuccess: function(response){
    alert(response.responseText);
    var myresult = response.responseText;
  }
});

I am making use of prototype library for this.

We will get 1 if we alert the responseText call back from the server.

This is only applicable to ModelGlue2. If you are using ModelGlue3 then you would also need to check out how to use fomats in MG3. Thanks Ray Camdon for sharing this link.

Advertisements

Removing viewstate values in ModelGlue

A quick blog post on removing viewstate values in Model Glue…everyone knows  about this, but i didn’t find any useful reference while googling this…also for my reference as well just in case i forget…

Removing a value from the viewstate:

<!--- Here key is the name of the value you want to remove--->
viewstate.removeValue('key')

Using Ajax in Model Glue

We can use prototype/scriptaculo.us JavaScript frame works to implement Ajax functionality in Model Glue applications. Model Glue architecture is mainly event driven and while calling an Ajax request we need to call an event that processes the Ajax request. The Ajax call can be made in the prototype framework by using the Ajax.Request method.

Illustration:-

scriptcode1

 

In the Ajax.Request, call the event that processes your ajax function. Return the data from your ajax call in html format and fill it in your form. The responseText contains the html content that shows after calling the Ajax request. We have used the scriptaculous code to update our page after the ajax call was completed along with a slide effect. In the above example element1 is the name of our html container that holds our result after the ajax call.  A javascript function is used to call the ajax request on the click of a button(see below). Here div_filldata is the container that gets filled with html content after finishing the ajax call.

scriptcode11

Also be sure to include the javascript files in your page (see below) before you roll out your application!!

scriptcode2

Click here to see this example in action!!