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.
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?
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 Listprintln"Student id: " + students[0].studentId//first element of the students list is accessed as a map holding a key studentId
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.
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.
<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("<input");}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.
I was working on the financial application, where the user doesn’t want to select merchant provider while feeding in credit card details and yet we needed to know the merchant provider. Following is the code that helped:
The above function returns merchant provider name if matching pattern is found and Invalid if not. Please make a note, this function doesn’t validates the credit card no.
For the credit card number validation I used jquery extended validation plugin for credit card, which also needed to know the merchant provider for validation so this code helped. Extended credit card validation plugin can be found at http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx
In my current project, I used ajax to fetch data from the server to provide Desktop Application like Experience. I wanted to automatically show an indicator when an AJAX request is ongoing, and hide it when there is no such request. So I found the following solution for both the Prototype library and the JQuery library.
Make sure the following HTML is included on every page where AJAX requests are made. (Place it in body of the main layout so that you do not have to repeat this HTML on each page.
Make sure the following javascript code has been executed before any AJAX request is made. (Move this to a js file and include it in Heading part of the main layout).
<script type="text/javascript">/*
Registering responders for prototype library.
(If you are not using prototype library then there is no need of the next statement.)
*/
Ajax.Responders.register({
onCreate:function(){
jQuery("#ajax_spinner").show();},
onComplete:function(){
jQuery("#ajax_spinner").hide();}});/*
Registering responders for jQuery AJAX calls.
*/
jQuery("#ajax_spinner").ajaxStart(function(){
jQuery(this).show();});
jQuery("#ajax_spinner").ajaxStop(function(){
jQuery(this).hide();});/*
Note : If you are not using jQuery you can show/hide the div
using javascript(e.g. document.getElementById) to do the same
*/</script>
The above trick worked for me and hope it works for you guys too.
You can create a customized, fully-interactive file tree using jQuery File Tree plugin Written by Cory S.N. LaViska. For a demo on File Explorer click here.
Here are the quick steps to implement it in your application. For advanced information please go to the plugin website where you can find the detailed description of this plugin as well as links to demo, download etc pages.
At first glance this seems to be very lengthy blog but when you start copying and pasting the code shown here into your application you will get this lengthy explanation very useful.
Here is a snapshot of what we are going to achieve in few minutes.
Install jquery plugin
jQuery File Tree requires jQuery 1.2 or above.If you have already installed this plugin then you can skip this step.
To install jQuery plugin use the following command :
grails install-plugin jquery
To get the list of commands to manage plugins (eg. create, install, uninstall, list of plugins) use the following command :
Unzip the downloaded zip file. The unzipped folder ‘jqueryFileTree’ contains a folder ‘connector’ that you can safely delete because we will write our own connector specific to grails.
place the unzipped folder into web-app folder
Using operating system file explorer tool move/copy the unzipped folder ‘jqueryFileTree’ to the applications web-app folder. If you are not interested in such an easy step then you can move the jqueryFileTree.js file to web-app/js folder, jqueryFileTree.css file to web-app/css and all the files from jQueryFileTree/images to web-app/images folder and correspondingly change the reference to these files in gsp page we will be creating next. I assume you followed the easier way i.e. copied the entire folder into web-app folder.
Decide the controller, action and gsp page
Suppose we have a controller ‘FileBrowser’(…grails-app/controllers/FileBrowserController.groovy) and its ’showBrowser’ action renders the view (we call it : …/grails-app/views/FileBrowser/FileBrowser.gsp). The controller looks like class FileBrowserController {
//...............
def showBrowser = {
//.................
render( view : 'FileBrowser')
}
//................
}
Create gsp page and customize it
Here is the contents of “/grails-app/views/FileBrowser/FileBrowser.gsp” file :
DESCRIPTION #1: absoulute path of the folder which will be treated as root level folder in our file explorer. There exists a potential for malicious individuals to be able to view your entire directory structure by spoofing the root parameter. However you can control this from the script file described in DESCRIPTION #2.
DESCRIPTION #2: connector file(server side script) that generates the list of files and subdirectories for the selected folder. This is a gsp file where you get the absolute path of the folder in dir attribute of params map for which the files and subfolders is to be found and output an unsorted list in the following format:
We will create this gsp page parallel to FileBrowser.gsp i.e. …/grails-app/views/FileBrowser/generateFileList.gsp in Step 6. Later we will move this logic into an action and hence no need of connector script (see step 8).
DESCRIPTION #3: this javascript function is called with absolute path to the selectd file whenever a file is clicked in the file browser page.
DESCRIPTION #4: The id of the div tag is used in jQuery. So it must match at both places.
Create connector script
Here is the code for connector script "...grails-app/views/FileBrowser/generateFileList.gsp"
<%
String dir = params?.dir
if (dir == null) {
return;
}
/* you can put here your own custom check with dir variable to protect from malicious request. */
if(!dir.endsWith(File.separator)){
dir+=File.separator
}
File f=new File(dir)
if (f.exists()) {
List<File> files=[]
f.eachFile { File file->
if(!file.hidden)
files<<file
}
files.sort{File file-> file.name.toUpperCase()}
StringBuffer output=new StringBuffer('<ul class="jqueryFileTree" style="display: none;">')
// All dirs
files.each{File file->
if(file.directory){
output.append("""<li class="directory collapsed"><a href="#" rel="${dir+file.name+File.separator}">${file.name}</a></li>""")
}
}
// All files
files.each{File file->
if(file.file){
int dotIndex = file.name.lastIndexOf('.');
String ext = dotIndex > 0 ? file.name.substring(dotIndex + 1) : "";
output.append("""<li class="file ext_${ext}"><a href="#" rel="${dir+file.name}">${file.name}</a></li>""");
}
}
output.append("</ul>");
println output.toString()
}
%>
Test Your File Explorer
It’s time to test your file explorer. If everything went perfectly then you have successfully created your file explorer. Type the url of the action responsible for rendering FileBrowser.gsp.You can also experiment with various Parameters that are passed as an object to the fileTree() function in FileBrowser.gsp. List of Valid options can be found at the pluging website under ‘Configuring the File Tree’ heading.
Moving the connector script to an action of the controller
Here is the modified controller FileBrowserController having an action generateFileList. This contains the same code as in generateFileList with few new statements appended and obviously <% and %> has been removed.The modified lines has been shown in different color.
class FileBrowserController {
//……………
def showBrowser = {
//……………..
render( view : ‘FileBrowser’)
}
def generateFileList={
String dir = params?.dir
if (dir == null) {
return;
}
/* you can put here your own custom check with dir variable to protect from malicious request. */
if(!dir.endsWith(File.separator)){
dir+=File.separator
}
File f=new File(dir)
if (f.exists()) {
List<File> files=[]
Making changes to FileBrowser.gsp to use generateFileList action instead of generateFileList.gsp file
Here are the modified lines of FileBrowser.gsp file (Modified lines shown in different color ) :
$(document).ready(function() {
$(‘#file_list’).fileTree({
root:’/',
script: “${createLink(action:’generateFileList’)}”, /* you can also explicitly specify the controller */
expandSpeed: 1000,
collapseSpeed: 1000,
After this change, you can test your File Explorer and if everything works perfectly, you can safely delete the file generateFileList.gsp.
Forwarding to an action when a file is clicked
To do so we will modify FileBrowser.gsp page to include a form and a hidden field for absolute path of the selected file.
The modified FileBrowser.gsp(with modified lines shown in different color) is now :
Now add an action ‘processThisFile’ or whatever you have used as forms action in FileBrowser.gsp file. Here is the modified FileBrowserController :
class FileBrowserController {
//…………… def processThisFile={
println params.selectedFile
render(params.selectedFile)
}
//…………….
}
Installing the plugin for Context Menu(Right Click)
Now we are going to add Context Menu functionality to our File Explorer. For this purpose we will be using one more plugin jQuery Context Menu Plugin Written by Cory S.N. LaViska(same author has written jQuery File Tree plugin). For advanced details go to the plugin website where you can see a demo as well as download necessary files to use this plugin. Click here to download the plugin.
After you have downloaded the zip file, unzip it and copy it in applications web-app folder as you did for jQuery File Tree Plugin in Step 3.
Create context menu options by Modifying FileBrowser.gsp file
create a list in FileBrowser.gsp that will be the markup for your context menu:
Actions are specified in the href attribute, preceeded by a # symbol. When selected, this is what will be passed back to the action parameter in the callback. You can add class attributes to the list items to assist with styling, but they have no functional meaning. Thus, class names do not have to correspond with actions.
Let’s create a contextMenu (UL with id myFolderMenu) with four options cut, paste, rename and delete also a separator beteween paste and rename option which is displayed whenever a folder is right-clicked. When you click an option from the displayed context menu the javascript function HandleFolderContextMenu is called with parameters action and folderPath. action contains the href attribute excluding # character of the selected context menu option and folderPath contains the absolute path of the selected folder i.e. on which it was right clicked.
Similarly a contextMenu(UL with id myFileMenu) with two options Open… and Properties which is displayed whenever a file is right-clicked has been created. Like Context Menu for folders, this time HandleFileContextMenu javascript function is called with action and filePath parameters.
You can follow the similar steps as described in Step 10 to forward request to an action where it will be processed depending on the action and absolute path to the selected file or folder.
Finally modify generateFileList action by adding a statement output.append(““) as shown below the modified lines of generateFileList action to get the changes made to FileBrowser.gsp to work. It just calls the showMenu javascript function defined in FileBrowser.gsp which in turn enables the context menu for the explored folder.
How to use $.getJSON() method of jQuery with grails?
Retriving a JSON string from Grails is very easy. You have to just write the following in your controller’s action
Let me explain you with an example of populating a HTML table using JSON response:
In this example, we have table with columns – name,address and gender. We want the table to be populated without doing a full page refresh, using an Ajax call.
Domain Class:
class MyDomain {String name
String address
String gender
}
Controller Class :
class MyController {def someaction ={List myDomains = MyDomain.findAllByGender(params.gender)<em>/*Let say 5 objects are retrieved*/</em>
render myDomains as JSON
}}
The above code in action will render a JSON string in the following format:
In web application development, use of frameworks has become essential . One of those frameworks which help us in making things simpler and life easy is jQuery.
Why jQuery ?
Fully Documented
Great Community
Tons of plugins
Small size(14kb)
Everything works in IE 6+,Firefox,Safari 2+,and Opera 9+
jQquery is a very efficient framework which helps us in developing many things in a much easier way than they would be without using any framework.
At IntelliGrape we are using Grails and jQuery on a project.
In this blog, I want to share one of my experiences that I had met in this course of time. A series of mails/questions in Grails mailing list on creating chained selects/drop-downs prompted me to write this blog; since I had already done this.
Chain select basically means populating the next drop-down on the basis of what you select in the present drop-down.
In this example, we have two drop-downs – manufacturer and model. We want the model drop-down to be populated on the basis of what the user selects in the manufacturer drop-down, without doing a full page refresh, using an Ajax call.
Here are my classes, not the whole class but a part of the class
Vehicle Class
public class Vehicle {Manufacturer manufacturer
Model model}
The Manufacturer and model classes look like this
Manufacturer Class
public class Manufacturer {
String manufacturerName
static belongsTo = Vehicle
static hasMany = [models: Model]
}
Model Class
public class Model {
String modelName
static belongsTo = Manufacturer
}
For this the vehicleCreate.gsp should look like this
Now we will look at how this chained selection works using jQuery.
Now what all we are left-out with is handling this event in the VehicleController which is as simple as any other controller action. Just add manufacturerSelected action in the controller and we are done!VehicleController
