Loading Jscript files into Firefox extension - javascript

Let's get directly to the problem :
I'm actually doing a firefox extension in which i would like to implement the jWebsocket API in order to build a small chat.
I got my main script file, named test.js, and the jWebsocket lib into a js folder.
Just for you to know, this is my first firefox extension ever.
So in my XUL file I got this (for the script part only of course, the interface code is not shown) :
<overlay id="test-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://test/content/test.js" />
<script type="application/x-javascript" src="chrome://test/content/js/jwebsocket.js" />
jwebsocket.js being the file I need to call according to jWebsocket website.
In my main script file test.js I start with :
if (jws.browserSupportsWebSockets())
{
jWebSocketClient = new jws.jWebSocketJSONClient();
}
else
{
var lMsg = jws.MSG_WS_NOT_SUPPORTED;
alert(lMsg);
}
jws being the namespace created into the jwebsocket.js file.
Of course I've got the required stand-alone server running in background, and working.
So from what I understood looking on various websites, is that if a js file is loaded into the javascript allocated memory space (with the tag), all namespace/function should be available between each file. But this was mostly for HTML-oriented issues, so I'm not sure if it applies to XUL/Firefox environment.
But the script keep failing at the first jws call.
Any ideas on what goes wrong here ? I'm stuck for 2 days now :/

Yes, is the same of HTML developing, you have your namespace avaiable between each XUL file.
Take a look here for namespacing in firefox extensions.
What error do you get?
Edit:
Do you have initialized your jws object before to call browserSupportsWebSockets() ?
Like Pointy said, you need to load test.js after your jwebsocket.js file.

Related

"Failed to Load Resource Error" despite file being in directory

I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.
check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.
Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.

In a Thunderbird extension, how can different javascript files refer to each other?

I have developed a very simple Thunderbird extension. There is one simple .xul file which refers via script-tag to a .js file. In that javascript-file I am implementing an event listener on the compose-send-message event. When the send-button is clicked, I want to encrypt the message in the mail-body and replace it with that newly encrypted text before sending. Replacing text in the body-part of Thunderbird worked well, but I am not able to refer to another javascript file with a simple function call like
var encryptedData = encryption.encrypt(data);
for the file encryption.js, which exclusively handles the encryption of said email-text before sending. Both files are in the same directory, so normally they should be able to refer to each other, shouldn't they? But for me that reference never seems to work. Would you know what I can do to make it work as intended? I don't seem to be able to figure that one out by myself. Thanks in advance.
I don't have experience with add-ons for Thunderbird, but do with add-ons for Firefox. However, I believe the same mechanisms apply to Thunderbird.
You have two options (or perhaps more, that I am unaware of):
Include the needed extra javascript file in the xul file, before the main javascript file (or did you try this already?):
<script type="application/javascript" src="chrome://path/to/extra.js"/>
<script type="application/javascript" src="chrome://path/to/main.js"/>
Load the needed extra javascript file from inside the main javascript file, as a subscript, with the subscript loader service, through loadSubScript():
var mozIJSSubScriptLoader = Components.classes["#mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
mozIJSSubScriptLoader.loadSubScript( 'chrome://path/to/extra.js', optionalScope, 'UTF-8' );
The optionalScope lets you load the scripts variables into a designated object. If omitted, the scripts variables will be loaded into the current scope of the loadSubScript() caller.
The charset argument is optional as well, by the way.

Google app engine python doesn't read js file

I built a python app on google app engine that pulls pictures from the flickr API and allows users to do cool stuff with the pictures, like drag and drop.
I have three JS files in the body:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/init.js"></script>
My jQuery code is working fine but only when I write it in either of the jQuery documents. If I place the code in the init.js, the code simply doesn't work, which I find rather weird. I put the code in the jquery files because I wrote console logs on the three script files and only the init.js didn't print to the console. I am linking the files correctly and referring to the right folder and right file. The folder JS was also added to the app.yaml:
- url: /js
static_dir: js
I can just leave the code in the jQuery file but this is not what I am supposed to do. I want to fix it.Is there a specific way to use the JS file on google app engine?
Use absolute paths instead of relative when loading your JS files (add the leading slash /):
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/js/init.js"></script>
I fixed it. The problem was that I named the file init.js. For some reason Firefox doesn't like that name (at least mine didn't) and didn't load the file. Chrome loaded the file without any problems. When I changed the file name to main.js, it started working in Firefix as well. I only tried this when I had exhausted all other possible options though. Such a weird behavior of Firefox.

