ColdFusion and how to turn your forms into an ajax request with ExtJS core

Tags: ColdFusion 8, Coldfusion, Ajax, Ajax UI, ColdFusion 9

Although I have used the freely downloadable core version of ExtJS for the example, one can certainly use and leverage of the existing ExtJS that is bundled with ColdFusion to do this as well.

On a project that I am currently working on I have the desire to use as much ajax as possible for this project, the reason being is that I personally hate to refresh an entire page just to make small changes to a page.

I have been working on this project for a few years and yes, my current blog is actually running a very early version of this application. In my design I want to turn a normal form into an Ajax form and not have to have the look and feel that comes with using the ExtJS widgets form.

This is actually easier than I thought it was.

For this example I haven't worried to much about letting the user know what is happening when it comes to communications between the client and server, I have left this up to the imagination that you could come up with as there are many ways one could let the user know about the communication between the client and server.

With that in mind let's look at a simple password change form, that we might want to use Ajax with.

<form onSubmit="return( false ); id="Form by Id'">
   <input type="password" name="oldPassword" />
   <input type="Password" name="newPassword" />
   <input type="Password" name="confirmNewPassword" />
   <input type="submit" value="Change Password">
</form>

The first thing to notice here is that we are saying that if we try to submit this form nothing will happen, the reason at this tage is that we have set the onSubmit to return false so the form will not actually be submitted. This means we now have to use JavaScript to do some magic for us, and this is how the magic is going to happen for us.

The first thing that you need to do is also add at the top of the page that is going to request this form, is the loading of the ExtJS framework if it is not already loaded. As I am using the ExtJS Core then we will need to add this to the top of this template.

</p> <p><InvalidTag type="text/javascript" src="/jscript/ext-core.js"></script></p> <p>

You don't need to follow my example of the location of the ExtJS core file, as long as you know were it is located you just need to include it. I would also like to add that I am using an MVC framework called ColdBox and this is actually applied to my layout file, this means that when the form is actually loaded the framework is also loaded and this is something you need to take into consideration, because if the framework is not loaded at this time then you take this into consideration by using the Ext.onReady() or you can use the AjaxOnLoad() it is up to you and your needs at this time how you handle this.

The next step is to run some code that is going to setup this form and turn it into an Ajax aware entity, to do this we need to make sure that we now apply the following code. As mentioned above this code needs to run after the framework has loaded, so be aware of that when trying to implement this into your current project.

<InvalidTag>
   Ext.get('Name of the Form by Id').on({
      submit: function() {
         Ext.Ajax.request({
               url: 'the location of your url for taking care of this URL submit',
               method: 'POST',
               params: {
                oldPassword: Ext.get('oldPassword').getValue(),
                newPassword: Ext.get(newPassword').getValue(),
                confirmPassword: Ext.get('confirmPassword').getValue()
               }
               success: function(result) {
                  ..... Code to handle the successful call to the server.....
               },
               failure : function(test1, response){
                  .... Code to handle if the server can't be reached......
               }
         });
         return true;
      }
   });
</script>

now the above code is very self explanatory and in case your not aware this is what is happening, the first thing is happening here is that we are getting the form by it's Id and applying the submit listener to then take care of the submit. Inside this we are now defining what we want to happen when a submit happens, in this example we are going to do an Ajax request which will call the server based on the information we have provided.

you can see that in this code we are going to call the URL based on what we want to hit, and that we are going to do a post ot this URL with the parameters defined by params. Which in this example is the ID's of the input fields that we need to pass to the server.

The last thing to note here is that we are now setting up two functions, one will be for a successful reply from the server, while the other will be if the server can't be reached.

The success function doesn't need to be defined as a function as shown, but very easily be a function already programmed somewhere else. However you decide to do it the one thing you need to remember is that the success is a successful page or request from the sever, so if the conditions didn't match the validation then you need to take care of this in your code.

The failure function is the same again as this could be a function already written and you just need to provide that function name, and the one thing to remember here is that this is used to notify the user that the URL you are tyring to reach is not accessible and handle this accordingly.

That is almost all there is to this and one should be able to apply this with no troubles.


TweetBacks

RT @cfbloggers: ColdFusion and how to turn your forms into an ajax request with ExtJS core - http://cfbloggers.org/?c=44977 Oct 8, 2010
ColdFusion and how to turn your forms into an ajax request with ExtJS core - http://cfbloggers.org/?c=44977 Oct 8, 2010
Tutorial - #ColdFusion and how to turn your forms into an #ajax request with #ExtJS core - http://bit.ly/dcBqcb Oct 8, 2010

Comments (Moderated) | Add Comment

There are no comments for this entry.