Grails: <script> vs. <g:javascript> - javascript

Can anyone please explain the difference between these two tags and how Grails sees one vs. the other? I have a table with click and hover effects which don't seem to happen when I import jquery using:
<g:javascript library="jquery" />
but do when I do this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
and I want to use the previous tag because other Grails tags such and remote forms rely on it for their built in ajax capabilities.

The first is the custom Grails tag and tries to load the Javascript library by that name. If you're using the Resources plugin, then the call delegates to that for loading of the library. Take a look at JavascriptTagLib.groovy to see what the custom tag does.
The latter is just the regular HTML script element, and attempts to fetch a script at the location provided.
The issue you're running into may slightly depend on the version of Grails you are running too. Looks like 'jQuery' is not a valid library in Grails 1.3.x:
library (optional) - The name of the library to include. Either "prototype", "scriptaculous", "yahoo" or "dojo"
You may want to make sure that your path is correct and you either have the Grails jQuery plugin installed, or you have the library in your web-app/js directory. Grails 2.x comes with jQuery by default, but older versions did not.

Related

Angular Dart external JS

I am building an Angular-Dart site based on a commercial Bootstrap template.
The correct rendering should be like this:
I used IntelliJ to scaffold a Dart/Angular app and started to modify from there.
I have put related files (CSS/JS/images) of that template into web/css, web/js, respectively.
HTML used is verbatim copied from the template but I have taken out the CSS, JS reference from btqun_component.html and moved into index.html.
The output is like this:
Obviously, the CSS is working, and the header/footer are showing correctly. But the masonry effect is not showing, so I doubt that is related to JS reference.
Can anyone give any hints on this?
Do you have a documentation for the bootstrap template ? I guess you need to execute the javascript they provide to you so you need to add it to your index.html, and you probably need to import bootstrap and jquery too.
If you need to call a javascript function you can do it directly in the index.html inside a script tag or build a dart wrapper using package:js
EDIT: answer to call jQuery function from Dart

Mediawiki add Jquery plugin via ReourceLoader

I'm trying to add a JQuery plugin which is not one of core plugins of mediawiki (twbsPagination)
The problem is mw.loader.using doesn't support URL so I can't pass url of twbsPagination to be loaded & mw.loader.load doesn't support callback to make me able to run my code after loading the plugin.
How can I load a jquery plugin and use it after the load in mediawiki 1.28 ?
To the best of my knowledge, you can't add to the list of what mw.loader.load or mw.loader.using support, but you can still use $.getScript() without loading anything extra, since jQuery itself comes as part of the default Mediawiki install. If you have cascading dependencies, such as a script that makes use of a $.getScript()-loaded plugin, simply nest each level of dependency inside the $.getScript().complete() callbacks just as you would with the callback you'd give mw.loader.using.
As a side note, using $.getScript to load javascript on pages outside of Common.js also allows you to use ES6 in those non-Common.js scripts. (Mediawiki still doesn't support ES6 on Common.js.)
For a live example, look at lines ~306-335 in https://stratics.com/w/index.php?title=MediaWiki:Common.js

Trying to avoid multiple calls to jQuery in a Domino XPage

I am attempting to use the 'DataTables' table plug-in for jQuery on a simple Domino XPage.
I have loaded the two required libraries from CDN's...
JQuery: ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
DataTables: cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
I have also tried loading them from local resources (doesn't help).
I then prepare a basic table on my XPage, and include the necessary Javascript to initialise the table...
$(document).ready(function() {
    $('#tableID').DataTable();
} );
When I test the XPage, I continually observe
test.xsp:15 Uncaught TypeError: $(...).DataTable is not a function
I've searched through several forums, and the general consensus is that...
a) I have loaded the libraries in the wrong order (nope!)
b) I have loaded jQuery more than once (how?)
I have many other solutions using Bootstrap and jQuery, and have never run into this issue before. So, I though I might strip the XPage back to bare bones. I got rid of all Dojo elements on the page by adding the following line to the 'xp.properties' file...
xsp.client.script.libraries=none
That actually seemed to work! I no longer observed the error. However, my page no longer looked like it should (for obvious reasons!). I've had to restore the 'xp.properties' file back to its original state, but cannot find out how to avoid the error.
Has anyone successfully used the 'DataTables' jQuery plug-in on an XPage? Any feedback or suggestions would be most appreciated!
Yes I have been doing a load of work on DataTables in XPages so it definitely works! I know your pain though....
The order of your jquery scripts in relation to each other may be okay, however there is a clash with dojo and it's AMD loader, so you have 3 options.
Option 1. Load your jquery scripts before any of the xpages scripts
Option 2. remove the 'amd loader' just before your jquery scripts and then restore it just after
Option 3. modify the javascript of the datatables so it ignores the amd problem
Option 1 : Loading your jQuery scripts first
If you are using resource aggregation, you can use this tip from Sven Hasselbach's blog, in which you use the generic 'headTag' resource tag and it will load first.
http://hasselba.ch/blog/?p=1181
If you want a solution that will work regardless of resource aggregation setting, I have an example on my blog in which you can create a viewRootRenderer which will then allow you to specify that you want a script loaded BEFORE everything else
http://camerongregor.com/2016/09/19/controlling-the-order-of-script-resources-e-g-jquery-with-a-custom-viewrootrenderer/
Option 2. Removing the AMD loader before loading scripts
There is an xsnippet which explains how to remove and then restore the amd loader so that a jquery plugin will load
https://openntf.org/xsnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together
Sven had already made a similar solution to mine above (viewRootRenderer) in which you can specify which scripts will need the amd loader disabled and it will do this for you, it is available here
http://hasselba.ch/blog/?p=2070
Option 3 : modify javascript of the jquery plugin (datatables)
Mark Roden demonstrated this on his blog. I don't really like doing it but hey it works!
https://xomino.com/category/jquery-in-xpages/
Let me know if any of this works! I hope I'm right, with javascript I never know...

