Ajax para este script?

Ojopex2 · #1 (**permalink**) 28/05/2012, 10:00

Hola amigos, en este foro encontré este script, el cual está muy bueno (no quise seguir el hilo dónde lo encontré ya que tenía su tiempo Enlace).
Les cuento lo que necesito.
Una de las particularidades que me gustó este código es que puedo agregar un grupo completo de inputs y en especial <select>. Pero surge el impedimiento que en este código hay que declarar todo el formulario dentro el JS, incluídas las opciones del select. El problema es que el select que necesito podría variar, si se agrega o modifica un elemento debería cambiarlo acá. Por eso necesito traer con ajax el contenido del combo.

Pero el problema es que por más que me han explicado como funciona esto de AJAX, no logro captarlo. Si alguien me puede dar una mano, se lo agradecería.

Me imagino que hay que hacer una llamada a un archivo PHP dónde se genere un XML y esto retornarlo. ¿Estoy bien? Pero la verdad no se cómo.

Código HTML:

Ver original<head>
<script type="text/javascript">
var contLin = 3;
function agregar() {
    var tr, td, tabla;
 
    tabla = document.getElementById('tabla');
    tr = tabla.insertRow(tabla.rows.length);
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = "<select id='sel" + contLin + "'>" + 
                   "<option>1" +
                   "<option>2" +
                   "<option>3"; // esto debería venir desde BD
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = "<input type='text' id='t" + contLin + "1' value='t" + contLin + "1'>";
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = "<input type='text' id='t" + contLin + "2' value='t" + contLin + "2'>";
    contLin++;
}
function borrarUltima() {
    ultima = document.all.tabla.rows.length - 1;
    if(ultima > -1){
        document.all.tabla.deleteRow(ultima);
        contLin--;
    }
}
</script>
</head>
<body>
<form>
<table id="tabla" border="1">
    <tr><!-- Esto viene de BD -->
        <td><select name="sel1" id="sel1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            </select>
        </td>
        <td><input type="text" id="t11" value="t11"></td>
        <td><input type="text" id="t12" value="t12"></td>
    </tr>
    <tr>
        <td><select name="sel2" id="sel2">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            </select>
        </td>
        <td><input type="text" id="t21" value="t21"></td>
        <td><input type="text" id="t22" value="t22"></td>
    </tr>
</table>
<br>
<input type="button" value="Agregar" onclick="agregar()">
<input type="button" value="Borrar ultima" onclick="borrarUltima()">
</form>
</body>
</html>

maycolalvarez · #2 (**permalink**) 28/05/2012, 12:36

ajax es más simple de lo que crees, y no es estrictamente necesario que te devuelva un XML, puede ser el fragmento HTML con los elementos del form

http://librosweb.es/ajax/index.html

con este libro entenderás las nociones básicas, recuerda que el XmlHttpRequest tiene responseXML para parsear la respuesta XML, pero tiene responseText, para devolver cualquier cadena

luego verás que usando FW como jQuery es tan simple como:

$('#mi_div').load('archivo.php');