CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-4razor
Ghazanfar Khan
Ghazanfar Khan

Reputation: 3718

Razor Dropdown onchange event not firing always undefined

I am using dropdownlist helper in my razor view

@Html.DropDownList("Country", null, "Select Your Country", new { @class = "form-control", onchange = "clickMe()" })

I have placed my jquery file in the head section of Layout.cshtml

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Scripts.Render("~/bundles/jquery")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

But when I placed my script in a razor view 

<script>
    $(document).ready(function () {
        function clickMe() { 
            alert();
        }
    });
</script>

it gives Reference error : clickMe() is undefined. When I try this code to popup an alert to check that my jquery file is loaded this works fine

<script>
    $(document).ready(function () {
        alert();
    });
</script>

Upvotes: 0

Views: 9519

Answers (3)

JoshYates1980
JoshYates1980

Reputation: 3626

Here is another option:

<script>
 $('#CountryID').change(function() {
    var value = $('#CountryID').val();


<script>

Just make sure you give your dropdown name= or id=

Upvotes: 0

Erik Philips
Erik Philips

Reputation: 54628

The actual reason this doesn't work is because of Scoping. The following code:

@Html.DropDownList("Country", 
  null, 
  "Select Your Country", 
  new { @class = "form-control", 
        onchange = "clickMe()" })

Yields something like (I hope):

<select onchange="clickMe()">
// this is looking for a global `clickMe()` function
// but is it available?
</select>

I've annotated your code here:

  // clickMe() is out of scope
  // it is not available here

  $(document).ready(function () 
  // start of anonymous function scope
  {

    function clickMe() 
    // start of clickme function scope
    { 
      alert();
    }
    // end of clickme function scope

    // clickMe() is available here
    // it was defined in this scope

  });
  // end of anonymous function scope

  // clickMe() is out of scope
  // it is not available here

</script>

I absolutely do not recommend this, but to understand how you could make it work horribly, you could do the following:

<script>
  $(document).ready(function () 
  {
    window.clickMe = function()
    { 
      alert();
    }
  });
</script>

By assigning the function to the window object you make it globally available.

The better way to do it, taking advantage of Matt Bodily's Answer might look like:

<script>
    $(document).ready(function () {

        function clickMe() { 
            alert('made it!');
        }

        $(document).on('change', '#Country', clickMe );
    });
</script>

Upvotes: 4

Matt Bodily
Matt Bodily

Reputation: 6423

I much prefer putting the click events in the script. Try removing your on change event and replacing your function clickMe with

$(document).on('change', '#Country', function(){
    alert('made it!');
});

this selects on the ID of the dropdown which I believe will be country in the rendered drop down

Upvotes: 2

Related Questions