mvc binding properties in a razor view to make it work with Ajax (JQuery)

Question

I have a Razor view like this:

        <div class="form-group">
        @Html.Label("Customer", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.myID, Model.myID, "Select a customer...", htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.myID, "", new { @class = "text-danger" })
        </div>
    </div>

In the top of page a created a JQuery function to populate a second dropdown based on myID.

    $(document).ready(function () {
    $("#myID").change(function () {
        $("#otherID").empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetData")',
            dataType: 'json',
            data: { id: $("#myID").val() },
            success: function (data) {
                $.each(data, function (i, element) {
                    $("#otherID").append('<option value="' + element.Value + '">' + element.Text + '</option>');
                });
            },
            error: function (ex) {
                alert('Error get data.' + ex);
            }
        });
        return false;
    })
});

a button in the page select automatically a value of the first dropdown (based on a input from textbox) and a server call starts. I return a Json with the necessary values to make binding works: a new MYID to select.

    $(function () {
    $("#myButton").on('click', function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetNewID")',
                datatype: 'json',
                data: { myTextbox: $("#myTextBox").val() },
                success: function (result) {
                    $("#myID").val(result[0]); // <--- I EXPECTED A TRIGGER ON "onchange" ABOVE!
                },
                error: function (ex) {
                    alert(ex.responseText);
                }
            });
            return false;
    });                
});

The result is that my first dropdown is correctly selected on the value of new "myID" but the trigger on "onchange" won't occur. What is the correct way to bind properties client side (see Ajax) so they can react to the triggers?

Thanks!!

Answer 1

You can trigger events manually using trigger()

$("#myID").val(result[0]).change();
// which is shorthand for:
$("#myID").val(result[0]).trigger('change');

Changing the value programatically isn't enough to trigger it.