CODEWITHSUNDEEP
jqueryasp.net-mvc-3.net-4.0
Alex Hope O'Connor
Alex Hope O'Connor

Reputation: 9694

JQuery ready function not executing when rendered inside view

Just a standard MVC site, however I tried to add a JQuery on document ready handler to my home view rather then my layout page and found that it would not execute it when I did so.

Layout Page:

<!DOCTYPE html>

<html>
    <head lang="en">
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Reset.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/modernizr-2.5.3.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
        @RenderSection("Head");
    </head>

    <body>
        <header id="header">
            <h1>Home</h1>

            <nav id ="nav">
                <a href="@Url.Action("Index", "Home")"><div>Home</div></a>
                <a href="@Url.Action("AboutMe", "Home")"><div>About Me</div></a>
                <a href="@Url.Action("Index", "Project")"><div>My Projects</div></a>
                <a href="@Url.Action("Index", "Contact")"><div>Contact Me</div></a>
                <a href="@Url.Action("Index", "Blog")"><div>Blog</div></a>
            </nav>
        </header>

        <section id="content">
            @RenderBody()
        </section>
    </body>
</html>

Home Page:

@{
    ViewBag.Title = "Home";
}

@section Head
{
    <link href="@Url.Content("~/Content/HomeIndex.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Jquery.Tweet.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tweet.js")"/>

}

<img id="home-image" alt="Home page image" src="..." width="300" />

<section id="introduction">
    <h3>WelcomeLi</h3>
    <p>Text goes here.<p>
</section>

<section id="get-in-touch">
    <h4>Get In Touch</h4>
    <img id="facebook-button" alt="Find me on Facebook." src="@Url.Content("~/Content/Images/FacebookButton.png")" />
    <img id="skype-button" alt="Contact me via Skype." src="@Url.Content("~/Content/Images/SkypeButton.png")" />
    <img id="linkedin-button" alt="Find me on LinkedIn" src="@Url.Content("~/Content/Images/LinkedInButton.png")" />
</section>

<section id="twitter"></section>

So basically what I did was added a jquery document ready handler to the head on my layout page, it executes fine, however if I add the script section into the head section of my home view it will not execute. Can someone explain why this is happening? It does not make any sense to me.

Also when I view the source the page looks like it is rendering fine with the script in the right place and correctly formatted, this has me stumped, any help is much appreciated.

Thanks, Alex.

Upvotes: 1

Views: 566

Answers (1)

user1263800
user1263800

Reputation:

As far as i know you cannot self-close a < script > tag

so please correct the:

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tweet.js")"/>

to

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tweet.js")"></script>

Upvotes: 3

Related Questions