Selecciones encadenadas en jQuery: Múltiples búsquedas de AJAX

Tengo un problema al obtener una serie de entradas selectas vinculadas para trabajar. Básicamente, quiero poder seleccionar un número de vuelo en el primer menú desplegable, luego rellena el segundo con destinos válidos y el tercero con números de vuelo válidos.

Obtener un menú desplegable para rellenar el siguiente parece estar funcionando bien, el problema parece ser que, como necesito un cambio en el primer menú desplegable para poblar también el tercero, simplemente no parece estar funcionando de manera confiable. A veces funciona, a veces no, y no estoy seguro de por qué.

El código javascript:

$(function(){ $("select#fromICO").change(function(){ $.getJSON("/trip_reports_chain.php",{from: $('#fromICO').val(), t: 'd'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#toICO").html(options); }); $.getJSON("/trip_reports_chain.php",{to: $('#toICO').val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#flightNo").html(options); }); }) $("select#toICO").change(function(){ $.getJSON("/trip_reports_chain.php",{to: $(this).val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += '' + j[i].optionDisplay + ''; } $("select#flightNo").html(options); }) }) }) 

Y el HTML / PHP:

  Origin  0)) { while ($row = mysql_fetch_array($mysql_result)) { echo "".$row['originICO'].""; } } ?>   Destination   Flight Number  

El código en trip_reports_chain.php devuelve de manera confiable los resultados JSON correctos, por lo que también veo un poco de publicación puntual.

Por lo tanto, los síntomas son: Si selecciono el menú desplegable de origen, se llena el destino pero no el número de vuelo. Si selecciono un destino (que tiene que ser uno con más de un destino posible, ya que no hay un evento de ‘cambio’ en el cuadro de selección), entonces se rellenan los números de vuelo. Si luego vuelvo y cambio el origen, a veces cambia tanto el destino como el número de vuelo. Puede haber un patrón, pero no puedo verlo.

Envíe su segunda solicitud (para el número de vuelo) cuando se realice la primera solicitud. Como getJSON () devuelve un objeto jqXHR , puede usar su método .done () que se activa tan pronto como la solicitud se completa con éxito. Con el método de encadenamiento su código puede verse así:

 $(function(){ $("select#fromICO").change(function(){ $.getJSON("/trip_reports_chain.php",{from: $('#fromICO').val(), t: 'd'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += ''; } $("select#toICO").html(options); }) .done(function(){ $.getJSON("/trip_reports_chain.php",{to: $('#toICO').val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += ''; } $("select#flightNo").html(options); }); }); }) $("select#toICO").change(function(){ $.getJSON("/trip_reports_chain.php",{to: $(this).val(), t: 'f', from: $('#fromICO').val()}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += ''; } $("select#flightNo").html(options); }) }) }) 

Entonces, AJAX es asíncrono. Eso significa que los tres getJSON son disparados (casi) simultáneamente.

Debido a sus dependencias (el 2do DD depende del 1er, y así sucesivamente), debe conectarlos en cascada correctamente. Cada Bloque (opción var, etc.) se activa cuando finaliza getJSON.

    Intereting Posts