How to import a js file into view in mvc - javascript

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.

Related

How do I link a Javascript file into another Javascript file

There are two files here in the same folder.
I am trying to invoke a function named greet of app1 in app2.
app1.html
<script>
function greet() {
alert('hello from App1')
}
// greet() // commented out code
</script>
app2.html
<script type="text/javascript" src="./app1.html"></script>
<script>
function app2() {
alert('app2')
}
app2()
greet() // this line of code is not working
</script>
If you want to call the file in an another js file then you have to refer that file in the calling file.
Ex.
Refer the files in the head section.
<head>
<script src="File2.js" type="text/javascript"></script>
<script src="File1.js" type="text/javascript"></script>
</head>
you can have your body tag something like this:
<body>
<script type="text/javascript">
Method2(); // Where you want to call method from another JS.
</script>
</body>
then, using first file
File1.js
function Method1(number) {
alert("Method1");
}
File2.js
function Method2() {
Method1("Method1 is called in Method2");
}
I would recomend have separate external js files instead of an embedded <script> tag, but maybe this can help
How to include js file in another js file?

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

Not able to call javascript function from index.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>

Razor RenderSection within script tags - How to insert script from view into template function

I'm using MVC 3 with the Razor view engine and I would like to inject scripts from multiple views into one centrally defined $(document).ready(); function in the master page.
I have tried the following:
<script type="text/javascript">
$(document).ready(function () {
//OnLoad Script load area
'#RenderSection("DocumentReady", false)'
});
</script>
In my master view, and then:
#section DocumentReady{
alert('Document is ready!');
}
In my view, but unsuprisingly, we get compilation errors due to the javascript not being within a <script> tag.
If there are a lot of small view controls that need to run some initialisation script in the $(document).ready() function, it would be nice to keep them all together in a single place.
Is there a way to inject javascript to a master view without the surrounding <script> tags and without affecting compilation?
You don't need the single quotes around the RenderSection call in your layout:
<script type="text/javascript">
$(document).ready(function () {
#RenderSection("DocumentReady", false)
});
</script>
and inside the view:
#section DocumentReady {
alert('');
}
But it will probably be more readable if you have a scripts section in your layout:
#RenderSection("Scripts", false)
and inside the view:
#section Scripts {
<script type="text/javascript">
$(function() {
alert('');
});
</script>
}
For example, in your _layout.cshtml :
#RenderSection("JavaScript", required: false)
And then in your view :
#section JavaScript
{
<script type="text/javascript" src="#Url.Content("/Scripts/SomeScript.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/AnotherScript.js")"></script>
<script type="text/javascript">console.log("in the js");</script>
}
Hope that helps

JavaScript function stops working when it is moved to an external .js file

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

Categories