Intelligrape Groovy & Grails Blogs » jquery

JQuery : create URL query string from JSON/Array

Amit Jain — Wed, 04 May 2011 06:46:45 +0000

Hi Friends,

I was writing javascript to reload my page with different parameters. So I needed to create the queryString of those parameters but I didn’t want to create it of my own. I already knew about jQuery.serialize() which serializes the form and creates the queryString, but unfortunately I didn’t have form. So that gave me opportunity to learn about new jQuery.param() which converts the JSON/Array into query string. Let us look at few examples below :

var myParams = {country:"US", customerId:"1"}
jQuery.param(myParams);

Output: "country=US&customerId=1"

var myParams = {name: "Amit Jain",days:['Mon','Tue','Sat'] };
jQuery.param(myParams);

Output: "name=Amit+Jain&days%5B%5D=Mon&days%5B%5D=Tue&days%5B%5D=Sat"

var myParams = {name: "Diana",address:{
  line1:"232 Alder Dr.",
  line2:"Alder City",
  state : "Utah",
  country: "US"
}};
jQuery.param(myParams);

Output : "name=Diana&address%5Bline1%5D=232+Alder+Dr.&address%5Bline2%5D=Alder+City&address%5Bstate%5D=Utah&address%5Bcountry%5D=US"

Hope this helped!

Cheers!

~~Amit Jain~~
amit@intelligrape.com

http://www.intelligrape.com

File Uploading using plupload plugin of jquery.

Anuj Aneja — Mon, 14 Feb 2011 12:50:10 +0000

In my grails project i was having the requirement of having multiple file uploading, but in current implementation there was the problem of button being not loaded in Internet Explorer.For that i found plupload very cool to implement this. It has very cool feature of drag and drop and support for almost all browser. Actually what it does is based on the browser, get the Runtime of the browser.For Documentation, js and css refer link

In gsp we need to include the js of pluplaod api as shown below:

Now we need to write script to load and bind the plupload plugin shown below:

	
	
               
                      Select File

Now we need to handle the saving part of the file,for each file uploaded in Queue there is separate call to
the action.It saves the file to the filePath specified.

def saveAttachment={
      def files = request.getFileMap()
      def file=files.get("file")
      String fileName = file.getOriginalFilename()
      byte[] data=file.getBytes()
      File dir=new File(filePath)//some path...
      if(!dir.exists()){
         dir.mkdirs()
      }
      File actualFile=new File(filePath, fileName)
      actualFile.withOutputStream {out ->
             out.write data
      }
}

Disclaimer: As in some cases you might want to can the upload of all the files as there is a different call to action of you can save there files in session, but session for this plupload is different from current user session so you will have to make your own session handling for that!!!

Note:The total length of files upload and and total uploaded differs in case IE and Firefox. The comments and any suggestions are welcomed.

Hope it help you guys! Cheer!

Anuj Aneja

http://www.Intelligrape.com

JQuery script to put focus on first field of any page

Vishal Sahu — Thu, 13 Jan 2011 15:03:56 +0000

Hi,

In my recent grails project, i needed to put focus on the first field of any page whenever the page loads. The requirement is such that if the page contains errors then the focus should be on the first input field which has errors.

I searched a lot and with the help of my colleague we came out with a simple JQuery script to put focus on the first input field on any page whenever the page loads.

The script i used is:-


   if (jQuery('.errors').size() > 0) {
       jQuery('input.errors:first').focus();
       jQuery('.errors input:visible:first').focus();
     }
   else {
      jQuery('input:text:visible:first').focus();
    }

I put it in the layout and it works for every gsp which has that layout.

It worked for me.
Hope it Helps.

Vishal Sahu
vishal@intelligrape.com
www.intelligrape.com

Jquery : map and grep functions

Amit Jain — Sun, 14 Nov 2010 19:32:25 +0000

Hi friends,

I was going through some utility funcitons being provided by jQuery. Found few methods like grep, map very userful that saves me from writing loops. I could relate them with grep, collect respectively as provided by Groovy, thought would share with you.

I will be taking examples with JSON objects say Student.
grep()

var students = [ {'id':1, 'name':'amit'},{'id':2, 'name':'ankit'}];
jQuery.grep(students,function(student){ return student.id>1});

//Output :  [{'id':2, 'name':'ankit'}]

jQuery.grep(students,function(student){ return student.id>1}, true) // invert the results

//Output : [ {'id':1, 'name':'amit'}]

map()

 var students = [ {'id':1, 'name':'amit'},{'id':2, 'name':'ankit'}];
jQuery.map(students,function(student){ return student.name=student.name.toUpperCase()});

//Output : ["AMIT", "ANKIT"]
//Updated students list :  [ {'id':1, 'name':'AMIT'},{'id':2, 'name':'ANKIT'}];

jQuery.map(students,function(student){ return student.greetings="HELLO " + student.name});

