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});
})
Related
I need to load an external application that contains the complete jQuery 3.2.1 library inside of it. Because it is an externally hosted app, it's not realistic to modify the code. However, when I add the script to my page, I end up with lots of errors due to conflicts with other scripts already loaded. As an experiment, I've tried downloading the app and wrapping the contents in an anonymous function, thinking that this would keep the new version of jQuery scoped locally within the app but it didn't make any difference.
Is there a simple way to include this app without modfying it's contents or relying on jQuery.noConflict() which would require many changes to my existing code?
you can use jQuery.noConflict() in your code with limited changes by simply wrapping all of your code that uses jQuery in an IIFE and passing in the instance of jQuery you are using
try something like
<script src="path-to-your-jquery.js"></script>
<script>var $jQ = jQuery.noConflict();</script>
<script>/* your plugins */</script>
<script>
(function($){
/* your code using `$` works fine here*/
})($jQ);
</script>
<script> /* other app code */</script>
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
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.
I am using jQuery UI and a few other JS libs which in total make for quite a chunk of JS (even minified and combined). My idea is to not include a script tag in the page but to stub out all functions that I defined as well as the $ sign for jQuery so that my inline JS on the page can still call them but will hit the stub. The stub will then load the .js file and actually call the function. The question now is:
How can I redirect all function calls on the window object/global object to a custom function of mine?
I am not used to dynamic languages so a little advice on how to do this in JS will be appreciated.
As stated previously ... this is likely an exercise in futility. Unless you are a researcher and are being paid to do this (and only this), I'd spend my time just working on my actual product and/or refactoring so that the page requires fewer disparate JS libs (for example. use jquery only, rather than jquery + yui)
edit, though, I suppose in the interest of actually answering the question. You can easily replace any function by simply setting it in javascript. For example ...
$ = function(searchString) {
// if this method is called
// and jquery hasn't been loaded yet
// load jquery (which will overwrite all of your local jquery functions with its own
};
The method to lazy load .js files is well documented throughout the web, for example here:
http://ajaxpatterns.org/On-Demand_Javascript
Well the root of your problem is the usage of library dependent in-line JS. We had an old legacy site that had a bunch of in-line JS in the Smarty templates. I ended up modding Smarty so that I could capture the JS calls and then output them all in the footer. Looked something like this
<!-- mySubContent.inc.html -->
<div id="theTabs">
<ul><li><!--
...
--></li></ul>
<div id="tab1"><!--
...
--></div>
</div>
{capture_js}
$("#theTabs").tabs();
{/capture_js}
<!-- footer.inc.html -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
{render_captured_js}
</script>
</body>
</html>
Anyway, maybe that'll give you some idea about how to tackle your in-line JS problem if you can't refactor the codebase right now. Oh, and read this - http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html .
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.