Buenas, el problema está dado cuando cargo elementos a mi página. En las imágenes, luego del código, van a poder apreciar con exactitud lo que sucede.
crear-menu.php -> En el div .nuevoIngrediente
se irán cargando los select
para elegir ingredientes a medida que el usuario toque el botón «Agregar Ingrediente» (Vas cargando ingredientes para formar una receta, o en este caso un menu).
<!-- ENTRADA PARA SELECCIONAR EL CLIENTE-->
<div class="form-group row">
<div class="col-9">
<div class="input-group">
<span class="input-group-text"><i class="fa fa-user"></i></span>
<select class="form-control selectClientes" name="seleccionarCliente" id="seleccionarCliente">
<option value="">Seleccione Cliente</option>
<?php
$item = null;
$valor = null;
$clientes = ControladorClientes::ctrMostrarClientes($item, $valor);
foreach ($clientes as $key => $value) {
echo '<option value="' . $value["id"] . '">' . $value["establecimiento"] . ' - Municipalidad de ' . $value["municipio"] . ' - Partido de ' . $value["partido"] . '</option>';
}
?>
</select>
<script>
$(document).ready(function() {
$('.selectClientes').select2();
});
</script>
<span class="input-group-prepend">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#modalAgregarCliente">
Agregar Cliente
</button>
</span>
</div>
</div>
<div class="col-3 form-group">
<div class="icheck-success ">
<input type="checkbox" id="nuevoDmc">
<label class="ml-5 text-danger" for="nuevoDmc">Es un menu tipo DMC?
</label>
</div>
</div>
</div>
<!-- ENTRADA PARA AGREGAR INGREDIENTES-->
<div class="form-group row nuevoIngrediente">
</div>
<!-- BOTON AGREGAR INGREDIENTE AL MENU -->
<div class="form-group row">
<div class="col-12">
<div class="input-group">
<button type="button" class="btn btn-info btnAgregarIngrediente">Agregar Ingrediente</button>
</div>
</div>
</div>
viandas.js -> Este JS, lo que hace es, a medida que el usuario le dá click al botón «Agregar Ingrediente», dibuja en el HTML una fila que tiene un Select con sus Options para cargar un nuevo ingrediente a la receta:
$(".btnAgregarIngrediente").click(function () {
var datos = new FormData();
datos.append("traerIngredientes", "ok");
$.ajax({
url: "ajax/ingredientes.ajax.php",
method: "POST",
data: datos,
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function (respuesta) {
$(".nuevoIngrediente").append(
'<div class="col-6">' +
' <div class="input-group">' +
' <span class="input-group-text"><button type="button" class="btn btn-danger btn-xs" idIngrediente><i class="fa fa-times"></i></button></span>' +
' <select class="form-control nuevoNombreIngrediente selectIngredientes" style="min-height:50px" idIngrediente name="nuevoNombreIngrediente" required>' +
' <option value="">Seleccione el ingrediente</option>' +
' </select>' +
' </div>' +
'</div>' +
'<div class="col-3">' +
' <input type="number" class="form-control" name="nuevaCantidadIngrediente" id="nuevaCantidadIngrediente" min="1" placeholder="0" required>' +
' <span class="small text-muted"> Ingrese cantidad</span>' +
'</div>' +
'<div class="col-3">' +
'<div class="input-group">' +
' <span class="input-group-text"><i class="fas fa-money-bill-alt"></i></span>' +
' <input type="number" class="form-control" id="precioIngrediente" name="precioIngrediente" value="" readonly>' +
' </div><span class="small text-muted">Costo</span>' +
'</div>'
);
// AGREGAR LOS INGREDIENTES AL SELECT
respuesta.forEach(funcionForEach);
function funcionForEach(item, index) {
$(document).ready(function () {
$('.selectIngredientes').select2();
});
$(".nuevoNombreIngrediente").append(
'<option idIngrediente="' + item.id + '" value="' + item.nombre + '">' + item.nombre + '</option>'
);
}
}
});
});
EL PROBLEMA: Cuando yo agrego una cierta cantidad de ingredientes, la fila de arriba para seleccionar clientes hace un salto de línea, dejando el botón «Agregar Cliente» abajo de la misma. Esto no debería pasar y no entiendo por qué ocurre. Adjunto dos (02) imágenes, de antes y después (en este caso la probé con la resolución de un monitor cuadrado, y apenas agregó un ingrediente, ya que se ve el problema. En resoluciones más altas me deja agregar hasta 6 elementos, recién allí se ve el problema).
select2
arriba del DIV, y funciona mientras tenga el debugger abierto jaja, cuando lo cierro y cargo otro elemento, el boton baja. Que clase de brujeria?