Varios select en mi pagina, evitar carga

rudy69 · #1 (**permalink**) 19/05/2009, 17:48

Buenas, pues tengo en mi pagina un select ( es en PHP) que se repite tantas veces como el usuario desee, quiero evitar el exceso de carga que estos podrian llegar a generar en un futuro, hoy en la actualidad el select tiene 113 option y va en aumento, si el usuario quiere 29 por ejemplo (una cifra comun), se generarian 3277 lineas de codigo que creo que las puedo reducir a 113, osea solo una vez.

No tengo nada escrito xD, no se si me podes das al menos una idea de como seria la solucion de este problema

buzu · #2 (**permalink**) 19/05/2009, 20:12

no entiendo lo que quieres hacer. Por que no explicas un poco mejor que es exactamente lo que quieres hacer y para que. Probablemente hay una mejor forma de hacerlo.

rudy69 · #3 (**permalink**) 20/05/2009, 14:13

Pense que lo habia dejado bien claro.

Dije: Tengo un select con 113 option (cifra en aument) osea:

Código HTML:

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
...
...
...
...
etc...
...
...
...
<option value="113">131</option>
</selec>

Que se repite tantas veces el usuario desee, puse el ejemplo de 29 veces(una cifra comun que el usuario pida), tendre lo siguiente.
113 option * 29 veces
total = 3277 lineas de codigo

Si quiero revisar el codigo fuente es practicamente imposible, quiero una funcion JS por ejemplo donde guarde tales options y cada vez que el usuario haga click se desplieguen tales valores, nunca lo he hecho pero lo he visto.

rudy69 · #4 (**permalink**) 20/05/2009, 14:28

Pues ya me hice algo, no estaba tan dificil

,

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="StyleSheet" href="/CSS/Tabla.css" type="text/css">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">

function option(value) {
	var opt0 = new Option("hola1", "Como Estas1");
	var opt1 = new Option("hola2", "Como Estas2");
	var opt2 = new Option("hola3", "Como Estas3");
	var opt3 = new Option("hola4", "Como Estas4");
	var opt4 = new Option("hola5", "Como Estas5");
	var opt5 = new Option("hola6", "Como Estas6");
	var opt6 = new Option("hola7", "Como Estas7");
	var opt7 = new Option("hola8", "Como Estas8");
	var opt8 = new Option("hola9", "Como Estas9");
	var opt9 = new Option("hola10", "Como Estas10");
	
	
	document.x.e.options[0] = opt0;
	document.x.e.options[1] = opt1;
	document.x.e.options[2] = opt2;
	document.x.e.options[3] = opt3;
	document.x.e.options[4] = opt4;
	document.x.e.options[5] = opt5;
	document.x.e.options[6] = opt6;
	document.x.e.options[7] = opt7;
	document.x.e.options[8] = opt8;
	document.x.e.options[9] = opt9;
	document.x.e.value = value;
}
</script>
</head>

<body>
<form name="x">
<select name="e" onfocus="option(this.value)"><option value="Como Estas7">hola7</option></select>
<input type="submit" value="Calcular" />
</form>
<?php echo $_REQUEST['e']; ?>
</body>
</html>

Le agrege un pequenyo efecto que lo hacia algo feito, si tiene un valor seleccionado desde un principio, te aparecera seleccionado cuando se creen los options despues, esta guapo

, solo que no me gusta hacer dos veces esto:

var opt0 = new Option("hola0", "Como Estas0");

document.x.e.options[0] = opt0;

A ver si me ayudan a quitarlo si es posible

zerokilled · #5 (**permalink**) 20/05/2009, 21:50

estoy un tanto confuso. el usuario pedira x cantidad de select, el cual asumo que todos seran iguales en sus options y valores. sin embargo, tu codigo no refleja este tipo de accion, sino que solamente genera los options para un select. respecto a la molestia de escribir dos veces el codigo, puedes reducirlo a:

Código:

document.x.e.options[0] = new Option("hola0", "Como Estas0");

si el texto y el valor del option mantienen un patron, probablemente un bucle te funcione mejor para crearlos dinamicamente.

respecto a la peticion de x cantidad del usuario, no te vale clonar el select y luego agregarlo al form?

Código:

// luego del select ser rellenado con los options;
var s = document.x.e.cloneNode(true);
document.x.appendChild(s);
// seguramente necesites cambiar ciertos atributos;
s.setAttribute('name', 'un_nombre');