//Output : ["HELLO AMIT", "HELLO ANKIT"]
//Updated students list : [ {'id':1, 'name':'AMIT', 'greetings' : 'HELLO AMIT'},{'id':2, 'name':'ANKIT', 'greetings' : 'HELLO ANKIT'}]

Hope this helped.

~~Amit Jain~~
amit@intelligrape.com

Asynchronous behavior of AJAX

Bhagwat Kumar — Tue, 14 Sep 2010 15:36:27 +0000

Ajax (shorthand for Asynchronous JavaScript and XML) is used to retrieve data from the server asynchronously without interfering with the display and behavior of the existing page. Forgetting this asynchronous behavior will produce incorrect result if it depends on the response from Ajax call.

Lets take an example(I am using JQuery to illustrate the example). Here is a JavaScript function to perform server side check of the form. Depending on the response of Ajax call the function either submits the form or does nothing.

function submitForm(){
	var isFormValid=false;
	var dataToBeSent=$('form').serialize();
	$.get(url, dataToBeSent, function(result){
		isFormValid=result;
	})
	if(isFormValid){
		$('form').submit();
	}
}

The statement $('form').submit() will never be called irrespective of the result (AJAX call response). After executing $.get statement it will execute the next statement if(isFormValid) without waiting for the statement isFormValid=result inside the callback function to be executed.

There exist a dirty solution for the problem : using JavaScript sleep API. But how long you are going to halt the execution of JavaScript code. You are back to the same problem of getting the incorrect behavior.

One good solution is to make the $.get call synchronous by making changes to the global AJAX configuration like :

$.ajaxSettings.async=false;

or using calls like :

$.ajax({type: "GET", url: url, data: dataToBeSent, success: function(){
		isFormValid=result;
	}
});

Now the if(isFormValid) statement will be executed only after the $.ajax statement has completed its execution. However this approach has its own drawback. Obvious one is the execution of JavaScript halts until it receives the response.

However the better solution is to execute $('form').submit() inside the callback function like :

$('submitButton').click(function(){
	var isFormValid=false;
	var dataToBeSent=$('form').serialize();
	$.get(url, dataToBeSent, function(result){
		isFormValid=result;
	if(isFormValid){
		$('form').submit();
	}
	})
return false;  // Needless if the button is not a submit button
})

return false statement at the end of the function prevents the form from being submitted. Now the form submission code will be executed only after the response to $.get statement is true.

There exist JQuery plugins (e.g. JQuery validation plugin) for doing form validation in a better way where you get support for server side validation also. But the case discussed above was to make you understand the asynchronous behavior of AJAX calls.

Hope this helps you while using Ajax.

Cheers,
~~Bhagwat Kumar~~
bhagwat(at)intelligrape(dot)com

http://www.intelligrape.com

jQuery: Floating message box which disappears in few seconds

Amit Jain — Mon, 13 Sep 2010 19:01:24 +0000

Hi Friends,

Recently in one of the project I was working on, had a long web page and updates used to happen only through ajax calls that means no page refresh. The status messages used to appear on the top of the page, the user had no way but to scroll up to see the status message. There we thought of using floating message that always appears on the top and floats as and when page is scrolled and also disappears itself after specified amount of time. I found one blog by Roshan that helped a lot, which I tweaked a little as given below.

CSS code to be added :

#message_box {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #ffc;
    padding: 5px;
    border: 1px solid #CCCCCC;
    text-align: center;
    font-weight: bold;
    width: 99%;
}

Html code containing message : :-

<div id="message_box">Your message goes herediv>

Call setupMessageBox() when message is available.

<script type="text/javascript">
  var updateTimer = 0;
  function setupMessageBox(){
    showMessage(); //displays message on page load
    jQuery(window).scroll(function() {
       showMessage();
    });    
    clearTimeout(updateTimer);
    activateTimer();
  });
 
  function activateTimer() {
    updateTimer = setTimeout('jQuery("#message_box").remove()', 5000);
  }
 
  function showMessage(){
      jQuery('#message_box').animate({top:jQuery(window).scrollTop() + "px" }, {queue: false,duration:350});
  }
script>

Hope this helped!

Cheers,
~~Amit Jain~~
amit@intelligrape.com

http://www.intelligrape.com

jQuery Alert Message without using traditional javascript alert-box.

Salil — Mon, 14 Jun 2010 16:50:30 +0000

This post might help you if you want to display alert messages without using tradition javascript (irritating) alert.
To achieve this you need jQuery for your frontend UI.

Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically.

function displayAlertMessage(message) {
var timeOut = 5
jQuery('#messageBox').text(message).fadeIn()
jQuery('#messageBox').css("display", "block")
setTimeout(function() {
jQuery('#messageBox').fadeOut()
jQuery('#messageBox').css("display", "none")
}, timeOut * 1000);
}

