Geekly Articles each Day
📜 ⬆️ ⬇️

Grails, jQuery, AJAX: First Meet

Add jQuery to Grails


Actually, there are no problems with AJAX in Grails : controllers can easily return JSON data, GSP pages can use corresponding auxiliary tags .

By default, Grails is friends with Prototype JS. However, you can install the jQuery plugin with a flick of the wrist .

grails install-plugin jquery

JQuery 1.4.x will be installed. Next, we need to declare jQuery as the “JavaScript provider” in Grails. In this case, all the built-in Grails tags will start working through jQuery.
')
Add a line to grails-app / Config.groovy :

grails.views.javascript.library="jquery"

Since we want all pages of our application to start using jQuery, we will immediately add to the main layout file (by default, this is grails-app / views / layouts / main.gsp ) in the HEAD section:

 <html>
   <head>
     ...
     <g: javascript library = "jquery" />
     ...
   </ head>
 ...
 </ html>

Now on each page of the application jQuery will be automatically loaded.

We write something on jQuery


We have already earned such, for example, designs:

 <div id = "ajaxContainer"> Nothing here. </ div>
 <g: remoteLink action = "show" id = "1" update = "ajaxContainer"> Update! </ g: remoteLink>

If you look at it in runtime, you will see that the jQuery.ajax () function is implicitly used.

Looking in the web-app / js / application.js , we find that the generated (using grails create-app ) AJAX-indicator code is written for Prototype. The built-in display looks crooked (for my taste), but if you really want it to work, you can rewrite the code in jQuery:

 jQuery (document) .ready (function () {
   jQuery (document) .ajaxStart (function () {
     $ ('# spinner'). show ();
   });
   jQuery (document) .ajaxStop (function () {
     $ ('# spinner'). fadeOut (500);
   });
 });

We write the controller


Finally, write a controller suitable for working with AJAX. For example, let's return a random number from the controller in the form of JSON:

 def random = {
     def max = params.int ('max')
     render (contentType: "text / json") {
	 rnd = new Random (). nextInt (max)
     }
 }

Here we use the new version of JSON builder from Grails 1.2.x. The controller will result in a JavaScript array of the form {rnd: 34} , which we can use, for example, like this:

 <p>
   Random number:
     <input type = "text" name = "rnd" id = "out" value = "" />
     <g: remoteLink action = "random" 
         params = "[max: 100]" 
         onSuccess = "\ $ ('# out'). val (data.rnd);"> Generate! </ g: remoteLink>
 </ p>

Here, from the JSON result (which in our case falls into the data variable), the value of rnd is selected and entered into the text field.

In parentheses, I note that the "transparency" of replacing one JavaScript provider with another works only up to a certain point. As soon as you go beyond the Grails embedded AJAX tags and start using jQuery functions (as in the example above), compatibility with other providers is immediately lost.

Source: https://habr.com/ru/post/92248/

More articles:


All Articles