Calling external .js from ASP.NET MVC

Question

I'm javascript newbie. What I'd like to be able to do is to call a function from .js file sitting in ASP.NET MVC project's scripts folder.

The function is:

function myfunction() {
    alert("HELLO");
}

...and it resides in file brfix.js

On a viewpage I call it like this:

<script src="../../Scripts/brfix.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        myfuntion();
    });
</script>

But the code doesn't work. However, if I place js-code directly onto the viewpage, it works, like this:

$(document).ready(function() { alert("HELLO"); });

How to call a file-based js function? Could some JavaScript-Big-Kahuna help me out? =)

-pom-

Answer 1

It may be that the reference to the external file is wrong:

<script src="../../Scripts/brfix.js" type="text/javascript"></script>

Make sure the reference is correct. You can try by using view source to see the actual location ../../Scripts/brfix.js gets translated to in the final page.
You can also try with FireBug of FireFox.

Answer 2

If your mvc site is the root site in iis you can start the script src with a slash to get to the scripts. otherwise you can use an asp:ScriptManager to include the scripts

Answer 3

If that code is pasted directly from your source code, you have a typo so that'd be why it doesn't work!

your function is called myfunction(), but you're calling myfuntion()

you should enable js errors in your browser when developing. You don't say which browser you're using. For IE it's in Tools - Options - Advanced. Uncheck the "disable script debugging" options. In firefox I'd use something like FireBug as Dror says, if memory serves there are things that appear in the event of a javascript error. If you are still having problems I would try installing Fiddler2 (in IE) and building a request for the js file and see what comes back.

Another option would be to put a debugger; call just before you call your function, you should then be able to step through the javascript.

Answer 4

As other posters have mentioned, there is a typo. However...

Check out the Url.Content() method for referencing your site content. (images, scripts, etc...) Using ../.. isn't reliable, especially if you have varying levels of depth in your URLs or your application lives in a subdirectory.

Here's a helper I use in most of my projects, for example:

public static string Script(this HtmlHelper Html, string url)
{
    UrlHelper Url = new UrlHelper(new RequestContext(Html.ViewContext.HttpContext, Html.ViewContext.RouteData));
    string html = "<script type=\"text/javascript\" src=\"{0}\"></script>";
    return string.Format(html, Url.Content(url));
}

And here it is being called:

<%= Html.Script("~/public/js/blah.js") %>

Answer 5

I had the same problem and it turned out that I had a few js files that weren't being found. If your MVC project structure is the default VS setup and your View page is in Home for example, then I think below will find the file:

<script src="../Scripts/brfix.js" type="text/javascript"></script>

But even if that one is found other js files not being found caused my $(document).ready not to work. Check your page in Firefox's Firebug, if a file isn't found you will see html markup with a message saying a resource could not be found, located underneath the offending reference. Once I resolved all the js references then my $(document).ready worked.

Strangely VS was telling me it couldn't find the js files when the references were correct, and wasn't flagging the problem when the references were incorrect.