CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4
user2857908
user2857908

Reputation: 91

MVC - dropdownlist onchange never fired in jquery

I am struggling to get dropdown list onchange event in jquery. When selecting Date from dropdownlist, other textbox should be invisible and date textbox shoud be visible. And when selecting Status, other textboxes should be invisible and status of dropdownlist should be visible. It happens nothing. Please look at my code what i am doing wrong. Your help means alot.

_Layout.cshtml

 <head>
  <script type="text/javascript">
    $(function () {
        $('#categorie').on('change', function () {
            if ($(this).val() == "Date") {
                $('#keyword').hide(); //invisible
                $('#txtcalendar').show();
            } else if ($(this).val() == "Status"){
                $('#keyword').hide(); //invisible
                $('#txtcalendar ').hide();
                $('#tmstatus ').show();
            }
            .
            .
            .
        });

    });
    </script> 
</head>

Index.cshtml

@Html.DropDownList("categorie", new SelectList(new[]
                                                   {
                                                       "All", "Id", "Status",
                                                       "Vendor", "Date"
                                                   }) as SelectList)



 <p> Keyword: @Html.TextBox("keyword")  <input id="Submit" type="submit" value="Search"  /> </p>

 <p>Calendar @Html.TextBox("txtcalendar", new {}, new { @class = "myclass",  style = "display:none;" })</p>

 @Html.DropDownList("tmstatus", new SelectList(new[]
                                                   {
                                                       "Success", "Pending", "Error",
                                                   }) as SelectList)

Upvotes: 3

Views: 8310

Answers (3)

SpiderCode
SpiderCode

Reputation: 10122

In your application, Go to app_start\BundleConfig.cs and in RegisterBundles method check that bundling for Jquery has been registered or not. It should have added bundle for jquery as mentioned below :

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

If it is not there in RegisterBundles method then add it. And go to below steps :

  1. Go to your _Layout.cshtml page

  2. Add @Scripts.Render("~/bundles/jquery") before end of the head tag. In my sample application it looks like as mentioned below:

    enter image description here

  3. Cut your javascript code of dropdownlist change from _Layout.cshtml

  4. Paste it in index.cshtml at the end.

My Index.cshtml page looks like this :

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

<h2>Index Page</h2>

@Html.DropDownList("categorie", new SelectList(new[]
                                                   {
                                                       "All", "Id", "Status",
                                                       "Vendor", "Date"
                                                   }) as SelectList)



<p> Keyword: @Html.TextBox("keyword")  <input id="Submit" type="submit" value="Search" /> </p>

<p>Calendar @Html.TextBox("txtcalendar", new { }, new { @class = "myclass", style = "display:none;" })</p>

@Html.DropDownList("tmstatus", new SelectList(new[]
                                                   {
                                                       "Success", "Pending", "Error",
                                                   }) as SelectList)

<script type="text/javascript">
    $(function () {
        $('#categorie').on('change', function () {
            if ($(this).val() == "Date") {
                $('#tmstatus ').show();
                $('#keyword').hide(); //invisible
                $('#txtcalendar').show();
            } else if ($(this).val() == "Status") {
                $('#keyword').hide(); //invisible
                $('#txtcalendar ').hide();
                $('#tmstatus ').show();
            }
        });

    });
</script>

Upvotes: 3

Bart Beyers
Bart Beyers

Reputation: 3384

Don't put your script in the <head> tag, but put it lower in the layout page. Just before the </body> tag you will find 

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

Put your script below that like this:

<body>
....
....    
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
<script type="text/javascript>
    $(function () {
        $('#categorie').on('change', function () {
           if ($(this).val() == "Date") {
               $('#keyword').hide(); //invisible
               $('#txtcalendar').show();
           } else if ($(this).val() == "Status"){
               $('#keyword').hide(); //invisible
               $('#txtcalendar ').hide();
               $('#tmstatus ').show();
           }
           .
           .
           .
    });
</script>
</body>
</html>

Upvotes: 0

ASG
ASG

Reputation: 955

Try putting your script in an on ready at the bottom of your page

$(document).ready(function() {
    $('#categorie').on('change', function () {
        if ($(this).val() == "Date") {
            $('#keyword').hide(); //invisible
            $('#txtcalendar').show();
        } else if ($(this).val() == "Status"){
            $('#keyword').hide(); //invisible
            $('#txtcalendar ').hide();
            $('#tmstatus ').show();
        }
        .
        .
        .
});

Upvotes: 0

Related Questions