why is jquery not working in mvc 3 application?

Question

I got a jquery reference in my _Layout.cshtml . It does not look like this is working in my Index.cshtml page though: the /Home/GetSquareRoot is not hit? (it works when I uncomment the jquery reference in the index.cshtml though)

ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>

@*<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>*@

<script type="text/javascript">
    function calculateSquareRoot(numberToCalculate) {
        $.ajax({
            type: 'GET',
            url: '/Home/GetSquareRoot',
            data: { number: numberToCalculate },
            success: function (data) { alert(data.result); }
        });
    }

</script>

    <button type="button" onclick="calculateSquareRoot(9);">
        Calculate Square</button>

_Layout.cshtml

<!DOCTYPE html>
<html>
<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.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
</head>

<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

homecontroller

   public JsonResult GetSquareRoot(long number)
        {
            var square = Math.Sqrt(number);
            return Json(new { result = square }, JsonRequestBehavior.AllowGet);
        }

@user603007 may be you can try my solution....

naim shaikh
– naim shaikh

2012-05-01 04:00:36 +00:00
Commented May 1, 2012 at 4:00 — naim shaikh
– naim shaikh, Commented May 1, 2012 at 4:00

Matt Kemp · Accepted Answer · 2012-05-01 01:18:38Z

1

It works when you have the jQuery reference commented out, because your _Layout.cshtml file has the reference as well (just stating the facts, I realise you probably know this).

This also means that you have your routing set up correctly and that there is nothing wrong with the URL '/Home/GetSquareRoot'

The code looks fine, the only unknown that I can see is that ../../Scripts/ actually goes to the same place as ~/Scripts/ (will depend on what the URL of your page looks like).

I would use Google Chrome to check for script errors on your page: go to your page, right click and 'inspect element' on the page, then check that you don't have any script errors (bottom right of the inspector will have a red circle if you do).

If you have script errors that could be stopping the AJAX call from running.

answered May 1, 2012 at 1:18

Matt Kemp

2,9402 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user603007 Over a year ago

it is working now : I removed the <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script> from the layout.cshtml!

Uchendu Nwachuku · Accepted Answer · 2012-05-01 02:47:02Z

0

When referring to hard-coded content URLs in your application, it's always a good idea to use Url.Content.

So instead of this:

<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>

use this:

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

This way the correct URL to the jQuery script file will always be used, no matter what the URL of the page is.

answered May 1, 2012 at 2:47

Uchendu Nwachuku

4503 silver badges13 bronze badges

Comments

naim shaikh · Accepted Answer · 2012-05-01 04:00:06Z

0

Try out this one...

public JsonResult GetSquareRoot(long? number)
        {
            var square = Math.Sqrt(number);
            return Json(new { result = square }, JsonRequestBehavior.AllowGet);
        }

answered May 1, 2012 at 4:00

naim shaikh

1,1112 gold badges9 silver badges21 bronze badges

Collectives™ on Stack Overflow

why is jquery not working in mvc 3 application?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related