Not able to call javascript function from index.html - javascript

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>

Related

calling javascript function from another file

I am trying to accomplish something similar to: Calling a function from one JavaScript file which requires another
Essentially, I have index.php, which is the main file for the home page. Within the index file, I am calling a javascript function from another js file.
<script src="js/data.js"></script>
<script>(go_call())</script>
within data.js:
function go_call(){
alert('working');
}
I get the following error: Uncaught ReferenceError: go_call is not defined
UPDATE 1:
My original code is working fine in IE, but this error I have occurs in google chrome.
A function cannot be called unless it was defined in the same file or one loaded before the attempt to call it.
A function cannot be called unless it is in the same or greater scope then the one trying to call it.
It should work like this:
1) within data.js
function go_call(){
alert('working');
}
2) Within file2.js
function clickedTheButton() {
go_call();
}
3) Html File:
<html>
<head>
</head>
<body>
<button onclick="clickedTheButton()">Click me</button>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="file2.js"></script>
</body>
</html>

JavaScript : Issue in Function being called from one Js file to another

I am working with ASP.net and JQuery.
In one Aspx page i have many Js pages included.
Now i added one more Js file(say page1.js) and i was calling a function from page1.js to another js file(page2.js) which was also included in the same Aspx page.
When i tried calling the method(Page1Func) from page2.js i was getting undefined error message.
ASPX Page:
<script src="<%= SomeCommonFunc.GetResolvedUrl("~/Page1.js") %>" type="text/javascript"></script>
<script src="<%= SomeCommonFunc.GetResolvedUrl("~/Page2.js") %>" type="text/javascript"></script>
Page1.js
function page1Func(){
//Some code
}
Page2.js
function page2Func(){
//Some code
page1Func(); // giving undefined error message
}
so i did this:
function page2Func(){
var someFunc = Page1Func; //it worked
someFunc();
}
And it worked.I'm not sure why this message was coming.i have also tried to change the order to include of Js file in ASPX page.
it would be great if someone can help me in explaining this behavior.
P.S : I have checked on internet and didn't get the proper answer for it.
Thanks.
The function could be called as if it was in the same JS File as long as the file containing the definition of the function has being loaded before the first use of the function.
I.e.
File1.js
function alertNumber(number) {
alert(number);
}
File2.js
function alertOne() {
alertNumber("one");
}
HTML
<head>
....
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
....
</head>
<body>
....
<script type="text/javascript">
alertOne();
</script>
....
</body>
If your code is something like this then there is no chance of giving undefined at all
Here is Plunker implementation

Using $ or the JQuery keyword in external JS File

Below is the content in my external js file.
Please i only have one function in my js file and i am calling this function
from one of .cshtml file during onload event.
function startJs()
{
$("#tabs").tabs();
getImages();
var imgCount = 0;
var imgArray = new Array();
}
Running this code i get the error saying "$ is not referenced". I get the same "not referenced error if i use the keyword JQuery.
I also tried declaring the function like this but still getting the same message.
$(function () {
$("#tabs").tabs();
});
How can i make the Jquery symbols work in external js files. I feel that i am missing something very simple here but i just can't figure out what i am missing.
Please note i am making a call to this code from a file that has a reference to Jquery.
Anybody has any solution to this? Thanks in advance.
Your HTML should look like this, note the order of the JS files:
<html>
<head>
...
<script src="jquery.js"></script>
<script src="yourCustomFile.js"></script>
</head>
<body>
...
</body>
</html>

Calling external function from jquery (document).ready?

I'm trying to call a function in an external file from within a HTML page using the document.ready jquery functionality. Below is the example of code from my HTML, but it does not execute the function with the code I've written.
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="_js/script.js">
//<![CDATA[
$(document).ready(function(){
// What do I run here to grab external file function?
extFunction();
});
//]]/>
Example of function from external file:
function extFunction(){
alert("ALERTED!");
};
<script type="text/javascript" src="_js/script.js">
You cannot have a src attribute on a <script> tag and also have JavaScript code inside the tag. Once the src attribute is seen by the browser, it does not execute anything within the tag. Please make two separate tags...
<script type="text/javascript" src="_js/script.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
// What do I run here to grab external file function?
extFunction();
});
//]]/>
</script>
You cannot have body(content) and src for a script element
<script type="text/javascript" src="_js/script.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
// What do I run here to grab external file function?
extFunction();
});
//]]/>
</script>
you want to call function from a php file or js file ??
if you want to call a function of another .js file just include that file in your .js file and if you want to call a php function then use ajax.

Loading Local Java Script file

On my index.html I am doing the following:
<script src="jquery/jquery.js"></script>
<script src="managment.js"></script>
<script src="jquery/jquery.mobile-1.1.0.js"></script>
After doing some calculation, I have the need of using a function from the managment.js file:
$.getScript("managment.js", function(){
alert("Script loaded and executed.");
login();
});
}
And finally the managment.js file:
<script type="text/javascript">
function login(){
alert("asdasdasdasdasdasd");
}
</script>
My issue, is that the login() function is never called. Actually the alert I have inside getScriptfunction is not called either, but the strange thing is that if I check if the jquery.js file is loaded the alert is called. More, if I try to call login() without doing getScriptnothing happens has expected. My files structure is the following:
(note: you can see that I am using 2 managment.js files. I tried both approaches to see if the problem was with the path of the file.)
What am I missing here? For relevance, I am using PhoneGap, but this isn't working on the browser as well.
The management.js file should not contain the <script type="text/javascript"> tag. It should be:
function login(){
alert("asdasdasdasdasdasd");
}
Hope it helps! :)

Categories