Jquery on change function not firing in asp.net MVC

Question

Jquery on change function not firing in asp.net MVC

Disclaimer: This might seem like a usual issue up front, but please bear with me and read to the end.

I have two files, namely, CreateProject.cshtml and projectMasterNew.js
CreateProject.cshtml

    
    <div class="form-group">
        @Html.LabelFor(model => model.Account.AccountName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Account.AccountName, new SelectList(ViewBag.GetAccount, "AccountId", "AccountName"))
            @Html.ValidationMessageFor(model => model.Account.AccountName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Account.DMName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Account.DMName, new SelectList("", "DMId", "DMName"))
            @Html.ValidationMessageFor(model => model.Account.DMName, "", new { @class = "text-danger" })
        </div>
    </div>
    <script src="~/Scripts/DMS/projectMasterNew.js"></script>
    <script>
        var getDmUrl = '@Url.Action("GetDMList", "Project", new { area = "Masters" })';
    </script>
    
    

projectMasterNew.js

    
    $(document).ready(function () {
        alert($("#Account_AccountName").val());
        $("#Account_AccountName").on("change", function () {
            alert($("#Account_AccountName").val());
            var jsonData = { account: $(this).val() };

            getJsonCall("Project Creation", getDmUrl, jsonData, function (response) {
                var dName = $('#Account_DMName');
                alert("Dropdwn update");
            });
            alert("Success");
        }, false);
    });
    
    

The above jquery code worked until this morning.
Problem:
The script was being accessed at the time of page load, since I got the alert before the function. But the change event did not trigger on when I changed the value in the AccountName dropdown. I tried calling the change method as follows:
1.

$(document).on("change", "#Account_AccountName", function () {

2.

$("#Account_AccountName").change(function () {

to no outcome.

So, after a little research, I implemented the below

    
    function DmList() {
        alert($("#Account_AccountName").val());
        var jsonData = { account: $("#Account_AccountName").val() };

        getJsonCall("Project Creation", getDmUrl, jsonData, function (response) {
            var dName = $('#Account_DMName');
            $.each(response, function (index, item) { 
                dName.append($('').text(item.DMName).val(item.DMId));
            });
            alert("Dropdwn update");
        });
        alert("Success");
    }
    @Html.DropDownListFor(model => model.Account.AccountName, new SelectList(ViewBag.GetAccount, "AccountId", "AccountName"), new { onchange = "DmList()"})
    
    

As you'll notice, the jquery function isn't called on Document Ready. That is because, adding that also threw an error

For those wondering, my BundleConfig.cs has

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

and my _Layout.cshtml has

@Scripts.Render("~/bundles/jquery")

I would like to know why this was an issue and what can I do to avoid such discrepancies in the future?

Answer 1

Your change event did not fire because you had an extra false as the last parameter of your change event binding. I am not sure why.

Also make sure you do not have any other script errors in the page.

This should work fine.

$(document).ready(function () {

     $("#Account_AccountName").on("change", function () {
        alert($(this).val());
        var jsonData = { account: $(this).val() };
        // your get JSON call goes here

        alert("Success");
    });
});

Also it might be a good idea to define the getDmUrl variable before using it. I recommend using javascript namespacing instead of simply using a global variable.

<script>
     var myProj = myProj || {};
     myProj.getDmUrl = '@Url.Action("GetDMList", "Project", new { area = "Masters" })';
</script>
<script src="~/Scripts/DMS/projectMasterNew.js"></script>

And in your projectMasterNew.js, use myProj.getDmUrl for your ajax call.