5

Me gustaría saber en qué estoy fallando en el siguiente código, la idea es en una vista con CodeIgniter, cargo un array en un select, y al presionar un botón se puede agregar un nuevo select, pero cuando cargo el nuevo select con jQuery, no funciona.

Éste es mi código:

<div class="row">
    <div class="col-lg-12">
        <div class="form-group">
            <label style="text-transform: uppercase">Piezas</label>
            <select id="marca" name="marca" class="form-control select2" style="width: 100%;" required>
            <?php foreach ($piezas->result() as $fila) { ?>
            <option value="<?= $fila->id_pieza; ?>"><?= $fila->descripcion; ?></option>
            <? } ?>
            </select>
        </div>
    </div>
</div>

<div class="agregando1"></div>

<div class="row">
    <div class="col-lg-12" style="text-align: left;">
        <a id="agregar_pza" href="#" title="Agregar Otro Contacto" class="btn btn-flat btn-primary">AGREGAR</a>
    </div>
</div>

Y el código jQuery:

$('#agregar_pza').click(function(event) {
        /* Act on the event */
        event.preventDefault();
        $('.agregando1').append('<div class="row"><div class="col-lg-12"><div class="form-group"><label style="text-transform: uppercase">Piezas</label><select name="piezas[]" class="form-control select2" style="width: 100%;" required><?php foreach ($piezas->result() as $fila) { ?><option value="<?= $fila->id_pieza; ?>"><?= $fila->descripcion; ?></option><? } ?></select></div></div></div>');
    });
1
  • ¿Cuál es el código generado para la parte de jQuery? Si tienes ese código en js no debería funcionar bien porque tiene código PHP embebido
    – Alvaro Montoro
    Commented el 3 mar. 2016 a las 5:25

2 respuestas 2

3

Sin ver un ejemplo del código generado y sin saber si hay errores en la consola (y cuáles), es muy difícil identificar dónde está el problema con el código que muestras. Podría ocurrir por muchos motivos diferentes.

Posible causa 1: short-open tag no soportado

Como indica Diego Gallegos en su respuesta, podría ser que tienes <? } ?> en la parte PHP; pero no tiene por qué. <? } ?> (short-open tag) y <?php } ?> son equivalentes y deberían funcionar los dos (dependiendo de la versión de PHP y de la configuración del servidor).

Además por lo que se menciona en la pregunta ("cuando cargo el nuevo select con jquery, no funciona") parece que la select original funciona bien, el problema es cuando se pulsa el botón y se genera dinámicamente la nueva select, por lo que todo apunta al código en JavaScript/jQuery.

La solución si éste fuera el problema: cambia los <? } ?> por <?php } ?>.


Posible causa 2: Hay código PHP embebido dentro de JavaScript

En el código jQuery que compartes:

$('#agregar_pza').click(function(event) {
    /* Act on the event */
    event.preventDefault();
    $('.agregando1').append('<div class="row"><div class="col-lg-12"><div class="form-group"><label style="text-transform: uppercase">Piezas</label><select name="piezas[]" class="form-control select2" style="width: 100%;" required><?php foreach ($piezas->result() as $fila) { ?><option value="<?= $fila->id_pieza; ?>"><?= $fila->descripcion; ?></option><? } ?></select></div></div></div>');
});

Hay código PHP <?php foreach ($piezas->result() as $fila) { ?><option value="<?= $fila->id_pieza; ?>"><?= $fila->descripcion; ?></option><? } ?>.

¿Dónde se encuentra ese código? Si es en un documento con extensión .js, la parte de PHP no se ejecutará y se considerará una cadena como cualquier otra, por lo que la select que se genera nueva no tendrá ninguna opción a seleccionar (o tendrá una única opción con "basura-PHP" como valor y texto).

Una posible solución si éste fuera el problema: mueve la parte de JS que tiene PHP embebido al fichero PHP, de este modo los comandos PHP se ejecutarán y la select se debería generar bien.

Algo me dice que ésta es la causa real del problema.


Posible causa 3: Comillas incorrectas

Si ninguna de las opciones anteriores funciona, el problema podría ser que alguno de los valores tiene comillas que no se escapan correctamente. En la parte HTML no te tenías por qué preocupar de esto, pero sí ahora que el PHP se genera dentro de una cadena JavaScript.

Por ejemplo, imagina que uno de los valores es Frenos O'hara. Como hay una comilla simple en el nombre/valor y la cadena de JavaScript la estás definiendo también con comillas simples ('<div class="row">...'), entonces la cadena se romperá y el JavaScript fallará cuando se ejecute. Lo bueno si este fuera el caso: podrías ver un error en la consola de JavaScript. Ábrela pulsando F12 en IE, o Ctrl+Shift+J en Chrome o Firefox y mira a ver si aparece un error cuando se pulsa el botón.

Una solución si éste fuera el problema: escapa las cadenas antes de escribirlas por pantalla (siempre es una buena práctica que evitará posibles ataques de XSS). Dependiendo de dónde vayan podrías usar htmlspecialchars o json_encode. En este caso, la segunda opción.


Por lo que dices en la pregunta, parece más la segunda o la tercera opción. Una posible alternativa al código jQuery existente sería reescribirlo para que no dependiera de PHP.

Parece que la select (y la estructura alrededor de ella) que se genera con jQuery es la misma que la que se genera inicialmente en la página, así que podrías cambiar el código para obtener un resultado equivalente pero no dependiente de PHP y sin problemas de comillas:

  1. Añade una clase específica (p.e. fila-a-copiar) a la fila original:

    <div class="row fila-a-copiar">
        <div class="col-lg-12">
            ....
    
  2. En la controlador del click:

    1. Selecciona la última fila que tenga la clase que añadiste:

      var $div = $('div.fila-a-copiar:last');
      
    2. Clona la última fila que tenga la clase fila-a-copiar

      var $clon = $div.clone();
      
    3. Añade el clon donde deba ir en el documento.

Así el código quedaría mucho más limpio (no lo he probado, puede que necesite cambios):

$('#agregar_pza').click(function(event) {
    /* Act on the event */
    event.preventDefault();
    var $div = $('div.fila-a-copiar:last');
    var $clon = $div.clone();
    $('.agregando1').append($clon);
});
1
  • Hola, gracias por la respuesta, creo que el problema es el php embebido.. voy a probar con el código que me sugieres. Commented el 4 mar. 2016 a las 1:40
0

Creo que tu error se encuentra en el bracket de cierre:

Tu tienes esto:

<?php foreach ($piezas->result() as $fila) { ?>
   <option value="<?= $fila->id_pieza; ?>"><?= $fila->descripcion; ?></option>
<? } ?>   <---ERROR AQUI

Deberia ser:

<?php } ?>

No he corrido el codigo pero pareciera ser eso.

1
  • Hola, gracias por responder, el problema esta en el php embebido en javascrip Commented el 4 mar. 2016 a las 1:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.