buzu · #6 (**permalink**) 21/05/2009, 00:14

No me entendiste cuando preguntaba que es lo que quieres hacer. Mi pregunta se refiere a cual es tu objetivo al darle esa libertad al usuario de crear más opciones, que de por si 113 ya es excesivo. Y como dice zerokilled, tu código no refleja lo que dices que quiere hacer. O al menos yo no lo veo así. Creo que has planteado el problema de una forma un tanto confusa.

Saludos.

rudy69 · #7 (**permalink**) 21/05/2009, 13:08

Pues tenian algo de razon, y si, son 113 porque la situacion la amerita.

A ver, les explico un poco de que va, es un sistema para subir articulos a un inventario, entonces, se escogen desde los select tales articulos, he ahi es porque son 113, y van en aumento, porque la tienda cada vez va agregando articulos nuevos a su inventario, y tambien porque es usual que el usuario pida 29 select, pues la tienda compra a grandes cantidades, ahora .... estoy trabajando para reducir ese numero como por ejemplo agregar a cada proveedor sus articulos etc... ese ya es otro gallo.

El error que detecte fue que no los asocie a un array, ya corregi ese error ahora estan asociados a un array (que de hecho, asi estan en el codigo que tengo actualmente, algo que se me escapo xD), asi que pueden existir tantos como el usuario quiera y no abra problema alguno referente a ello, gracias a zerokilled por ayudarme a reducir mas el codigo, aqui esta el nuevo codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="StyleSheet" href="/CSS/Tabla.css" type="text/css">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">

function option(value, id) {
	document.getElementById(id).options[0] = new Option("hola1", "Como Estas1");;
	document.getElementById(id).options[1] = new Option("hola2", "Como Estas2");
	document.getElementById(id).options[2] = new Option("hola3", "Como Estas3");
	document.getElementById(id).options[3] = new Option("hola4", "Como Estas4");
	document.getElementById(id).options[4] = new Option("hola5", "Como Estas5");
	document.getElementById(id).options[5] = new Option("hola6", "Como Estas6");
	document.getElementById(id).options[6] = new Option("hola7", "Como Estas7");
	document.getElementById(id).options[7] = new Option("hola8", "Como Estas8");
	document.getElementById(id).options[8] = new Option("hola9", "Como Estas9");
	document.getElementById(id).options[9] = new Option("hola10", "Como Estas10");
	document.getElementById(id).value = value;
}
</script>
</head>

<body>
<form name="x">
<select name="e[]" id="1" onfocus="option(this.value, this.id)"><option value="Como Estas7">hola7</option></select>
<select name="e[]" id="2" onfocus="option(this.value, this.id)"><option value="Como Estas7">hola7</option></select>
<input type="submit" value="Calcular" />
</form>
<?php print_r($_REQUEST['e']); ?>
</body>
</html>

Igual, acepto sugerencias

zerokilled · #8 (**permalink**) 21/05/2009, 15:12

mi sugerencia es la siguiente. en php genera los options para un solo HTMLSelect, de modo que el resultado final sean los 113 options. esto lo haras una sola vez y puedes olvidarte de la funcion que crea los options en javascript. luego, cuando el usuario pida otro HTMLSelect lo clonas con javascript como te habia mostrado antes. en la clonacion se duplica una copia exacta del HTMLSelect incluyendo los options. y finalmente lo agregas al form con appendChild.

mi opinion, tu codigo actual no es el mejor. como ya venia diciendo, tu codigo agrega los options al HTMLSelect. inclusive, cuando el usuario mueve el foco y luego vuelve al mismo HTMLSelect, la funcion vuelve y reescribe los options innecesariamente. de ahi que pues pienso que no seria lo mejor.

un ejemplo para demostrate como funcionaria mi sugerencia:

Código:

<script>
function clone(select){
var clone = select.cloneNode(true);
select.parentNode.appendChild(clone);
}
</script>
<form ... >
...
<div><select name='e[]'>
<!-- agrega los 113 options con PHP -->
<option value='valor1' />
<option value='valor2' />
<option value='valor3' />
<!-- el resto de los options -->
</select></div>
<input type='button' value='crear select' onclick="clone(this.form['e[]']);" />
</form>

rudy69 · #9 (**permalink**) 21/05/2009, 19:55

