I get an uncaught reference error whenever I try to call a javascript function in a separate paperscript tag. I tried a test code
HTML body:
<canvas id="c"></canvas>
<script type="text/javascript" src="vendor/paper.js"></script>
<script type="text/paperscript" src="foo1.js" canvas="c"></script>
<script type="text/javascript" src="foo2.js"></script>
The canvas won't get used in this example, it's just something that paper.js needs to work.
So for the scripts themselves:
foo1.js (paperscript)
function blah(){ console.log("blah"); }
foo2.js (javascript)
window.onload = function{ blah(); }
Now, if I load the HTML, the console tells me that blah() throws a reference error. However, if I changed
type="text/paperscript"
to
type="text/javascript"
for foo1.js, then the console will display "blah" and no error is thrown. Why is this?
Browsers will only load scripts with type="text/javascript". The paperscript library could have a loader for scripts with type="text/paperscript" triggered from window.onload. Try adding an event listener so you don't write over an existing loader.
Example:
function myInit() {
blah();
}
if (window.addEventListener) {
window.addEventListener('load', myInit, false);
} else if (window.attachEvent) {
window.attachEvent('onload', myInit);
}
Related
HI i am facing some problem while calling function from index.html on load event
it return error readjson is not defined in console.
index.html
<script type="text/javascript">
$(window).load(function () {
readjson('a','s');
});
</script>
main.js file
<script type="text/javascript">
function readjson(val1,val2){
//some code
}
</script>
Can anyone tell me why it is not able to call, i have link main.js file to index.html
JavaScript files shouldn't include any HTML.
Remove <script type="text/javascript"> and </script> from main.js.
You should see an error when that file is loaded (along the lines of Unexpected token <).
Call it like this inside the js file without the "script" tag :
function readjson(val1,val2){
//some code
}
In index.html you need the "script"
And follow the advice given in the comments, always include first the .js file and then the function in the index.html
Did you add jquery link properly??
If not, you should add jquery link for $(window) to be called. such as..
<script src="http://code.jquery.com/jquery-latest.js"></script>
If you actually have two script declarations as you are showing here the the window load will fire first. It then look for your function, which has not been created yet. That's why you are getting undefined.
You could have one script declaration on the page and place your function in the load function.
<script>
$(window).load(function () {
readjson('a','s');
function readjson(val1,val2){
//some code
}
});
</script>
Remove tags from main.js:
<script type="text/javascript"> and </script>
and remember to include jquery and main.js with:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="test.js"></script>
I'm getting this error:
Uncaught TypeError: Object [object Object] has no method 'dialog'
This is my relevant HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/Scripts/modernizr-2.0.6-development-only.js"></script>
</head>
<body>
<div id="deleteConfirmationDialog" title="Confirm Withdrawl">
Are you sure?
</div>
<div class="appl-appliedfor">
<a class="deleteLink" href="/Applicant/WithdrawApplication/2">
<img class="appl-withdrawApplication"
src="/Content/Images/Delete.png" alt="Withdraw Application" />
</a>
</div>
<script src="/Scripts/Prime/jquery-1.8.2.min.js"></script>
<script src="/Scripts/Jqueryui/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/Scripts/OnBoard/jquery-form-min.js"></script>
<script src="/Scripts/Prime/bootstrap.min.js"></script>
<script src="/Scripts/Prime/json2.js"></script>
<script src="/Scripts/Prime/selectivizr-min.js"></script>
<script src="/Scripts/Prime/jquery.cookie.js"></script>
<script src="/Scripts/Prime/jquery.maskedinput-1.3.min.js"></script>
<script src="/Scripts/OnBoard/OnBoardAll.js"></script>
<script src="/Scripts/OnBoard/ApplicantAll.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<script src="/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="/Scripts/jqueryui/jquery.ui.dialog.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#deleteConfirmationDialog').dialog({
autoOpen: false,
modal: true
});
});
$('.deleteLink').click(function(e) {
$('#deleteConfirmationDialog').dialog({
buttons: {
"Yes - Withdraw Application": function() {
$(this).dialog("close");
},
"No - Do Nothing": function() {
e.preventDefault();
$(this).dialog("close");
}
}
});
$('#deleteConfirmationDialog').dialog("open");
});
</script>
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"28b6a62eb1fb42829a3191b7c3e270d4"}
</script>
<script type="text/javascript"
src="http://localhost:61108/d90608e9d0044daf98eb343c1b3769d7/browserLink"
async="async"></script>
</body>
</html>
Everywhere I've searched the error is because you have to include jquery and jquery UI.
I've tried including JQuery UI with and without jquery.ui.dialog. No Luck.
What am I missing? Thanks for reading.
Edit
The error points to the this line:
$(document).ready(function() {
$('#deleteConfirmationDialog').dialog({
if I type $.dialog in the console I get undefined
If I reference jquery.ui.dialog.js there is the following error:
Uncaught TypeError: Object function (a, b) { return new p.fn.init(a, b, c) } has no method 'widget'
otherwise there is no other error.
I get 200 OK's for everything.
I've removed the displayed javascript code in to its own file and referenced it last. I have also moved the function that was outside the document.ready event function to inside this function, still getting the same error.
I can see jquery-ui and jquery in the Sources tab.
I don't understand why I can see jqueryui in the sources tab but typing $.dialog in the console results in undefined
Only code that doesn't use external libraries and code that doesn't use the DOM may be executed directly in a <script> tag.
If you search for DOM Elements directly in a <script> tag without waiting for the Document / DOM to be ready, the elements that you are searching for may not exist yet (in the DOM) or they may be incomplete.
Also using JavaScript methods directly in a <script> tag without waiting for the Document / DOM to be ready, the external files might have not been downloaded yet which means the methods from those external files might not exist yet.
In order to be sure that nothing like that occurs you need to put the code inside an event handler -- this ensures the code will be executed only after the event is triggered. The necessary event is $(document).ready(event_handler_function) also shorthanded as $(event_handler_function)..
Never met this problem, and don't know why.
The only explanation is a scope issue.
In the same page, I have 2 sections of JS :
...
<script type="text/javascript">
go();
</script>
<script type="text/javascript">
function go()
{ alert(''); }
</script>
...
This will show an error : go is not defined
where
...
<script type="text/javascript">
go();
function go()
{ alert(''); }
</script>
...
is working (obviously).
Does <script> tag creates a scope of JS ?
help ?
This isn't a scope issue. If you define a function (in the global scope) in one script element, then you can use it in another.
However, script elements are parsed and executed as they are encountered.
Hoisting won't work across script elements. A function defined in a later script element won't be available during the initial run of an earlier script element.
You either need to swap the order of your script elements, or delay the function call until after the script that defines it has run (e.g. by attaching it to an onload event handler).
<script>
function go() {
alert('');
}
</script>
<script>
go();
</script>
or
<script>
window.addEventListener("load", function () {
go();
}, false);
</script>
<script>
function go() {
alert('');
}
</script>
The html parser stops to execute your script before moving to next elements. So the next script element
is not executed until the first one is executed.
This is comparable to:
<script>
document.getElementById("hello") //null because the html parser hasn't met the div yet.
</script>
<div id="hello"></div>
The other cause of this as an apparent error is if the first script block has a syntax error and is rejected in its entirety, but the second block runs on and misses its buddy code.
As it's been said already, order matters. For what it's worth, I saw this issue with an experiment (not production!) where I had something like this:
<head>
<script src="/path/one.js" defer>
</head>
<body>
<script>
methodInOneJs();
</script>
</body>
And the browser complained with a ReferenceError, even though methodInOneJs() was defined in one.js. This because of the defer attribute in the script that loads it. One might think that putting defer in the inline script as well would solve the issue, but according to MDN:
Warning: This attribute must not be used if the src attribute is
absent (i.e. for inline scripts), in this case it would have no
effect.
One quick solution (aside from removing defer altogether) was to use the onload event (again, not production, where I'd just use src):
<head>
<script src="/path/one.js" defer>
</head>
<body onload="run();">
<script>
function run()
{
methodInOneJs();
}
</script>
</body>
This is because with defer:
the script is meant to be executed after the document has been parsed,
but before firing DOMContentLoaded.
Emphasis on "before firing DOMContentLoaded". See also how to load scripts last.
I read that deferring the JavaScript files leads to smooth opening of the page and less load time..... using the:
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
I am referring to the "defer" in the above code but I read that it only works in IE. Is there any other method for deferring the parsing of JS? I already have compressed it.
You could just remove 2 of the script-elements and add an onload in the first. In this onload-function you can write the script-elements to the dom and they will be loaded async. Check out this link: Dynamic javascript loading
I should attach a event on the window.onload that fires when the window has been loaded.
example:
function deferMethod() {
// you're code here
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", deferMethod, false);
else if (window.attachEvent)
window.attachEvent("onload", deferMethod);
else
window.onload = deferMethod;
The code in the external file is
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
In the php file I am using
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
But this will not work why?
if I call the function in the external fil it works
var testing = {
bugtest: function() {
alert('No Bugs Here');
}
}
testing.bugtest()
this will work but this not what I want it to do I want to be able to call the function in the main file? What would the cause of this problem be?
You can not use src attribute and the text node with script elements.
They must be exclusive, e.g. an element each.
So your HTML would look something like...
<script type="text/javascript" src="externalScript.js"></script>
<script type="text/javascript">
testing.bugtest();
</script>
This
<script type="text/javascript" src="externalScript.js">
testing.bugtest();
</script>
is wrong. You can either specify a src, or run inline code.