La mejor forma de cargar varios select sin tener que escribir mucho código
Publicado por Pepe (13 intervenciones) el 25/10/2020 17:22:22
Hola buenas, estaba pensando alguna forma más rápida, que no requiere repetir mucho un mismo código, para cargar varios select que tengo de forma dinámica con ajax.
La forma actual como lo estoy haciendo, es mezclando js con php, sé que no es lo mejor, por que mezclo código, ya que me pareció la forma más rápida de cargar unos select que se generan de forma dinámica, es decir, al pulsar un botón se carga en la página el nuevo select, ejemplo.
Aun que no sea funcional el código, como ejemplo de lo que estoy buscando, o es mejor hacer una peticion ajax para cada select que quiero cargar por ejemplo en este caso. Tendría que poner varias veces la función cargar cambiando la url, el nombre del select y las propiedades de dato ?
Si se os ocurre alguna forma mejor de hacer todo esto para evitar tener que cargar el foreach con php ?
Y perdón si con el código que he puesto he hecho algunas aberraciones, aun soy muy novato en esto del js y la programacíon
La forma actual como lo estoy haciendo, es mezclando js con php, sé que no es lo mejor, por que mezclo código, ya que me pareció la forma más rápida de cargar unos select que se generan de forma dinámica, es decir, al pulsar un botón se carga en la página el nuevo select, ejemplo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<div class="">
<h3 class=""> Item <button type="button" class="btn btn-warning nuevoItem"> + </button></h3>
<div class="nuevoElemento">
<p><label>Pedido:</label> <input type="text" name="pedido">
<select class="" name="TipoPedido">
<option selected disabled>Seleccione un tipo</option>
<?php foreach ($listaTipos as $tipo) { ?>
<option value="<?php echo $tipo['idTipo']; ?>"><?php echo $tipo['nombreTipo']; ?></option>
<?php } ?>
</select>
</p>
</div>
</div>
<script>
let cont = 0;$(".nuevoItem").on("click", function() {
$(".nuevoElemento").append(nuevoPedido(cont));
cargar(cont)
cont++;
});
//Esto es lo que hago pero con muchos más select, mezcle php con js y html busco hacerlo con ajaxconst nuevoPedido = (numElemento) => {
pintarNuevoPedido = `<p><label>Pedido:</label> <input type="text" name="pedido_${numElemento}">
<select class="" name="TipoPedido_${numElemento}">
<option selected disabled>Seleccione un tipo</option>
<?php foreach ($listaTipos as $tipo) { ?>
<option value="<?php echo $tipo['idTipo']; ?>"><?php echo $tipo['nombreTipo']; ?></option>
<?php } ?>
</select>
</p>`;
return pintarNuevoPedido
} /** Quiero hacerlo de esta forma pero sintener que hacer todo esto para cada select que tengo pues son muchos y todos se carga de forma dinámica con un boton como la forma de arriba */const nuevoPedido = (numElemento) => {
pintarNuevoPedido = `<p><label>Pedido:</label> <input type="text" name="pedido_${numElemento}">
<select class="" name="TipoPedido_${numElemento}">
<option selected disabled>Seleccione un tipo</option>
</select>
</p>`;
return pintarNuevoPedido
}function cargar(num) {
$.ajax({
url: "controlador/tipoPedidos",
type: 'post',
dataType: 'json'
}).done(e => {
$("select[name='TipoPedido_" + num + "']").empty();
$("select[name='TipoPedido_" + num + "']").append("<option selected disabled value='0'>-- USO --</option>");
$.each(e, function(key, dato) {
$("select[name='TipoPedido_" + num + "']").append(`<option value=${dato.idTipo}>${dato.nombreTipo}</option>`);
});
});
} //** Se me ocurrió hacer algo como esto, tener los datos de cada petición, y luego recorrerlo es decir algo como esto */const cargarDatosSelects = (urlDatoSelect) => {
var datos;
$.ajax({ //acá igual mezclo php
url: "/controlador/" + urlDatoSelect,
type: 'post',
async: false,
dataType: 'json'
}).done(datosSelect => {
datos = datosSelect;});
return datos;
} //Después hacer el foreach como en el ejemlo de arriba . //Pero no se si está bien asi o habrí una forma mejor, para esto todo esto ? //Si lo hiciera de esta forma tendría que hacer el appen con la forma de arriba deltodo //Si no es funcional,$(".nuevoItem").on("click", function() {
$(".nuevoElemento").append(nuevoPedido(cont));
let datos = cargarDatosSelects("tipoPedidos");
$.each(datos, function(key, dato) {
let { idTipo, nombreTipo } = dato;
$("select[name='TipoPedido_" + cont + "']").append(`<option value=${idTipo}>${nombreTipo}</option>`);
});
cont++;
});
</script>
</body>
</html>
Aun que no sea funcional el código, como ejemplo de lo que estoy buscando, o es mejor hacer una peticion ajax para cada select que quiero cargar por ejemplo en este caso. Tendría que poner varias veces la función cargar cambiando la url, el nombre del select y las propiedades de dato ?
Si se os ocurre alguna forma mejor de hacer todo esto para evitar tener que cargar el foreach con php ?
Y perdón si con el código que he puesto he hecho algunas aberraciones, aun soy muy novato en esto del js y la programacíon
Valora esta pregunta
0
