Skip to main content

Partial page loading with Grails and Jquery


Most web applications greet their users with a fancy dashboards to display various statistics of interest. The generation of dashboards are often resource consuming and therefore it is advisable to optimize the page loading time. One option is to display page content while showing certain parts of the page in loading state. In this tip, this is achieved by partially loading parts of the page by using jQuery - javascript ajax library. Though I used Grails in this sample, it can be used for other web programming languages/platforms.



If you landing page is index.gsp or dashboard.gsp, add the following steps.

1. First step is to load the jquery script.






2. Create a place holders for partial loading of the page. I used a table with cells to load the content. 


 










   
    
     

       loading ...
     

    		    
     
loading ...

    		    
       
loading ...

    		   
   
     
       
loading ...

     		     
        
loading ...

     		     
       
loading ..



3. Create a jquery function to load parts of the pages using ajax.








In the html table tag I used, html elements (div) with ids f1, f2, f3, etc). The jquery load scripts, we are loading each part with function similar to the one below.

$('#f1').load('${createLink(controller:'dashboard', action:'openTickets'}');



You can have a gsp with name openTickets.gsp to render the results generated by the action, 'openTickets' as given in the example. openTickets.gsp need not have usual html, head, body tags. It can simple render a part of the page by using a div tag.







Visit the following link for live demo with the credentials.
user: nitorics
pwd: welcome

http://www.nitorics.com/2010/09/live-demo/

Labels

Labels:

Comments

  1. AnonymousMarch 17, 2011 at 12:25 PM

    Thanks for this great post... It was exactly what I am looking for.
    I received an error when running your code, due to the following line(s)
    $('#f1').load('${createLink(controller:'dashboard', action:'openTickets'}');
    In this post, the closing brackets of createLink is missing, so the correct line would be
    $('#f1').load('${createLink(controller:'dashboard', action:'openTickets')}');

    Thaks & Best Regards,
    André

    ReplyDelete
  2. AnonymousFebruary 25, 2012 at 11:43 PM

    Thank you very much for this post, I spent more than one week looking for something like this.

    ReplyDelete

Post a Comment

Popular posts from this blog

Grails - cross-field Date validation

Often we run into domain classes with date fields. If the domain class has two datefields, startDate and endDate, and the rule for a valid combination is "endDate to be greater than startDate", how do we handle? I listed below two of the options, either using domain level constraints or using the domain classes. Option 1: Using domain constraints. Let us take a sample Grails Domain class class Student{ String name String school Date startDate Date endDate } Add the following constraints to enforce validation rules where name, school, startDate cannot be blank and endDate if present should be greater than startDate.
5 comments
Read more

Implementing advanced sort in Grails

The "list" pages generated by inbuilt scaffolding/template features of grails have pagination and sorting features. However, if the domain object displayed in the list is a nested object having another domain object as a property, you may notice that sort is not enabled for that field. Boiler plate code for the header of the list is shown below. As you would have noticed few columns have sortable columns automatically generated by Grails command, generate-all or generate-views. The properties 'partyAccount' and 'bankAccount' in this sample are domain classes nested in the domain class 'partyTransaction'. We could convert them to sortable columns by using the tag g:sortableColum...
2 comments
Read more

CCAvenue and Magento Integration

India based e-commerce portals have to consider CCAvenue Payment Gateway as one of option for its simplicity and reliability. Magento e-commerce platform has several ready to use payment gateway plugins and a rich set of API to enhance its functionality to add new payment gateways that are not provided as part of its standard release. For one the projects we have to integrate Magento with CCavaenue. We browsed several forums for a free and ready to use plugin without much luck. Though there is no mention of any such plugin on CCAvenue website, we just tried calling the CCAvenue help desk and immediately we got an integration toolkit with detailed steps for integration. It works like a charm.
8 comments
Read more