How to append DDL during AJAX call

Question

I'm trying to alter the value of a drop down list whenever the partial view is called. At the moment the AJAX call retrieves the information i need, but the user has to alter the location value in the partial view before saving, basically i want the value of location to be changed during the ajax call, thus saving the user time on altering the value by hand, i've attempted it but clearly doesn't work (see the code below), any ideas on where im going wrong?

_CameraInfo.cshtml (partial view)

@model JobTracker.Models.Job


<h2>Edit and Confirm</h2>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>Job</legend>

    @Html.HiddenFor(model => model.JobID)

    @Html.HiddenFor(model => model.OrderID)

  <div class="editor-label">
        @Html.LabelFor(model => model.LocationID, "Location")
    </div>
    <div class="editor-field">
        @Html.DropDownList("LocationID", null, new {id ="Location" })
        @Html.ValidationMessageFor(model => model.LocationID)
    </div><br />

    <div class="editor-label">
        @Html.LabelFor(model => model.HighPriority)
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.HighPriority, new SelectList(
    new[] 
    { 
        new { Value = "Yes", Text = "Yes" },
        new { Value = "No", Text = "No" },
    },
     "Value",
     "Text",
    Model
))

        @Html.ValidationMessageFor(model => model.HighPriority)
    </div><br />

    <div class="editor-label">
        @Html.LabelFor(model => model.Comments)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.Comments)
        @Html.ValidationMessageFor(model => model.Comments)
    </div><br />

      <div class="editor-label">
        @Html.LabelFor(model => model.Status)
    </div>
    <div class="editor-field">
           @Html.DropDownListFor(model => model.Status, new SelectList(
    new[] 
    { 
        new { Value = "In Progress", Text = "In Progress" },
        new { Value = "Completed", Text = "Completed" },
        new { Value = "Not Started", Text = "Not Started" },
        new { Value = "Stopped", Text = "Stopped" },
    },
     "Value",
     "Text",
    Model
))
        @Html.ValidationMessageFor(model => model.Status)
    </div><br />

    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>

}

AJAX call

     $(document).ready(function () {
    $('#qr-number').on('change', function () {
        var ddl = $('#Location');
        var value = "cleanroom";
        $.ajax({
            type: "Get",
            url: '/CameraInfo/Edit',
            data: { ID: $('#qr-number').val() },
            success: function (response) {
                ddl.append(value);
                $('#Sample').html(response);
            },
            error: function (response) {
                if (response.responseText != "") {
                    alert(response.responseText);
                    alert("Some thing wrong..");
                }
            }
        });
    });
    });
});

The DDL is populated by the model data by the way.

Please let me know if you require any further information :)

Not clear what your asking. Are you wanting a particular option to be selected in the dropdownlist for `LocationID`? — , Apr 07 '15 at 13:39
yes, i want a particular option to be selected on once the partial view renders to the user — Matchbox2093, Apr 07 '15 at 13:41
Whats `$('#qr-number')`? Whats `$('#Sample')`? If the value of property `LocationID` matches the value of one of the options then that option will be selected. But there is so much odd code its hard to understand this. For example it should be just `@Html.DropDownListFor(m => m.HighPriority, new SelectList(new List() { "Yes", "No" })` — , Apr 07 '15 at 13:46
$('#qr-number') is the JobID parsed from the scanned QR code and $('#Sample') is where the partial view is loaded from the AJAX call — Matchbox2093, Apr 07 '15 at 13:47
But does that partial view exist when your first run this ajax code? If not then `var ddl = $('#Location');` would be undefined. Even if it did exist, what are you trying to do with `var value = "cleanroom";` and `ddl.append(value);`? — , Apr 07 '15 at 13:51
it does exist, the var value and ddl.append was my attempt at altering the DDL value — Matchbox2093, Apr 07 '15 at 13:52
If the dropdown includes a option with the value "cleanroom", then to select it using javascript it would be `ddl.val('cleanroom')` but your view has `@Html.DropDownList("LocationID", null, ..)` which indicates you have other errors as well, so I'm not really sure what your doing — , Apr 07 '15 at 13:58
the locationID, null is needed in order to alter the text, it works fine for changing the values to the database — Matchbox2093, Apr 07 '15 at 14:09
the dropdownlist is binded in the controller, the "LocationID" is the binder from the controller — Matchbox2093, Apr 07 '15 at 15:02
Resolved using the following question http://stackoverflow.com/questions/29523943/ddl-fails-to-change-during-ajax-call-mvc?noredirect=1#comment47203984_29523943 — Matchbox2093, Apr 08 '15 at 20:53

score 0 · Answer 1 · answered Apr 07 '15 at 13:44

0

for ddl value
ddl.val(value);
for ddl text
ddl.text(value);
use .val() or .text() not .append()

answered Apr 07 '15 at 13:44

ozil

6,930
9
33
56

i've altered it to try .val() and .text() the value still doesnt change :/ – Matchbox2093 Apr 07 '15 at 13:51

How to append DDL during AJAX call

1 Answers1