A ver si te entendi, creo los options una vez, y posterior mente los clono una vez para cada select(solo una vez, fallo que tiene mi codigo), asi tengo muchos select como quiera y el codigo fuente no se me deteriora, pues en mi codigo cada vez que el usuario mueve el foco de un select a otro, y regresa al anterior se reescriben de nuevo los options.

Si es asi, creo que te entiendi bien, pero, mi pregunta es, como los clono todos cuando la pagina carge automaticamente

? y como se cuantos clonar XD

zerokilled · #10 (**permalink**) 21/05/2009, 20:25

en un principio, como tu le dabas el control al usuario para crear la cantidad de select? me imagino que en un campo ingresaba un numero, luego enviaba la peticion, y php le devolvia el formulario con la cantidad de select. estoy en lo correcto? puedes utilizar mas o menos ese mismo control para generar la cantidad de selects. en cuanto a la clonacion, supongo que sera el usuario quien debe determinar la cantidad, pero en todo caso tu tambien puedes crear automaticamente una cantidad con el evento onload. en el ejemplo anterior intentaba mostrarte como funcionaria la clonacion pero no me fije que el codigo fallaba. tu codigo no sera exactamente asi, pero puedes comenzar por ahi para sacar ideas.

Código:

<script>
function clone(select){
if(!select.nodeName)select = select[0];
var clone = select.cloneNode(true);
select.parentNode.appendChild(clone);
}
</script>
<form ... >
...
<div><select name='e[]'>
<!-- agrega los 113 options con PHP -->
<option value='valor1'>option1</option>
<option value='valor2'>option2</option>
<option value='valor3'>option3</option>
<!-- el resto de los options -->
</select></div>
<input type='button' value='crear select' onclick="clone(this.form['e[]']);" />
</form>

rudy69 · #11 (**permalink**) 22/05/2009, 13:49

Entiendo perfectamente, pero hay un fallo o mas bien algo que no cuadraria, resulta que es un sistema donde pasas de pagina en pagina muy a menudo, por lo que guardar una compra de una sola vez es casi imposible, de modo que: tengo un input-submit, el que guarda en una session todos los valores que en ese instante tiene escogido el usuario, asi:

Código PHP:

  if(isset($_REQUEST['Continuar_despues'])) { 
    $_SESSION['Compra'] = array (  
        'Factura'           => $_REQUEST['Factura'], 
        'fecha'             => $_REQUEST['fecha'], 
        'Proveedor'         => $_REQUEST['Proveedor'], 
        'Articulos'         => $_REQUEST['Articulos'], 
        'Producto'          => $_REQUEST['Producto'], 
        'CodigoBarra'       => $_REQUEST['CodigoBarra'], 
        'NombreArticulo'    => $_REQUEST['NombreArticulo'], 
        'Unidades'          => $_REQUEST['Unidades'], 
        'PrecioCompra'      => $_REQUEST['PrecioCompra'], 
        'PrecioUnitario'    => $_REQUEST['PrecioUnitario'], 
        'PrecioVenta'       => $_REQUEST['PrecioVenta'], 
        'MinimoExistencias' => $_REQUEST['MinimoExistencias'], 
    ); 
    $Alerta="Se han guardado los productos pero no han sido guardados en la base de datos, se mantendran almacenados solo mientras dure la seccion"; 
} ?>

y cuando eso existe aparece esto(imprime todo el formulario que el usuario habia llenado en input tipo hidden):

Código PHP:

  foreach($_SESSION['Compra'] as $clave=>$value) { 
    if(is_array($value)) { 
        foreach($value as $c=>$v) { 
            echo '<input name="'.$clave.'[]" type="hidden" value="'.$v.'" />'; 
        } 
    } else { 
        echo '<input name="'.$clave.'" type="hidden" value="'.$value.'" />'; 
    } 
} 
?>

Posteriormente, tengo una funcion(actualmente) que guarda todos los options, la que le paso una variable que contiene el valor escogido anteriormente por el usuario y si existe queda seleccionado el options que tenia antes de haber "pausado" la compra.

Por lo tanto, al clonar los select, no se podria pasar tal variable o parametro

, creo que actualmente el metodo que tengo, que no es el mejor, pero funciona tal como lo tengo pensado

Gracias zerokilled, te has ganado un punto de karma xD, si encuentras solucion solo dime, para mientras sigo pensando yo como se podria hacer xD