I want to add a third party Javascript File.
E.g. When I put it in folder /public/test.js or /lib/test.js or /client/test.js
function testLoad(){
alert("something");
}
I see the scripts getting loaded but when I try to run them through
if (Meteor.isClient) {
testLoad();
}
I get the following error
ReferenceError: testLoad is not defined
What am I missing?
You should put your file in client/compatibility:
Some JavaScript libraries only work when placed in the client/compatibility subdirectory. Files in this directory are executed without being wrapped in a new variable scope. This means that each top-level var defines a global variable. In addition, these files are executed before other client-side JavaScript files.
http://docs.meteor.com/#structuringyourapp
The problem is that function functionName(){ <code> } wont be a globally defined function (unless you put it in the client/compatibility folder).
Related
I'm creating a meteor package, very simple one like this
api.addFiles(['errors.js', 'errors_list.html', 'errors_list.js'], 'client');
I noticed that if I change above code to
api.addFiles(['errors.js', 'errors_list.js', 'errors_list.html'], 'client');
Meteor says: Template is not defined.
It is very hard to find out what caused this error. And why js file cannot go before html file in addFiles?
When you use Spacebars (the default templating engine), templates are defined in HTML files :
<template name="fooTemplate">
...
</template>
You can then access this template from everywhere else, be it HTML or JS:
<!-- HTML file -->
{{> fooTemplate}}
//JS file
Template.fooTemplate
If you try to do such an access before the template has been created, it will fail.
Meteor packages load files sequentially. This is how you control the load order.
If you try to use a template before it has been defined, it's undefined and will throw an exception when you try to access it (something along the lines of fooTemplate is undefined).
Thus, as in everything in programming, always initialize first and use later.
Put your HTML files before the JS, and you're good to go.
I want to load a javascript file but do not want a "<script type="text/javascript" src="..."></script>" tag created for it.
I am using iron-router. So, I want this js file to execute in 'onAfterAction' hook, i.e. after the template is loaded.
I am thinking of following ways to do this:
One way is place this file in "public" directory and use '$.getScript' function to load and execute this on demand. But, these files won't get minified and compacted to one file. Also, this will need another fetch on the n/w.
The other way is to create a package and include this file in the package. But, then I will have to enclose the whole file in a function and 'export' this function in package. And execute this function on demand.
The third way is to put these files in 'client' directory and call "$.getScript('/client/js/...". But, the js file would get executed twice as a "<script type="text/javascript" src="..."></script>" tag will be created for it..
Is there a better way of doing this so that the file is locally available and can be executed on demand?
From what I understand about Meteor. All JavaScript executes without having to load a <script></script> tags. Depending on how you seem okay with it being a public script, I'd put it in the client folder and utilize the Template.[your-template-name].rendered in some way where you can load that particular script after the template is rendered.
http://docs.meteor.com/#/basic/Template-onRendered
I'm trying to use CKEditor in a meteor application:
My attemps:
Put CKEditor folder with all the files (js, css, lang, plugins and skins) in the public folder, include the reference to the javascript file (ckeditor.js) in the header and use the appropiate class in textarea elements. Failed because the editor only works if the textarea is in the body (in any template the textarea control remains unmodified).
Put the javascript files (ckeditor.js, config.js, styles.js) in client/lib/compatibility folder and the remaining files in the public folder. This time the application cant locate the files (skins, plugins, ...) because is looking for localhost:3000/client/lib/compatibility/ckeditor/ ...
Has anybody make this integration works before?
I got this working and wanted to post a solution for future visitors. First, you need to put everything from the CKEDITOR build download in the public folder. CKEDITOR comes with all sorts of stuff and references everything based on relative directories.
Your public folder should have a directory named ckeditor it should contain contain the following files and folders:
adapters
lang
plugins
skins
ckeditor.js
config.js
contents.css
styles.js
In your primary layout file reference CKEDITOR like so:
<head>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
</head>
In your template:
<template name="yourTemplate">
<textarea id="content" name="content"></textarea>
</template>
Finally, in the rendered function of your template:
Template.yourTemplate.rendered = function() {
$('#content').ckeditor();
};
Normally, you would say this.$('#content').ckeditor() but that doesn't work because CKEDITOR is in your public folder. As a result, you need to the global reference to the #content element.
Put only the CKEditor files that you would've included in <head> inside a folder in client/lib, i.e. client/lib/ckeditor. That's all you need to do to get them served to the client: there's no need to reference anything in any <head> or anything like that. All .js and .css files that Meteor finds inside client are automatically concatenated and served to the client. This applies to any client-side library, not just CKEditor.
The next thing you need to do is cause CKEditor to be initialized on the pages that use it. Say you have a template called edit with a textarea with an ID of editor. And say you're also loading the CKEditor jQuery Adapter. Inside a JavaScript file within client, put:
Template.edit.rendered = function() {
$('#editor').ckeditor();
}
The key here is that the initialization happens after the textarea editor exists and is ready, because this code is executed after the edit template is fully rendered. It will be reexecuted anytime edit is rerendered. Any other client-side library is included and initialized similarly.
EDIT Image files referenced via .css are a pain in Meteor. The "proper" way to deal with them is to put them all under the folder public, in this case for example public/ckeditor. Then edit the CKEditor .css files so that all references to image URLs point to your new folder at the root, i.e. /ckeditor/image1.png etc. (leave out "public").
I have a css.erb file which contains the styling of one of my pages. I have a helper which preformats a URL of a given image based on the location of that image.
When I call the helper function from the view, the output is expected (a string containing the URL for of the image). However, calling it in the css.erb file gives me an undefined method error even though I copy and paste the same function into my css file.
It's as if the helper is not included in the css file and is ignored.
Helpers are not available by default to templated .css files. They are intended to help in view construction only. However, you can try the workaround mentioned here using an initializer:
Rails.application.assets.context_class.instance_eval do
include YourHelperModule
end
Alternatively, if you only need this for one or a few files, you can use the solution mentioned here, by adding this code to the top of the .css.erb file:
<% environment.context_class.instance_eval { include YourHelperModule } %>
I have to move all my scripts into a separate .js file. But I have wired the code in the client (*.aspx) file, with code such as
<script>
var x=<%=ViewData["Key"];%>
</script>
I'm sure there will be an issue when I move that line to the js file as the server side context can't be accessed.
How do I solve this issue?
The most straightforward thing to do is to move all JS code except these variable assignments.
Effectively, the trick is dependency injection in javascript. First, abstract the variables you are generating from server-side variables into parameters for your javascript methods and objects. Then use a small amount of script in-page to setup the javascripts to run.
If you are dealing with a few rather static things (eg--some path names), another tactic is to create a javascript "configuration" object that is in a separate, server-generated script, that can be called by your other scripts as needed.