Access function defined in separate .js file from a .js file

I've seen quite a few questions regarding loading a .js file into an HTML file, and I know how to do that. However, say I have the file "classlist.js." How can I go about using the classes defined in that javascript file in another javascript file? I keep seeing answers that suggest using the
<script type="text/javascript" src="filepath"></script>
syntax. When used in a .js file, though, it throws a syntax error on the "<" so I assume this code is invalid.
So, how would one utilize a function in a .js file that was defined in a separate .js file... that works, and is efficient (If there is one)?
EDIT:
I'm going to clarify some thing for the future, since I'm still fairly new to Javascript, and it looks like there were a number of other factors I didn't even know came into play.
I had two .js files, one of which declared classes that were extensions of classes in the other file. I wanted to use the extended classes in a webpage, and I thought I had to load the originial classes into the second .js file, THEN load that .js file into the HTML file. I wasn't programming completely outside of HTML.
Sorry for any misunderstanding, hopefully this thread is helpful to somebody else in the future.
Assuming you are talking about javascript in a web browser, all js files are loading in an html file, typically index.html. You need to use the script tag to load the javascript in the proper order in that html file, not in the javascript file. So if file B requires the things in file A, you need to load file A first, meaning put the script tag that loads file A before the script tag that loads file B.
Two answers:
Non Browser
If you're using JavaScript in a non-browser environment (NodeJS, RingoJS, SilkJS, Rhino, or any of a bunch of others), the answer depends on the environment — but many of these use the CommonJS require mechanism. E.g.:
// Get access to public symbols in foo.js
var foo = require("foo.js");
// Use the `bar` function exported by foo.js
foo.bar();
Browser
If you're using JavaScript in a browser, you put script tags like the one you quoted in the HTML, in the order in which they should be processed (so, scripts relying on things defined in other scripts should be included after the scripts they rely on).
If you want to maximize efficiency in terms of page load time, combine the scripts together on the server (probably also minifying/compressing/packing them) and use just the one script tag.
The answers posted above should do the trick however since you mentioned doing it efficiently you can consider taking a look at javascript module based loaders like require js( http://requirejs.org/ ) based on AMD
You have to put the reference to classlist.js in your HTML file (not your Javascript file), before any other SCRIPT element which requires it. For example, within the 'head' element:
<html>
<head>
<script src="testclass.js"></script>
<script src="file_using_testclass.js"></script>
<script>
var tc = new TestClass();
</script>
</head>

Wordpress: can I launch a small javascript declared on the same page? Or how to upload .js file to Wordpress?

I'm completly new to wordpress. I just want to use single javascript snippet on a page. For example:
<script>
function myFunction(){
//do something
}
</script>
// a bit later
<input type="button" name="testButton" onclick="myFunction()">
And in developers console in Chrome I get an error: "Refused to execute a JavaScript script. Source code of script found within request."
I've done some research and I think that I know it's origin - it seems that I have to add an external file with my javascript code. The bad thing is, that I have literally no idea how to do it, in spite of researching for the past few hours. Maybe it's very easy and I'm missing the simple solution, but I just don't know how to upload .js file. I've bumped into some topics saying that I have to use a php function, wp_enqueue_script(), but it still needs the .js file to be uploaded to wordpress server. Do I have to upload it as Media, a page, or what? And still, if I have to upload a javascript file each single time when I want to change something, application development will be a pain in the butt...
So is there maybe an easy way to put my javascript function definition in the same file where the function is used? That would be possibly the easiest solution.
Adding external Javascript files is probably the way to go. You upload them in the same way you would do if this was a regular HTML site, (ie using FTP or something similar).
Then you can reference it in the header.php file (accesible under the Appearance -> Editor in Wordpress).
Some themes allow you to add Javascript to the top/bottom of each page, you may want to check if your theme allows that. (check the manual with the theme or their support).
Add this whole code in header.php file of your WordPress and add
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
before your code.

Categories