Types of Ajax calls in Grails

What is Ajax basically???

An Ajax call is an asynchronous request initiated by the browser that does not directly result in a page transition..instead it results in transition of the desired portion of the page.....

Ajax, or Asynchronous JavaScript and XML, is an approach to Web application development that uses client-side scripting to exchange data with the Web server. As a result, Web pages are dynamically updated without a full page refresh interrupting the interaction flow.

Advantages of ajax calls are:- It basically and most importantly eliminates the page loads thereby reducing the time for the user of the web application to view any page . Also it makes the website more interactive and user-friendly...

Different types of Ajax calls in Grails:-

Search by Rollno

Search by Rollno

Enter Roll Number:

• Submit to remote :-

  The submitToRemote tag creates a button that submits the surrounding form as a remote Ajax call serializing the fields into parameters.

  This tag creates a submit button that fires an AJAX request when it is pressed.. This tag also requires the use of either the or tags.

  
  Example:

  I have created a student form and applied ajax calls of different types on the same form. Ajax is used to search the student detail on the basis of his/her roll no.

  In this form there is a search button for which I have implemented the submit to remote . The tag has to be included while implementing it..

  The code for controller and view where I have implemented the ajax call is shown below:

  The above code is for the view where I have implemented the ajax using submit to remote.. The tag has to be put inside head tag for every ajax call used in the application... For submit to remote ajax ,we use the tag . Inside this tag we have to mention the div id which has to be updated using the update field and the url inside this tag suggests the controller and the action where the call has to be forwarded....

  The div which has to be updated is written outside the g:form and will be updated with the response from the controller.... In my example I have rendered a template from the controller so the div would be updated with the response of that template.

  
  
  Name: nishtha
  
  RollNo: 102
  
  Age: 22
  
  Marks: 89
  
  Stream: science
  
  Contact: 988988098
   

   

  And in the controller I have just fetched the data of that student whose roll no has been entered..and rendered a template which is being updated in the div tag of the view.

   

  
   def showResult = {
  		
  		log.debug "roll ="+params.roll
  		String roll=params.roll;
  		
  		def student=StudentDB.findByRollNo(params.roll)
  		log.debug "student= "+student
  		
  		
  		render (template:"showResult", model:[student:student])
  		
  	}
  

  This was all about the submit to remote ajax call implementation.

• FormRemote

   

  This tag is also similar to the submit to remote and is used to Create a form tag that uses a remote uri to execute an Ajax call, serializing the form elements and falling back to a normal form submit if JavaScript is not supported. This taglib creates a form tag that uses a remote uri to execute an ajax call.

  This tag is exactly similar to submit to remote except the fact that submit to remote has to be inserted within the g:form tag to in order to submit the form as a whole to the controller and in case of form remote it itself creates the form. The tag has to be included while implementing it..

  I have implemented form remote in the same example and the code for gsp is as under. The controller’s code is same.:

• Ajax with Jquery:

   

  Ajax with jquery is sometimes also referred as the native ajax... When using in grails we need to install plugins for jquery through going to the command prompt as follows:

  
  install-plugin jquery
  
  install-plugin jquery-ui

  In the gsp where ajax is implemented, add in order to support jquery.. . Jquery is a Javascript library to ease the development of Javascript based websites and offers massive framework for frontend web development. One major part of our project is Ajax, Asynchronous JavaScript and XML. In common language you can load data into website without refreshing it.

  I have again used the same example for illustrating ajax with jquery and the code is as follows:

  Here also the code for controller is the same where I am fetching the data from the database and rendering it as model on the template

• Remote Link:

  The RemoteLink tag Creates a link that uses Ajax to call a remote function when it is clicked. The same example displays its usage.

  The below code is for the gsp where a link is created using the taglib which sends a request to the specified action of the controller and fetches the data in the div section which has to be updated.

  The code for controller is again the same.

• RemoteField

  The taglink creates a text field that sends its value to a remote link when it changes. By default the parameter name sent is called 'value', this can be changed by specifying a 'paramName' attribute.

  The below code is of the gsp file where i have used which creates a textfield.... when user enters the value in the textfield, the corresponding data from database is displayed in the div section. The textfield therefore has the attributes action and controller for sending the dynamic value to the action where the corresponding data is fetched from the controller and is rendered in a template. The code for controller’s action remains the same.

  This was all about the ajax calls in Grails. Hope the blog was helpful.