Jakub Holovsky
Jakub Holovsky

Reputation: 6782

jQuery does not work in ASP.NET MVC View

could someone please point out where I might be wrong? My problem is that in my views I have some scripts and it seems that jQuery just somehow does not work there (probably my fault somewhere).

I have reference to jQuery specified in my layout page that is being loaded always. Then I have my view that looks like this

@model jakubholovsky.com.Models.BlogPost
@using jakubholovsky.com.DataModels
@using jakubholovsky.com.Enum
@{
    ViewBag.Title = "Jakub Holovsky - Blog - Post - " + Model.Post.title;
}
<h2>
    @Model.Post.title</h2>
<div>
 SOME CODE
</div>
<script type="text/javascript">
    $(document).ready(function () {
        alert("hello");
        $('#addACommentDiv').click(function () {
            alert("hello");
            if ($('#commentFieldset').is(':hidden')) {
                $("#commentFieldset").slideDown("slow");
                $('#addACommentDivButton').html('Close commenting');
            }
            else {
                $("#commentFieldset").slideUp("slow");
                $('#addACommentDivButton').html('Comment on this article');
            }
        });
    });
</script>

I have tried to reference jQuery in my view but no luck. I also tried to use basic javascript(just alert window) to check if that works and it does. I also checked if jQuery is loaded in browser (it is).

The alert("hello"); line is there just to see if it passes the ready function.

This is how I have it referenced in my layout page.

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("/Scripts/jquery-1.7.2-vsdoc.js")" type="text/javascript"></script>
    <script src="@Url.Content("/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
    <script src="@Url.Content("/Scripts/google-analytics.js")" type="text/javascript"></script>
</head>

Thank you for helping me out.

Upvotes: 0

Views: 5844

Answers (2)

Calgary Libertarian
Calgary Libertarian

Reputation: 414

I suggest using the bundling feature so that you can use a wild card to select your scripts. this will help with future version upgrades of your scripts.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.*"));

and then render it in your layout or html somewhere

  @Scripts.Render("~/bundles/jquery")

Upvotes: 1

Savanetech
Savanetech

Reputation: 206

Before the / of each link, try adding the "~" tilde symbol. I ran into this issue as well. Also, try dragging the physical js file (from the solution explorer) onto this layout page. It will confirm if you got the folder structure/path correct.

The last thing I've had to do is use something like "../" How many times you use it depends on how many parent folders it must go up.

Hope that helps.

Upvotes: 0

Related Questions