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:
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">
....
En la controlador del click:
Selecciona la última fila que tenga la clase que añadiste:
var $div = $('div.fila-a-copiar:last');
Clona la última fila que tenga la clase fila-a-copiar
var $clon = $div.clone();
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);
});