Passing startup arguments to dojo toolkit when loading in meteor

I am trying to use the Dojo framework inside meteor js
According to the dojo documentation, you need to pass startup arguments inside the tag like so:
<script src="../dojo/dojo.js" data-dojo-config="async: true"></script>
specifically, the data-dojo-config argument
If i place dojo.js into the client/lib folder, a tag is autogenerated by the meteor internal logic, but i do no know how to modify or add arguments into this script tag. is there a proper way to do this?
You can also simply have a global variable called "dojoConfig" which does the same thing.
It must be defined before the dojo.js script is parsed by the browser.
<script type="text/javascript">
var dojoConfig = {
async: true
};
</script>
This will do the trick.
I've got what i just posted and a regular dojo.js script tag right after that, and dojo works just fine in my meteor client.
In this case you might want to place the dojo kit in the /public folder so meteor won't touch its javascript, then you can manually add the tag as you want.
At the moment the generation is automated so its not possible to tell meteor to give a special rule for dojo.
You could also use jquery or some js dom to modify the script tag meteor might add if you want to leave your stuff in /client/lib
$(function() {
$('script[src=../dojo/dojo\\.js]').attr({data-dojo-config:true});
})

Injecting JQuery Cross-Domain

Is it safe to inject JQuery's script using JsonP?
The installation of my web application is - adding a script to a customer's website (like google analytics). I was thinking of using JQuery on the customer's website, as part of my own injected script.
I was wondering, if there is some kind of risk?
The application needs to support any kind of website.
Thank you
Yaron
Its hard to tell what you are doing with your library, but it seems you are building some type of widget for use on multiple sites.
From here down has been updated after an enlightening comment from #K Prime caused me research exactly how you could include two copies of jQuery if needed:
It is generally bad to use jQuery if you are building a widget that will live on a site outside your control, and will be added to the site with a "copy this embed code and paste onto your site" type of functionality. (Of course jQuery widgets and plugins abound, but these are normally chosen and installed/implemented by developers not a generic "copy-n-paste" widget type implementation)
Probably the biggest reason (after realizing you can run two copies of jQuery on the same page) is the file size increase. Whether it is warranted will depend on your particular needs and function. Simple small widget = straight JS. Complex website front-end extension, then it probably is worth the file-size increase.
To include it properly (so you don't run into conflicts on their site) follow a workflow that looks something like this:
Dynamically add jQuery to their page using the Google APIs as mentioned on the other answers here.
Run var mywidget_jQuery = $.noConflict( true ); which will restore the original meaning of $ and restore the original meaning of window.jQuery.
Dynamically add your script file, but be sure to wrap the entire thing in a self executing anonymous function like this:
JS
(function($){
... Your code here ...
})(mywidget_jQuery);
Now, you can safely use $ inside your special function and all the jQuery features you want without issue.
Extra credit You could wrap steps 1 and 2 in an if statement that tests if window.jQuery is defined and if it, test if jQuery.fn.version is high enough to run your code. If either test fails, then run steps 1 and 2. If it passes, however, then just run var mywidget_jQuery = window.jQuery so the script you include in step 3 will still run.
You can add jQuery to a website by simply adding a <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" /> element.
However, make sure to call jQuery.noConflict() in case they use a different $ keyword.
If you're just after a reference to the library, why wouldn't you just link to the API hosted on Google Code?

Categories