I've been working on some code in js/html and it works great. I'm now trying to package it into an add-on for Firefox, and having some issues getting the XUL document correct.
PLAIN OLD HTML/JS
In my html test file between the <head></head> I have:
<script type="text/javascript" src="js/MyCode.js"></script>
At the end of the test file before the </body> I have:
<script type="text/javascript">MyCode.Static.Init();</script>
FIREFOX ADD-ON: OVERLAY.XUL
In an overlay.xul file in the extension package I have :
<?xml version="1.0"?>
<overlay id="mycode"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://mycode/content/MyCode.js"></script>
<script>
window.addEventListener("load", function () { gBrowser.addEventListener("load",MyCode.Static.Init,true); }, false);
</script>
</overlay>
This does not seem to enter the method, but then again I'm not even sure if I've got the listeners firing properly. Would this be the correct way to duplicate what I was doing in plain old html/js ?
See: https://developer.mozilla.org/en/Code_snippets/Progress_Listeners for how to catch all page changes/loads/reloads
Are you sure that gBrowser is ready?
Just as a sanity check, change the script tag to
alert(gBrowser);
to make sure that gBrowser is ready.
This is correct:
gBrowser.addEventListener("load",function () { MyCode.Static.Init(); }, false);
How about:
<script>
window.addEventListener("load", function () { MyCode.Static.Init(); }, false);
</script>
?
Related
I am playing around with an html template and I have noticed that the developer doesn't use RequireJS or anything else to require and call different functions from other node files. Instead, they used this in the html file to initialise and call the function:
<script src="../../assets.js/test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
});
</script>
And I've got the below code in assets/js/test.js which defines initSomeFunction in javascript:
test = {
initSomeFunction: function() {
//Some code
}
initAnotherFunction: function() {
//More code
}
}
(It would be helpful if someone can tell me what this method is called so that I can research it more.)
My problem arises when I try to do the same thing in my node app in the home directory /main.js. The node app works fine on its own but when I add something like this:
test2 = {
initMyFunction: function() {
console.log("I finally decided to work! Good luck...");
}
}
and modify my html file like this:
<script src="../../main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
test.initSomeFunction();
test2.initMyFunction();
});
</script>
then it won't work. Can someone please point me to the right direction as I don't even know what to Google. I am trying to avoid using RequireJS or anything else as I am a total beginner and the method that the developer used sounds so simple and tempting.
I wish this answer will help you:
I am using express, so I do this to solved your problem!
main.js file's position:
modify app.js add:
app.use(express.static(path.join(__dirname, '/')));
Then, in the view file:
<html>
<head>
<script src="public/javascripts/jquery-1.10.2.min.js"> </script>
<script src="main.js"></script>
</head>
<body>
<script>
$(function () {
//test.initSomeFunction();
test2.initMyFunction();
})
</script>
</body>
</html>
Open the chrome Developer Tools. You will see the result.
I am working on an Android Cordova app where I want to programmatically open the soft keyboard when the page is loaded (keypad instead of regular keyboard).
There already is a plugin that should do exactly what I need
(Cordova Android Focus Plugin), but I can't get it to work as intended.
My code to Focus the Element 'Stunden' looks like this:
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
cordova.plugins.Focus.focus('Stunden');
}
</script>
.
.
.
<body onload="onLoad()">
When the code is executed on the device I get the following error:
Uncaught TypeError: Cannot read property 'Focus' of undefined
So I guess the code is executed before the Plugin is loaded completely, but I could not find another method than "deviceready" to wait for it.
Thanks for your help already!
After some fiddling I found out how to get it to work:
In the Android Focus Plugin Docs it says that you can set the focus on an element by calling the function
cordova.plugins.Focus.focus(element);
Replacing (element) with ("Stunden") breaks the function, instead defining a variable
element = document.getElementByID('Stunden')
does the trick. This might be really basic, but in case someone stumbles over this I will just leave it here.
The working code then looks like this
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var element = document.getElementById('Stunden')
cordova.plugins.Focus.focus(element);
}
</script>
.
.
.
<body onload="onLoad()">
I have an HTML file with the following button:
<button type="button" onclick="muteaudio()" id="testButton">Mute</button>
In the head part i have
<script src="js/functions.js"></script>
In this script i have the following function
function($, window, document, undefined) {
function muteaudio(){
alert("it works");
}
}
I'm doing something wrong that is clear. But what is the correct way to call such a function?
This should work:
muteaudio = function(){
alert("it works");
};
Fiddle:
http://jsfiddle.net/ngn0Lfmf/
Not sure why your function doesn't work though
Check if the file is definitely loading via the F12(Developer Tool) then Sources tab.
Check that you have reloaded the page properly so the cache cleared and loaded the latest version of the file.
If the file is not there then check the path you are using, intellisense should help you find the file:
src="~" using ~ should activate the intellisense and help to find the file.
If the file is there but it is still not working then try copying the script code into your HTML file then you can determine whether it is the File or Code that is the issue:
<script type="text/javascript">
function muteaudio(){
alert("it works");
}
</script>
It may be the position of the file, try rending it in the footer.
UPDATE
I have made a JSFiddle which works with the following code and a Snippet:
function test() {
alert("in function!")
}
<input type="button" onclick="test()" value="mute" />
I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });
I had downloaded jQuery.js file from jQuery.com .I have saved this file in 3 places, including JRE/Lib and desktop (where my HTML file which calls it is), to be sure that the jQuery.js file is found. I reference this js file as :
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#clas").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas"> Hello</p>
<p>Hi</p>
</body>
When I ran this HTML file on Mozilla browser, I expected 'Hello' to vanish when I clicked on it, but it did not. It remained as solid as ever.
But when I used a jQuery CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
And when I used an online HTML editor called Tryit Editor v1.5, it worked correctly!
It seems only the local jQuery.js is not doing its part. The JavaScript works fine, only the $() part doesn't. I'm using jdk1.6. I wonder why this snag has occurred. How to resolve it? Help.
Thanks! I found the solution to this problem, from a similar question posted in this forum, asked a year ago. Here is the link:
jQuery code doesn't work if I'm using a local jquery.js file, why?
The problem seems to have been incompatible encoding of the html and the js files. So I added the charset attribute to script tag of js. And the problem and 'Hello' both vanished at a click!
Your code works for me. Please check the below code, I have just modified the location of the jquery.js file where mine is stored in a different location.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%--<script type="text/javascript" src="jquery.js"></script>--%>
<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
$("#clas").click(function () {
$(this).hide();
});
});
</script>
</head>
<body>
<p id="clas">Hello</p>
<p>Hi</p>
</body>
</html>
I assume the location of your js is not correct. Are you using the same path of js where you have this "html" or jsp page? Or you have the js files in a separate folder?
Additionally, you can try alternate way as below:
$("#clas").live("click", function () {
$(this).hide();
});
Please let me know if this helps.