Question

I’m using jQuery and AJAX to add rows to a table. I have the following code in a function.

var fila='<tr>';
fila+='<td><select id="listaPagares'+cantFilas+'"></select></td>'; //Keep this in mind
fila+='<td><select id="listaCuotas'+cantFilas+'"></select></td>';
fila+='<td><input type="text" name="valor'+cantFilas+'" id=”valor'+cantFilas+'" /></td>';
fila+='<td id="desc'+cantFilas+'"></td>';
fila+='<td id=”total'+cantFilas+'"></td>';
fila+='</tr>';
$('#lineaDetalle tbody').append(fila);

After this, I do an AJAX request. This same request is used in another table, so I’m pretty sure the XML tags that are searched for work. See the “listaPagares[i]” select line above? In the same function, some lines below, I do this, in the success section of the AJAX request.

$(xml).find('data').each(function()
{
    var errmsg = $(this).find('rowsfound').text();
    if(errmsg!='yes')
    {
        if(errmsg=='no')
        {
            $('#error').text('No se encontraron pagarés.');
        }
        else
        {
            $('#error').text('Rut del alumno o del apoderado erróneos.');
        }
        $('#errmsg').show(500);
    }
    else
    {
        $(this).find('pagare').each(function()
        {
            $('#listaPagares'+cantFilas).append('<option value="'+$(this).find('numpagare').text()+'-'+$(this).find('rbd').text()+'">PAGARÉ N° '+$(this).find('numpagare').text()+' '+$(this).find('nomcolegio').text()+'</option>');
        });
    }
});

However, when I press the button that adds new rows, the second append where I add the options to the select doesn’t work. I’m also pretty sure the program goes through that line, I added an alert before it and it displays. What could be ẃrong? Thank you in advance.

EDIT: I added the entire procedure inside the success clause so you can see why I’m using “this”.

Answer 1

My solution was as follows:

I declared a global array with the “cuotas” I wanted to append prior to anything. So, this would happen:

$('#pagares').change(function()
{
    $('#errmsg').append(cargaAjax);
    return encPagos();
    $('#errmsg:last-child').remove();
});

In encPagos this happens:

$('#pagosHechos table tbody').empty();
arrCuotas=[];
$(this).find('pagos').each(function()
{
    $(this).find('pago').each(function()
    {
        $('#pagosHechos table tbody').append('<tr><td>'+$(this).find('concepto').text()+'</td><td>'+$(this).find('valor').text()+'</td><td>'+$(this).find('pagado').text()+'</td><td>'+$(this).find('dif').text()+'</td><td>'+$(this).find('fvenc').text()+'</td></tr>');
        arrCuotas.push($(this).find('concepto').text());    
    });
});

So, whenever I add a row, I only have to do this:

var fila='<tr>';
fila+='<td><select id="listaCuotas'+cantFilas+'" name="listaCuotas'+cantFilas+'">';
for(i=0;i<arrCuotas.length;i++)
{
    fila+='<option value="'+(i+1)+'">'+arrCuotas[i]+'</option>';
}
fila+='</select></td>';
fila+='<td><input type="text" name="valor'+cantFilas+'" id="valor'+cantFilas+'" /></td>';
fila+='<td id="desc'+cantFilas+'">'+desc+'%</td>';
fila+='<td id="total'+cantFilas+'"></td>';
fila+='</tr>'