how to work update several select with ajax

Question

how to work update several select with ajax

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am loading the contents of several select with ajax, everything works fine when I execute one by one, but when nesting it executes the ajax but does not take the refreshed value, that is, I have three select and I wish that when executing the ajax of the first select update to the second select and update this run a second ajax and this update the third select, I leave my code that is almost ok because it does not take the value shown:

<select name="tipdoc" id="tipdoc" onchange="traerccp(this.value);">
<option value="FAC">FACTURA</option>
<option value="BOL">BOLETA</option>
</select>

<select name="concepto" id="concepto" onchange="traerser(this.value);">
<option value="VTA">VENTA</option>
</select>

<select name="serie" id="serie">
<option value="1">1</option>
</select>

these are the three selections which are nested and each has a function with ajax that updates the other, I show the code in js:

//llamo a los conceptos según el tipo de documento escogido
function traerccp(tido){
        var empr = $("#empresa").val();
        var parametros = {
                            "empr" : empr,
                            "tido" : tido};
        $.ajax({
            data:  parametros,
            url:   '?accion=traerconcepto',
            type:  'post',
            dataType: "html",
            success:  function (response) 
            {
                  $("#concepto").html(response);
            }
        });
// hasta aquí todo bien, hasta cambia los valores en select concepto, pero en
// la siguiente linea de código el valor de concepto no cambio, es decir se
// quedo con el valor "VTA" y al llamar la funcion de traer las series
// tambien con ajax el resultado es erroneo
        traerdoc($("#concepto").val());}

    function traerser(ccep){
        var empr = $("#empresa").val();
        var tido = $("#tipdoc").val();
        var parametros = {
                            "tido" : tido,
                            "ccep" : ccep,
                            "empr" : empr};
        $.ajax({
            data:  parametros,
            url:   '?accion=traerserie',
            type:  'post',
            dataType: "html",
            success:  function (response) 
            {
                  $("#serie").html(response);
            }
        });}

I await your comments thank you.

ajax select

asked by Way Noriega 29.08.2018 в 01:02

source

2 answers

Access JSON obtained through AJAX POO Encapsulation C #

score 0 · Answer 1

try this:

$( document ).on( "change", "#tipdoc", function() {
   // lo que esta dentro de la function traerccp(tido){
}

$( document ).on( "change", "#concepto", function() {
   // lo que esta dentro de la traerser(ccep){
}

with this you eliminate the onchange of the html when making the first call to ajax the element becomes dynamic it appeared after the html was loaded!

link

score 0 · Answer 2

I suggest:

function traerccp(tido){
    var empr = $("#empresa").val();
    var parametros = {
        "empr" : empr,
        "tido" : tido
    };
    $.ajax({
        data:  parametros,
        url:   '?URL_que_retornara_los_datos',
        type:  'post',
        dataType: "html",
        success:  function (response){
              $("#concepto").append(response);
        }
    });
}

Similarly for the other functions. Or alternatively:

dataType: "json",
success:  function (response){
    $("#concepto").append("<option>"+response.concepto+"</option>");
}