Uncaught Type: Undefined is not a function JS error

Question

I have been looking for this and tried with lot of found solutions but that didn't work in my case. In my MVC 4 application with dropdown change event I am calling a JS method to pass the selected value to the controller which works fine but in console I've been getting this error continuoulsy in every change event.

Following is my razor source for dropdown:

    <div>
        @Html.LabelFor(model => model.CustId) 
        @Html.DropDownListFor(model => model.CustId, new SelectList(Model.ddlCust, "Value", "Text"), "All Customer", new { id = "CustID", onchange = "ShowCust()", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.CustId)
   </div> 

And my JS client function looks like:

<script>
    function ShowCust() {
            var custId = $("#CustID").val();
            var Url = "@Url.Content("~/Customer/GetCustId")";
            $.ajax({
                url: Url,
                type: 'POST',
                dataType: 'json',
                data: { CustID: custId },
                success: function (data) {
                    return data;
                }
            });
        }
</script>

In Console it throws the error on every dropdown change:

uncaught type error: undefined is not a function.

And finally in source it shows as:

<script>(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {ShowCust()
};}}}})</script>

Also it marks the part with underline in braces before function ShowCust ( { ShowCust).

I am not able to figure out what exactly I am doing mistake over here.

Does anyone see any issues with my html or javascript? Or the way I written the script? Thanks in advance.

Answer 1

I think you have miss out the '@' for Id & onChange

new { @id = "CustID", @onchange = "ShowCust()", @class = "form-control" })

@id = "CustID" @onchange = "ShowCust()"