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:

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

Grails - Querying complex associations

Criteria class allows performing complex searches on grails objects. There are number of shortcut methods for performing queries but these methods have limitations in terms of number of conditions used in "where clauses". Traditional sql "joins" are not possible as shown in some of the Grails "Finder" methods shown below. Sample 1: def list = AccountTransaction.findAllByCompanyCodeAndVoucherDateBetween(branch, fromDate, toDate, params) Sample 2: def list = AccountTransaction.findAllByCompanyCodeAndVoucherDateGreaterThanEquals(branch, fromDate, params) Sample 3: def list = AccountTransaction.findAllByCompanyCodeAndTransGroup(branch, group, params) "params" contains attributes related to sorting, paging etc. It is very easy to use finder methods but when you want to filter objects by more conditions we need to look for alternatives. For understanding the relationships used in this sample, I listed the grails domain classes. class TransactionTyp
4 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