.Net MVC 3 Adding Javascript - javascript

I am sure there is a very simple answer to this question, I think am just having trouble. I have animation.js file. It also has a include folder with dependency_1.js and dependency_2.js. In my animation.js file I do load dependency_1.js and dependency_2.js relative to my animation.js file.
In my _Layout.cshtml file I do have:
#RenderSection("JavaScript", required: false)
And I did place within my view SomeView.cshtml
#section JavaScript
{
<script type="text/javascript" src="#Url.Content("~/Scripts/animation.js")"</script> }
But when my animate.js file calls the dependency_1.js file I get a 404 Not Found - http://localhost:14611/includes/dependency_1.js"
Im guessing it has to do with the url routing to the Scripts folder in my MVC project?

Relative paths in Javascript files are relative to the HTML page, not the source Javascript.
You need to use an absolute path.

Related

How to put script file in the head of view using EJS

I included layout to my view and also i need to make JS script to load for this view directly in the head. How to do that ?
// view file
<%- layout('/layout/boilerplate.ejs') %>
<script>
// want to load script in the HEAD of my boilerplate file.
</script>
I tried to add head tag and expected it to combined with head in boiler plate but didn`t. Do not want to add to boilerplate because it be downloaded for every route then.
There are a few steps that needs to be followed.
Put your JS files in the /public folder of your project.
Configure the Node server to serve your Static files.
Use a script tag to reference your JS in your ejs file
Hope this will be helpful.
Cheers!!

ASP.NET Web Forms Routing and paths to js files

I am working on an ASP.NET Web Forms project that make use of Routing.
I have two routing situations:
http://mywebsite.com/section
http://mywebsite.com/section/subsection
My js files are stored in a /js folder in the root of the project.
Fact is, when I load /section page everything works fine, the js are loaded correctly. When I load /section/subsection page the js are not loaded and actually the path appear to be something like
http://www.mywebsite.com/section/file.js
I have already tried to put a slash before the name of the js folder or even to use a server side ResolveUrl function like
<script src='<%=ResolveUrl("~/js/file.js")%>'></script>
In this case file.js il loaded correctly; anyway if file.js contains calls to an external js file, the latter is not loaded (its path is always in the form of /section/externalfile.js).
Adding the following line to the Global.asax
routes.Ignore("{*allfiles}", new { allfiles = #".*\.(css|js|gif|jpg|png)" });
did not solve the problem either.
The most surprising thing is the fact that, for instance, image or CSS files are loaded correctly even with a normal link like the following:
<link rel="stylesheet" type="text/css" href="css/owl.theme.css" media="all" />
Is there anyone who has an idea of how solving this issue ?
Edit: The master page of my project calls a cutom.js file (which is loaded correctly). This file contains for instance the following call to superfish.min.js:
Modernizr.load([{
load: kopa_variable.url.template_directory_uri + 'js/superfish.min.js',
complete: function() {
$('.top-menu').superfish({});
}
}]);

.js files not being called on pages included in folders

At the bottom of every page, I have a .php include that links to all my .js files.
<?php include 'Core/js.php';?>
Within this .php I have this code;
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.dropotron.min.js"></script>
<script src="../js/skel.min.js"></script>
<script src="../js/skel-layers.min.js"> </script>
<script src="../js/init.js"></script>
<script src="../js/slider.js"></script>
This works perfectly for my pages placed in my root folder, ie "index.php"
However, the pages that are located in folders, don't seem to call the javascript when I use the .php include such as;
<?php include '../../../Core/js.php';?>
Although, when I don't use the include funtion, and just paste the < script>, it calls it perfectly. This wouldn't be a huge problem for me, but it doesn't allow the mobile site to run properly.
The first pages such as "index.php" have the mobile navigation, whereas pages located in the folders and don't have the php include code, don't have the same user friendly navigation. If someone could help me fix this, that would be great!
I think your problem is about paths.
When you execute: <script src="../js/jquery.min.js"></script> in your browser, it looks at the URL and goes from there. Let's say you're in http://example.com/products/index.php. The browser will try to load the JS from http://example.com/products/../js/jquery.min.js, which is http://example.com/js/jquery.min.js.
To avoid this, you should use absolute paths, like:
<script src="/js/jquery.min.js"></script>
Then it will always try to load http://example.com/js/jquery.min.js independently from the current URL.
As for PHP includes, I would advise you to use absolute paths when including files. There are many strategies, like using $_SERVER['DOCUMENT_ROOT'], using dirname() functions, using a global variable with your includes path, etc.
Whatever you choose, your includes should look something like:
<?php include '/var/www/includes/Core/js.php'; ?>
I'm assuming your folder structure is something like this:
/
index.php
js
jquery.min.js
jquery.dropotron.min.js
skel.min.js
...
Core
js.php
content
some folder
HTML files
...
So if you are inside content -> some folder -> html file your js.php should reflect this:
<script src="../../js/jquery.min.js"></script>
as you could see the path changes and thats where your error comes from
Use the absolute path. Your absolute path is the actual location on the server. An easy way to find it is look at the path you're connecting to with ftp.
It might look something like this /home/username/public_html/Core/js.php

Image path issue

I have several images in css files and js files and we ASP.Net MVC.
After deploying in the server images are getting loaded from the path
http://example.com/Images/image.png, whereas the actual is in http://example.com/mysite/Images/image.png
I have tried several paths
like
/Images/image.png
../Images/image.png
Images/image.png
../../Images/image.png.
However browser always tries to load it from the Images folder directly under the domain which does not exist.
Let say that you have following structure
MySite
MySite\Content\CSS\styles.css
MySite\Content\Images\img1.png
In styles.css
.myheader{
background-image:url('../Images/img1.png');
}
OR
In layout.cshtml or index.cshtml
<div style="background-image:url('#Url.Content("~/Content/Images/img1.png")');"></div>
OR
<img src='#Url.Content("~/Content/Images/img1.png")' />
one thing you have to make sure that it path is case-sensitive
I am using these tricks in my projects.
I hope it will help you.

The relativity of "<script src="

So on a HTML page, when you link to a JavaScript file, is it the same as it actually being there (like include() in php) or does everything have to be relative to the folder that the js file is in?
eg if I have <script src="scriptage/my.js"> </script> in index.html, is a image file to the js file 'image.png' or '../image.png'
JavaScript has no concept of files. Although certain extensions may provide file read/write APIs, everything is relative to the document.
Just like the php include(), it relates to the path of the file where you have attached the script. like here index.html
Your images should be relative to the JavaScript file, not the calling document.

Categories

Resources