including user defined javascript function in GSP

kouser neyaz

unread,

Apr 13, 2011, 8:59:30 AM4/13/11

to Grails User Group (GUG)

Hello All,
I am new to Grails and getting some issues,i am unable to include
javascript
in gsp page.I would appreciate if any one could share code to call
javascript function from textField and calendar datePicker.I need to
call a
javascript function onblur() or onfocus() or any other user defined
function.
please let me know if you need any more clarification.
Thanks in advance

Michael Johnson

unread,

Apr 15, 2011, 10:37:04 AM4/15/11

to Grails User Group (GUG)

To include JS in your gsp use tags like this:
<head>
<title>Search Page</title>
<meta name="layout" content="main"/>
<link rel="stylesheet" href="${resource(dir: 'css/treeview', file:
'jquery.treeview.css')}"/>
<g:javascript library="jquery"/>
<g:javascript src="jquery/plugins/jquery.treeview.min.js"/>
</head>

Also, if you want to create JS directly in the page than you can
specify it inside a <script> tag like so:

<script type="text/javascript">
//Write JS code here
</script>

Typically, I'll define my events (onclick, onblur, etc.) in the page
directly. So, it'll look something like this:

<script type="text/javascript">
$(document).ready(function() {
$('#elemId').click(function(){
//Do something when some clicks on element with id
'elemId'
});
});
</script>

If your still having problem accessing functions that should be there,
be sure to check and make sure that the JS library you're trying to
call is actually in the /js folder under the web-app directory. Most
problems I've seen with Grails are related to configuration issues.
Beyond that I'll need to see your <head> code and also see how you're
calling the javascript functions.

Hope this helps!

-MJ

Phoenix

unread,

Apr 15, 2011, 4:33:10 AM4/15/11

to kouser neyaz, Grails User Group (GUG)

Hi, kouser

Please refer the following sample:

1. Include the js file in folder "<your project root>/web-app/js"

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<meta name="layout" content="main"/>

<script language="JavaScript" src="${resource(dir: 'js', file: 'jquery-1.5.2.min.js')}"></script>

<title>Hello, JQuery</title>

</head>

2. Define the js function in GSP but be careful that you must put the scriptlet in the scope of <body> because of sitemesh which is the default layout engine of Grails.

<body>

........

<script>

function clearMsg(_id){

$("#msg_" + _id).html(" ");

}

function update(_id)

{

}

.......

</body>

--
You received this message because you are subscribed to the Google Groups "Grails User Group (GUG)" group.
To post to this group, send email to gra...@googlegroups.com.
To unsubscribe from this group, send email to grails+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/grails?hl=en.

--
Best Regards

**************************************************
Phoenix
Mobile : 68540371
Email : pho...@linkpower.com
Tel : 23323373
Fax : 23323335
LinkPOWER Technology Co. Ltd.
**************************************************

CONFIDENTIALITY NOTICE: This message is intended only for the use of the
individual or entity to which it is addressed, and may contain information
that is privileged, confidential and exempt from disclosure under applicable
law. If you are not the intended recipient, please contact the sender by
reply email and destroy all copies of the original message

Michael Johnson

unread,

Apr 22, 2011, 10:52:47 AM4/22/11

to Grails User Group (GUG)

> 2. Define the js function in GSP but be careful that you must put the
> scriptlet in the scope of <body> because of sitemesh which is the default
> layout engine of Grails.

This is not true. Most of my JS code lives within the <head> tag on
my pages. I don't have any problems with defining my code in the
<head> block.

It may not change anything, but it might look cleaner to use the
grails js tag:

change

'jquery-1.5.2.min.js')}"></script>*

to
<g:javascript src="jquery-1.5.2.min.js"/>

You can also use Firebug ( a Firefox plugin) to verify that the JS
source is getting loaded.
You showed me how you're defining your functions, but not how or where
you're calling them. If you're getting function not found problems,
than it's likely that the functions are being called before they're
loaded. You may want to try making your js calls from within a

$(document).ready(function() {

});

code block, if possible. This will insure that the page is loaded
(along with all js files) before actually executing any js calls.

So, I see the function definitions, but could you tell me how you're
calling them?

--MJ

On Apr 15, 2:33 am, Phoenix <phoe...@linkpower.com> wrote:
> Hi, kouser
>
> Please refer the following sample:
> 1. Include the js file in folder "<your project root>/web-app/js"

> *<head>*
> * <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>*
> * <meta name="layout" content="main"/>*
> * <script language="JavaScript" src="${resource(dir: 'js', file:
> 'jquery-1.5.2.min.js')}"></script>*
> * <title>Hello, JQuery</title>*
> *</head>*

>
> 2. Define the js function in GSP but be careful that you must put the
> scriptlet in the scope of <body> because of sitemesh which is the default
> layout engine of Grails.

> *<body>*
> *........*
> *<script>*
> * function clearMsg(_id){*
> * $("#msg_" + _id).html(" ");*
> * }*
> *
> *
> * function update(_id)*
> * {*
> * }*
> *
> *
> *.......*
> *</body>*

>
> On Wed, Apr 13, 2011 at 8:59 PM, kouser neyaz <kouser.ne...@gmail.com>wrote:
>
>
>
> > Hello All,
> > I am new to Grails and getting some issues,i am unable to include
> > javascript
> > in gsp page.I would appreciate if any one could share code to call
> > javascript function from textField and calendar datePicker.I need to
> > call a
> > javascript function onblur() or onfocus() or any other user defined
> > function.
> > please let me know if you need any more clarification.
> > Thanks in advance
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Grails User Group (GUG)" group.
> > To post to this group, send email to gra...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > grails+un...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/grails?hl=en.
>
> --
> Best Regards
>
> **************************************************
> Phoenix
> Mobile : 68540371

> Email : phoe...@linkpower.com

Phoenix

unread,

Apr 28, 2011, 6:50:31 AM4/28/11

to Michael Johnson, Grails User Group (GUG)

Hi, MJ,

I didn't use "$(document).ready(function() {});" to do sth. such as initialization, event handling etc. I used to writing them in htmI such as '<input type='button' ... onclick="clickHandle(this);">" and I know it's not a best practice because it intrudes into html source and can't be maintained well. thanks for your suggestion.

Email : pho...@linkpower.com

Reply all

Reply to author

Forward