messageBox is id of your div tag where you want to display the Alert Message.
timeOut is number of seconds you want to hold message on screen.
That’s it. So simple and quite comfortable from a user’s perspective Isn’t it?

Cheers!!
Salil Kalia

JQuery: Send JSON Objects with an ajax request

Amit Jain — Fri, 11 Jun 2010 10:30:09 +0000

Hi Friends,

Lets discuss today about sending JSON objects with ajax request using JQuery. We have number of functions in jQuery to kick-off an ajax request. But for sending JSON objects along with the request, I chose jQuer.ajax(). It takes various parameters url, type, data, dataType, beforeSend etc. Its API can be found here.

Lets look at example given below:

jQuery.ajax({
          url: <Url of the action>,
          type: "POST",
          data: {name: "amit", id:1 },
          dataType: "json",
          beforeSend: function(x) {
            if (x && x.overrideMimeType) {
              x.overrideMimeType("application/j-son;charset=UTF-8");
            }
          },
          success: function(result) {
 	     //Write your code here
          }
});

The above example works for simple JSON object. Now lets see how we can send JSON objects list as given below:

var jsonObjects = [{id:1, name:"amit"}, {id:2, name:"ankit"},{id:3, name:"atin"},{id:1, name:"puneet"}];
 
jQuery.ajax({
          url: <Url of the action>,
          type: "POST",
          data: {students: JSON.stringify(jsonObjects) },
          dataType: "json",
          beforeSend: function(x) {
            if (x && x.overrideMimeType) {
              x.overrideMimeType("application/j-son;charset=UTF-8");
            }
          },
          success: function(result) {
 	     //Write your code here
          }
});

If you notice, for sending my json objects it has not been written directly as data: jsonObjects. As it expects the JSON object passed to it written as key value pair. So we made students the key. And since we have json objects stored in a variable, we need to expand the json objects list using stringify(), otherwise it would be sent as a java script object.

Now on the server we can parse the JSON object, and use it as the list of objects of type map. For example

//this code is written in grails 
import grails.converters.JSON;
List<JSON> students = JSON.parse(params.students) //students in request params is parsed to json objects and stored in the List
println "Student id: " + students[0].studentId    //first element of the students list is accessed as a map holding a key studentId

Hope this helpled!

~~Amit Jain~~
amit@intelligrape.com

http://www.IntelliGrape.com

jQuery : Chaining of your custom function calls

Amit Jain — Fri, 04 Jun 2010 10:57:05 +0000

Hi Friends,

I always used to think how jQuery provides the chaining mechanism, must be something really complex so never cared to find it out. Though there was a desire to to use the same concept in my own custom javascript functions. Recently I realised how easy it is, so thought would share with you with the help of an example.

jQuery.fn.getStudents= function(count) {  //count is the parameter name and getStudents is the function name.
//write your code here
...
return myObject  //return is optional
});

Now we can access the above function using dot operator on jQuery Object.

jQuery("#myListId").getStudents(5);

Please make a note the object returned by the previous function is made available to the chained functions as “this” object, that is one of the reason chaining became so useful. So in the above function getStudents(), “this” object would refer to the object returned by jQuery(“#myListId”).

Remember, to have chaining upto multiple levels, it becomes the obligation for the calling function to must return an object/value to the chained function being called on it.

jQuery.fn.highlightNames= function() {
//write your code here
jQuery(this).find(...);
...
});

Now we can access the above function i.e highlightNames() using dot operator even on another function.

jQuery("#myListId").getStudents(5).highlightNames();

Here I didn’t have to passes the students object to highlightNames, as it was available as a “this” object.

Hope it helped!

~~Amit Jain~~
amit@intelligrape.com

http://www.intelligrape.com

Monitoring ajax call response

Bhagwat Kumar — Thu, 04 Mar 2010 06:31:13 +0000

Recently I have faced a problem of monitoring all the ajax calls. Based on the response from server I have to perform some task depending on the contents of response. If the html response contains some text input field, the first text input field should be automatically focused otherwise leave the response as it is.

Here is the javascript code :

<script type="text/javascript">
            jQuery("#ajax_spinner").ajaxComplete(function(event, xhr, options)
            {
                var data = jQuery.httpData(xhr,options.dataType);
		/* 
                 Now data contains the responseText if the response type
		 is text/html or text/palin otherwise it is undefined.
                 */
                var inputFieldIndex=-1;
                try{
			/* try-catch because data may be undefined as mentioned above. */
			inputFieldIndex=data.indexOf(");
		}catch(err){}
                if(inputFieldIndex>-1){	
                   /* response contains input tag */
                    jQuery('input:text:visible[disabled=false]:first').focus();
                }
            });
 
          });script>

The above trick worked for me and hope it works for you guys too.

Helpful links :-
http://api.jquery.com/ajaxComplete/

~~~~Bhagwat Kumar~~~
bhagwat@intelligrape.com