Sunday, November 1, 2009

Jquery Rocks for AJAX and Grails.

I have been working with Grails and Ajax for a the last 6 months or so and I have to say it has frustrated me when I need to make calls in my javascript to one of my grails services and get results back. It just seemed like there too much extra coding I had to do to get things to work.

I am now using the jquery ajax library and love how simple they have made it. I can do so much in so little code.


$j.getJSON("/book/getList", {name:"Darren Pulsipher"}, function(data) {
...
});


Simple and compact. It appears to be the same reason I decided to work with Grails. Compact, repeatable, consistent etc... JQuery especially helps when working with multiple browsers. That all don't behave the same so having a library that already knows how to handle those differences makes programming much easier.

Tips and Tricks

So here are some of the tips and tricks that I found out on the net and by working with grails, ajax and jquery.
  1. Avoid namespace conflict in your gsp files. Put noConflict in your layout gsp files.



    I like to add this little gem to the top of my layout *.gsp(s). This means that instead of using $(...) or $.somefunction you should use $j(...) and $j.somefunction
  2. Force all AJAX communication to work without the cache.
    This is a big problem with IE browsers because they cache http results. You really see this when you are getting an callback from you ajax call but it appears to have the same information as last call you made. One way to check this is to put a print statement in the controller action that you are calling. You will find out real quickly if it is actually being called.
    $j.ajaxSetup({ cache: false });
    Again I put this in my layout gsp files and then all of my jquery script works the same.
  3. Remember that code after the $j.get or $j.get* calls will be executed before the callback function is called most of the time.
    This one can be very scary if you are not used to asynchronous programming. Order of execution is not guarenteed. So be very careful. Most of the time means not all of the time. So do not rely on information inside the callback or after the callback being there.
    $j.getJSON("/book/getList", {name:"Darren Pulsipher"}, function(data) {
    $j("#updateStatus1")....
    });
    /* Code will be executed before the callback function Most of the time. */
    $j('#updateStatus2')...

    In this case the updateStatus2 will actually be updated before updateStatus1 most of the time. You cannot be assured that this will always happen this way so be careful. DO NOT try and pass information from your callback function to the normal flow of execution. It will not work. Think of the callback function happening sometime in the future.
  4. Make sure everything works in all of the browsers the same.
    If you don't have chrome, IE, safari, and firefox on your box to try out your web interface someone will find the problem for you. This can be very embarrassing if the ones to find you buggy site is a popular blogger. I have had this happen to me before it is not pretty.

Helpful Links

No comments:

Post a Comment