Crumblenautjs Crumblenautjs - 2 months ago 6
Ajax Question

Using Ajax/JQuery filled dropdown, would like to dynamically change UI without another server side call

I have an ajax post method that populates a dropdown. Right now I'm returning the description of the object but would also like to update a textbox with the selection's ID. Everytime I change the selection I would like this textbox to change to the corresponding ID and description without performing an AJAX method.
Here's the code:

function fillCheckRunDD() {
$.ajax({
url: './PayInvoicesWS.asmx/GetCheckRuns',
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
success: function (data) {
var checkRunData = data.d;

$crid = ("#CheckRunID");
$crid.val(checkRunData.CheckRunID);
$dd = $("#check_run_dropdown");

$.each(checkRunData, function (index, value) {
$dd.append("<option value='" + value.CheckRunID + "'>" + value.Description + "</option>");
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
sendErrorEmail(window.location.href, 'FillCheckRunDD', XMLHttpRequest);
}
});


}

Here's the .change function - right now it updates just the description. I can't figure out how to display it's ID in a textbox.

$("#check_run_dropdown")
.change(function () {
var optionChange = $('#check_run_dropdown option:selected').text();
$('#CheckRunDescription').val(optionChange);
$('#CheckRunDescription').prop("disabled", false);
$("#vendor_payment_type").prop("disabled", false);
$("#vendor").prop("disabled", false);

});


This is the initial server side code that populates the dropdown.

public static IEnumerable<CheckRun> GetCheckRuns()
{
using (MiniProfiler.Current.Step("GetCheckRuns()"))
using (var context = rempscoDataContext.CreateReadOnlyContext())
{
return (
from cr in context.check_runs
where cr.check_run_approval_status == 1
select new CheckRun

{
CheckRunID = cr.check_run_id,
Description = cr.description,
CheckRunApprovalStatus = cr.check_run_approval_status
}).ToList();
}
}


Here's also a little screenshot of what I'm trying to do as well.
enter image description here

I appreciate any help with this. Thank you.

Answer

You can use .val() on a select box to get the value of the selected option so assuming you have a text box named CheckRunId you can do this -

$("#check_run_dropdown").change(function () {
    var optionChange = $('#check_run_dropdown option:selected').text();
    $('#CheckRunDescription').val(optionChange);
    $('#CheckRunId').val($(this).val());
    $('#CheckRunDescription').prop("disabled", false);
    $("#vendor_payment_type").prop("disabled", false);
    $("#vendor").prop("disabled", false);
});

It might also be a good idea to change this -

var optionChange = $('#check_run_dropdown option:selected').text();

to -

var optionChange = $('option:selected', this).text();

which will look for a selected option in the changed this.

If you want to re-use the original array you could save the array to a global variable -

var checkRunData;

function fillCheckRunDD() {
$.ajax({
    url: './PayInvoicesWS.asmx/GetCheckRuns',
    data: "{}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    type: "POST",
    success: function (data) {
        checkRunData = data.d;

        $crid = ("#CheckRunID");
        $crid.val(checkRunData.CheckRunID);
        $dd = $("#check_run_dropdown");

        $.each(checkRunData, function (index, value) {
            $dd.append("<option value='" + value.CheckRunID + "'>" + value.Description + "</option>");
        });
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        sendErrorEmail(window.location.href, 'FillCheckRunDD', XMLHttpRequest);
    }
});

Then you can access it in your change function like so -

$("#check_run_dropdown").change(function () {
    var optionChange = $('option:selected', this).index();
    $('#CheckRunDescription').val(checkRunData[optionChange].Description);
    $('#CheckRunId').val(checkRunData[optionChange].CheckRunId);
    $('#CheckRunDescription').prop("disabled", false);
    $("#vendor_payment_type").prop("disabled", false);
    $("#vendor").prop("disabled", false);
});