in my grails app, I'm using the awesome resource plugin which wires all the dependencies. When I'm doing the ajax calls I always use <r:layoutResources disposition="defer"/> in order to render all scripts <r:script>... and other dependencies property.
The problem is if I use <r:require module="myModule"/> and the module specify a JS file which was not loaded before (when the page was not loaded). After the AJAX call the JS file is not loaded, what is more or less expected because all JS file should be loaded when the page is rendered.
My question is how to solve it properly? Should I put my r:require to the gsp which is rendered during the first request? Or are there any plans to make the r:require deal with "external" JS files when AJAX?
Thanks,
Mateo
Create a layout ajaxInternal.gsp and put in something like:
<r:require module="gaScript" />
<r:layoutResources />
<g:layoutBody />
<r:layoutResources disposition="defer" />
And in your ajax action of controller render this:
render(template:"aTemplateIfRequired", model:[yourModel],layout:'ajaxInternalContentBox')
So all your js will work properly and all your modules also.
Related
So i read the requirements for using r:require tag in Grails Load r:require are that,
Requires 1st g:layoutResources before head closure
Requires 2nd g:layoutResources before body closure
But i'm doing a modal on my GSP page and i need to use jqgrid resource defined on the applicationResources.groovy on it. And the modal has neither head nor body tag on it, only some g:set and div tags.
The jqgrid is defined inside the tag inside the modal's gsp file. I tried to put the following
<r:require module='jqgrid' />
<r:layoutResources />
before and after the script tag, or outside of the div tags, but still not working.
So where should i define the r:require so that i can use jqgrid resource for my modal?
I have a grails resource module set up:
modules {
myModule {
resources url:'js/application.js'
resources url:'js/helper.js'
}
}
And I can load this onto my GSP page using <r:require ... />.
Problem:
I want some JS code to fire when this script has loaded. Is there anyway to do this?
Even if I could do it via JS (script.onLoad) that would be ok, I'm just not sure how to generate a link to the module using grails.
You can include your module in your GSP page as:
<r:require modules="myModule" />
and you can fire any java script function in you js files on page load.
in case your module will not get loaded on the GSP, try adding disposition, i.e.
modules {
myModule {
resources url:'js/application.js', disposition: 'head'
resources url:'js/helper.js', disposition: 'head'
}
}
I think better way to include your resources on the view pages, is through layout, I used to do it like, adding all the resources on the layout page, ex. layout->main.gsp
add all the required resources on this page as:
<r:require
modules="myModule" />
<g:layoutHead />
<r:layoutResources />
then on all the GSP pages in the application you can apply this layout, i.e.
<g:applyLayout name="main"/>
and to call any java script code(on the included js files) on script load, I think you should associate it with the onload event on the gsp page.
According to the answer provided by REMESQ on this question: Is it possible to use razor layouts with Orchard CMS and bypass the theming
I was able to have separate layout and pages for a module bypassing Orchard's themes and layouts. But having problem referencing the cs,js script files (located in different folders of the module). Getting 404 NotFound error.
I tried referancing in the following way:
#Script.Include("~/Scripts/jquery-1.9.1.js")
But cant get the correct reference path rendered attached picture
Your URL is wrong - it should be either:
jquery-1.9.1.js. Without leading tilde and Scripts/. Orchard will make sure the final URL will lead to /Scripts folder in your current module, or
~/Modules/Your.Module/Scripts/jquery-1.9.1.js
it works if written in this way:
<link href="~/Modules/ModuleName/Styles/site.css" rel="stylesheet" type="text/css" />
For the image tags in html we can write like this:
<img alt="" src="~/Modules/ModuleName/Styles/images/for-rent.jpg" />
I'm using the Resources plugin in Grails 2.0.1. The issue I'm having is getting a JavaScript resource specified using r:external to be placed after all of the other script previously declared using either r:require or r:external, all in the deferred disposition. Currently the resource specified using r:external it is being output in the location where the r:external tag is placed.
I have a layout file that contains an r:require tag to fetch some core resources:
<html>
<head>
...
<r:require module="core" />
</head>
....
</html>
Then a GSP that includes another r:require tag followed by an r:external tag:
<head>
...
<r:require module="forms" />
<r:external dir="js" file="page-specific-resource.js" /> %{-- specifying disposition="defer" has no effect --}%
....
</head>
...
My expectation is each of the JavaScript resources I'm trying to include would be output in the deferred disposition with the core resources first, the forms resources next, and the page-specific resource last. The actual results are that the core and forms resources are output as expected in the deferred disposition, but the page-specific resource is output in head, where the r:external tag is placed (Specifying disposition="defer" seems to have no effect).
Is my expectation incorrect or is this a legitimate issue? Is there another way to specify page-specific resources (I'm trying avoid declaring these types of resources in the resource DSL) and have the positioned after all previously declared resources?
As answered by Marc Palmer on the Grails User mailing list (http://grails.1312388.n4.nabble.com/Placement-Of-JS-Resource-Via-lt-r-external-gt-td4506074.html#none):
I'm afraid your expectation is incorrect.
r:external is just for rendering links where you invoke it.
You need to declare your dependencies, or put your r:external at the
end of the page.
Declaring modules for "functional areas" of your app is profitable. It
means you can also bundle them together if need be, or have fine
grained control and the page no longer needs to be aware of that.
I'm just trying to set up an input with datepicker and I'm getting the following error: "Object doesn't support this property or method".
I downloaded the JQueryUI without a theme and there is my head section of the master page:
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript" />
<script src="/Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
After that, I created an input text inside a partial view (that remains inside a view):
<input type="text" id="txtDataIda" />
And at the beggining of this partial view:
$(function() {
$("#txtDataIda").datepicker();
});
When I open the page, the error is shown and the datepicker won't work.
I suppose I must be doing something wrong since I've never got the chance to work with JQueryUI before.
Thanks in advance!
You should go to http://jqueryui.com/download and build a custom download with the features that you want. Then, just reference the 2 files (jquery-1.4.2.js, jquery-ui-1.8.5.custom.min.js) in the "js" folder and not all of the files in the "development-bundle" folder. Then, you don't have to worry about multiple files conflicting. I have a feeling that the .widget, .datepicker, and 1.8.custom files may be conflicting. But, if it's all in one custom file, then you don't have to worry about that.
Or if you're not using any other ui features, you could try referencing only the jquery-1.4.2.js, ui.core.js, ui.datepicker.js files to see if that works without conflict.
And, of course, double check that you've put the references in the correct master page that is being used.
Fixed!
The JQuery wasn't being loaded, because the script tag was self closing. When I changed it to , it worked, as bizarre as it seems.
Thanks!