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
Related
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>
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 have below view with scripts at the end:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// here all my stuff
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
</script>
so what I want is to put all the code within into a js file and place it under /Scripts folder in mvc 4 so how to do this? In this script I refer to items in the view.
so after this change I have:
View:
(...)
// here my html items etc...
(...)
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.10.2.min.js)"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/Customs/MyCustomJsFile.js")">
</script>
Javascript file (under /Scripts folder):
MyCustomJsFile.js:
function sample1()
{
}
function sample2()
{
}
function sample3()
{
}
in runtime I am getting an error saying synatx error in MyCustomJsFile.js in the ie debug console so I click the error and first line is shown as error:
but my js file has not any script line....
The only thing that should be in your MyCustomScript.js file is the code you had between the <script> tags, not the tags themselves nor the <script> tag to include jQuery. jQuery should be included in your view on in your Layout and it should be included before your file.
For example, your view:
<script type="text/javascript" src='#Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
<script type="text/javascript" src='#Url.Content("~/Scripts/Tests/MyCustomScript.js")'></script>
Your MyCustomScript.js file:
// here all my stuff
jQuery should really be included on your Layout since you will likely be using it on most, if not all, of your Views.
I moved a function from an html page to an included reference file. It stopped working.
The complete contents of the file are:
alert('file included');
function doAlert() {
alert('functions work');
}
In the html page, I have
<html>
<head><title>Page</title></head>
<body>
HTML Template Header
Some Content
ASP.NET MVC Partial View Starts
<script type="text/javascript">
doAlert();
</script>
ASP.NET MVC Partial View ends
HTML Template Footer
<script type="text/javascript" src="/Scripts/wtf.js"></script>
</body>
</html>
The 'file included' alert works, but the 'functions work' does not. What am I doing wrong?
Make sure you include the file before you execute the function.
<script src="file.js" type="text/javascript"></script>
<script type="text/javascript">
doAlert();
</script>
you should call your function(s) in the following way:
window.onload = function() {
doAlert();
// func_1();
// func_2();
// func_3();
// ...
// func_n();
};
See this for more information about the window.onload event.
Code example on jsFiddle
I have been building my first ASP.NET MVC web app. I have been using the jQuery autocomplete widget in a number of places like this:
<head>
$("#model").autocomplete({ source: '<%= Url.Action("Model", "AutoComplete") %>' });
</head>
The thing is I have this jQuery code in a number of different places through my web app. So i thought I would create a seperate javascript script (script.js) where I could put this code and then just include it in the master page. Then i can put all these repeated pieces of code in that script and just call them where I need too. So I did this. My code is shown below:
In the site.js script I put this function:
function doAutoComplete() {
$("#model").autocomplete({ source: '<%= Url.Action("Model", "AutoComplete") %>' });
}
On the page I have:
<head>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/site.js" type="text/javascript"></script>
<script type="text/javascript">
doAutoComplete();
</script>
</head>
But when I do this I get an Invalid Argument exception and the autocomplete doesnt work. What am I doing wrong? Any ideas?Do i need to pass something to the doAutoComplete function?
The <%= will not be evaluated in your external javascript.
Solution: pass the URL as a parameter to your javascript function.
<script>
doAutoComplete('<%= Url.Action("Model", "AutoComplete") %>');
</script>
function doAutoComplete(url) {
$("#model").autocomplete({ source: url });
}
You need to put the function call in a script block, and make sure jquery is loaded before your site.js ...
<head>
<script src='path/to/jquery.js'></script>
<script src="../../Scripts/site.js" type="text/javascript"></script>
<script>
doAutoComplete();
</script>
</head>
EDIT:
Maybe the '<%= ... =%>' tag isn't being evaluated server-side, before the function gets sent to the browser? Here is an article on this: http://www.west-wind.com/weblog/posts/252178.aspx
Here is a quote from the post:
There's also a problem if you need
access to the [ASP.NET] variables in
.js files - you can't embed script
tags into a .js file so getting a
dynamic value into a static file is
problematic