0

Greetins all.

I"m working with a simple MVC 3 .net application and trying to figure out why I cannot get jQuery to work.

Development environment: Visual Studio 2010, MVC3 Razor

I placed the following in section of _layout.cshtml:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" rel="stylesheet" type="text/css" />     
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="Stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="Stylesheet" type="text/css" />   

     @Script("jquery-1.7.2.min.js")
     @Script("jquery-ui.1.8.11.min.js")
     @Script("jquery.ui.core.js")
     @Script("GHRIInventory.js")

@Script is a custom helper:

@helper Script(string scriptName){ }

GHRIInventory.js is an external .js file with my code and it is located in my Scripts directory:

/// <reference path="jquery-1.5.1.js" />
/// <reference path="jquery-ui-1.8.11.js" />
/// <reference path="jquery-1.5.1-vsdoc.js" />
/// <reference path="jquery.ui.autocomplete.js" />

$(document).ready(function () {

      $(".button").click(function () {
        $(this).attr("value", "please wait..");
    });
});

In my view I placed the following:

It's not a complicated script I"m only using it to prove jQuery is properly setup. What's supposed to do is when I click on the button the button text changes from "My button" to "please wait..". When I run the app, I see the button but nothing happens when I click it.

I feel I have all the elements necessary but it's still working: 1) add jQuery to _layout.cshtml 2) add my custom .js to _layout.cshtml so that it's available to all my views. 3) create, code and place custom .js in script folder 3) add HTML elements to the view

Here's what the source looks like when I run the application:

<

head>
    <meta charset="utf-8" />
    <title>Create</title>



    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />     
    <link href="/Content/themes/base/jquery.ui.datepicker.css" rel="Stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery.ui.theme.css" rel="Stylesheet" type="text/css" />   


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

          <script src="/Scripts/jquery-ui.1.8.11.min.js" type="text/javascript"></script>   

          <script src="/Scripts/jquery.ui.core.js" type="text/javascript"></script>   





     <script src="/Scripts/jquery.ui.core.min.js" type="text/javascript"></script>
          <script src="/Scripts/GHRIInventory.js" type="text/javascript"></script>   


     <script src="../../Scripts/jquery.ui.datepicker.min.js" type="text/javascript"></script>
    <script src="../../Scripts/DatePickerReady.js" type="text/javascript"></script>

</head>


<body>

<input id="button_click" type="button" value="my button" />


</body>

Any trouble shooting suggestions would be greatly welcomed...thanks...

1
  • Which browser are you using? I would bring up the developer toolbar / firebug and try stepping through the javascript / seeing if there are any errors preventing the script from running.
    – magritte
    May 1, 2012 at 16:18

2 Answers 2

1

It looks like your selector is wrong; you're selecting all objects with a class 'button' - I think you need something like $('input[type="button"]) instead or $('#button_click') to select by id

1
   you are selecting by class name i.e. $(".button") and no class is assigned. either you should select by control type i.e. $("button") or by id i.e. $("#button_click").

As well as confirm that your script files are placed on same path or not as written in output source

2
  • @ Tanveer...Thanks! that did it! I'm finding the jQuery syntax to be a bit sticky..but working on it.. thanks again..T
    – TerryB
    May 4, 2012 at 19:59
  • this is jquery syntax , if you need furthur assistance then plz do inform me :)
    – Tanveer
    May 7, 2012 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.