CODEWITHSUNDEEP
c#jqueryajaxdropdown
Rotondof
Rotondof

Reputation: 203

How can I populate cascading dropdownlist when retrieve data from ajax?

I tried to develop a CRUD web page where there is two cascading dropdown list. All work fine when I input the data to save but when I retrieve the data, the second dropdownlist remains empty.

I've tried putting the population of the second dropdown list when the code is done but doesn't work.

HTML:

  <div class="form-group">
    <label class="control-label">Commessa:</label>
    <select id="joborders" class="form-control"></select>
  </div>
  <div class="form-group">
    <label class="control-label">Analizzatore:</label>
    <select id="analyzers" class="form-control"></select>
    <input type="hidden" id="analyzerId" />
  </div>
  <div class="form-group">
    <label class="control-label">Tipo di manutenzione:</label>
    <select id="maintenancetypes" class="form-control"></select>
  </div>

JQuery:

$(document).ready(function () {

  $('#joborders').change(function () {
    populateAnalyzers();
  })

});

function populateAnalyzers() {

  var obj = {
    joborderId: $('#joborders option:selected').val()
  };

  $.ajax({
    url: "plannedControl.asmx/GetAnalyzers",
    type: "POST",
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    data: JSON.stringify(obj),
    success: function (result) {
    var s = '<option value="0">Selezionare un\'analizzatore...</option>';
    var data = result.d;
    for (var i = 0; i < data.length; i++) {
     s += '<option value="' + data[i].Value + '">' + data[i].Text + '</option>';
    }
    $("#analyzers").html(s);
    },
    error: function (errormessage) {
      alert(errormessage.responseText);
    }
  });
}

JQuery that retrieve data in Edit mode: 

function getPlannedModel(id) {

  var obj = { id: id };

  $.ajax({
    url: "plannedControl.asmx/GetPlannedModel",
    type: "POST",
    data: JSON.stringify(obj),
    contentType: "application/json;charset=UTF-8",
    dataType: "json",
    success: function (result) {
    data = result.d;

    $('#joborders').val(data.JobOrderId).change;
    $('#analyzerId').val(data.AnalyzerId);
    $('#maintenancetypes').val(data.MaintenanceTypeId).change;

    $('#myModalLabel').html('Modifica modello di pianificazione');
    $('#modalEditor').modal('show');
  },
    error: function (errormessage) {
    alert(errormessage.responseText);
    }
  }).done(function () {

    populateAnalyzers();
    $('#analyzers').val($('#analyzerId').val()).change;

 });
}

Upvotes: 2

Views: 125

Answers (1)

Marvin Klar
Marvin Klar

Reputation: 1917

As described in this answer, you have to use .trigger("chosen:updated"); to update your dropdown list options after appending/modifying. You should also use .append(yourNewOptionHere); to update. When you want to clear the list before, make sure to call .empty();

Example:

$('#analyzers').empty();
var newOption = $('<option value="1">get your options here using ajax</option>');
$('#analyzers').append(newOption);
$('#analyzers').trigger("chosen:updated");

Upvotes: 1

Related Questions