Como crear las etiquetas de los div 's creados dinamicamente

sentnel · #1 (**permalink**) 15/04/2011, 02:09

Hola !

Despues de mucha ayuda del buen amigo Laratik

tengo esta pagina que despues de "escanear" un codigo de barra de un paquete me devuelve los datos correspondientes creando dinamicamente los DIV 's, todo esta muy bien, pero necesito que cuando se crean los divs tambien cree las etiquetas o labels, por ejemplo, "Cliente", "Ciudad", "Estado", "Peso", etc.

Puede alguien echar un vistazo al codigo y/o a la pagina enlazada mas arriba e indicarme como se agregan las etiquetas de los respectivos campos?

Gracias por su ayuda!

Código:

function setOutput(){
    if(httpObject.readyState == 4){
		var respuesta = httpObject.responseText.split(",");
		var cont = document.createElement("div");
		var res = document.getElementById("resultadosScan1");
		var id = document.createElement("div");
		var packageId = document.createElement("div");
		var userId = document.createElement("div");
		var originCompany = document.createElement("div");
		var contentDescription = document.createElement("div");
		var originCity = document.createElement("div");
		var originState = document.createElement("div");
		var originZip = document.createElement("div");
		var packWeight = document.createElement("div");
		var packLength = document.createElement("div");
		var packHeight = document.createElement("div");
		var packDepth = document.createElement("div");
		var del = document.createElement("img"); //creo el div para eliminar
        del.src = "images/eliminar.gif";
        del.onclick = eliminar;
		
		id.className = "classId";
		packageId.className = "classPackageId";
		userId.className = "classUserId";
		originCompany.className = "classOriginCompany";
		contentDescription.className = "classContentDescription";
		originCity.className = "classOriginCity";
		originState.className = "classOriginState";
		originZip.className = "classOriginZip";
		packWeight.className = "classPackWeight";
		packLength.className = "classPackLength";
		packHeight.className = "classPackHeight";
		packDepth.className = "classPackDepth";
		
		document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
        document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
		document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
		document.getElementById('outputText3').value = httpObject.innerHTML= respuesta[3];
		document.getElementById('outputText4').value = httpObject.innerHTML= respuesta[4];
		document.getElementById('outputText5').value = httpObject.innerHTML= respuesta[5];
		document.getElementById('outputText6').value = httpObject.innerHTML= respuesta[6];
		document.getElementById('outputText7').value = httpObject.innerHTML= respuesta[7];
		document.getElementById('outputText8').value = httpObject.innerHTML= respuesta[8];
		document.getElementById('outputText9').value = httpObject.innerHTML= respuesta[9];
		document.getElementById('outputText10').value = httpObject.innerHTML= respuesta[10];
		document.getElementById('outputText11').value = httpObject.innerHTML= respuesta[11];
		
		id.innerHTML = httpObject.innerHTML= respuesta[0];
		packageId.innerHTML = httpObject.innerHTML= respuesta[1];
		userId.innerHTML = httpObject.innerHTML= respuesta[2];
		originCompany.innerHTML = httpObject.innerHTML= respuesta[3];
		contentDescription.innerHTML = httpObject.innerHTML= respuesta[4];
		originCity.innerHTML = httpObject.innerHTML= respuesta[5];
		originState.innerHTML = httpObject.innerHTML= respuesta[6];
		originZip.innerHTML = httpObject.innerHTML= respuesta[7];
		packWeight.innerHTML = httpObject.innerHTML= respuesta[8];
		packLength.innerHTML = httpObject.innerHTML= respuesta[9];
		packHeight.innerHTML = httpObject.innerHTML= respuesta[10];
		packDepth.innerHTML = httpObject.innerHTML= respuesta[11];
		
		cont.appendChild(id);
        cont.appendChild(packageId);
        cont.appendChild(userId);
		cont.appendChild(originCompany);
		cont.appendChild(contentDescription);
		cont.appendChild(originCity);
		cont.appendChild(originState);
		cont.appendChild(originZip);
		cont.appendChild(packWeight);
		cont.appendChild(packLength);
		cont.appendChild(packHeight);
		cont.appendChild(packDepth);
		
        cont.appendChild(del);
        res.appendChild(cont);
		
		/*sum = sum+parseInt(respuesta[2]);
		impuestos = sum * 0.16 ;
		total = sum + impuestos;
        document.getElementById("suma").value = sum.toFixed(2);
		document.getElementById("impuestos").value = impuestos.toFixed(2);
		document.getElementById("total").value = total.toFixed(2);*/
		
    }
 
}

zerokilled · #2 (**permalink**) 15/04/2011, 03:24

buenas,
unas observaciones... ¿por que no mejor usas una tabla donde el encabezado sean los labels? digo mejor una tabla porque los datos que estas agregando son tabulares y las tablas sirven perfectamente para eso. por otro lado, veo que tienes muchos campos que parecen estar ocultos pero en realidad estan presentes. se torna un tanto complicado si se quiere manejar por los campos con la tecla tabular. para esconder los campos, perfectamente puedes utilizar un input hidden el cual no afectaria en nada. o mejor aun, ni siquiera son necesarios si devolverias la consulta en formato json permitiendo la posibilidad de obtener los datos en un orden aleatorio y con campos descriptivo. a diferencia de obtener un orden estricto donde a futuro podrias requerir cambiar los indices que representa cada dato al serparlos con split.

sentnel · #3 (**permalink**) 15/04/2011, 10:01

Buen dia !

Gracias Zerokilled por tu contribucion. Primeramente te comento que mi problema es que soy un mero principiante en estos asuntos de programacion, habiendo jugado un poquitito con PHP como puerta de entrada. El buen amigo, excelente colaborador laratik me sugirio y practicamente me soluciono el problema en solo unos pasos y unos cuantos minutos, pero estas hablando con un principiante de primer dia, por asi decirlo, de manera que desconozco por ejemplo sobre Json, ahora mismo tratare de documentarme un poco.

Cita:

¿por que no mejor usas una tabla donde el encabezado sean los labels?

Sobre tablas si conozco y un efecto asi con los titulos sobre las columnas seria bueno, aunque estaba apuntando a un efecto de <Etiqueta><Datos>, o sea, las etiquetas al lado derecho del campo, como se puede observar en la pagina en la columna donde se ve, por ejemplo, "Flete", "Combustible", etc.

De todos modos estoy abierto a sus sugerencias y mas que eso a sus directrices de como lograr presentar la informacion adecuadamente. En una nota al margen les informo que ahora mismo estoy presentando en la consulta todos los datos que contiene la tabla de la bd, pero en realidad solo usare unos cuantos campos de los que ahi se ven.

Cita:

tienes muchos campos que parecen estar ocultos pero en realidad estan presentes

Realmente tuve que esconderlos via CSS porque por alguna razon cuando les ponia el atributo "hidden" entonces la pagina no funcionaba, en cambio me enviaba al URL con una direccion sentinel.info/index?, de manera que yo, al no saber mucho de esto, solo opte por esconder el polvo debajo de la alfombra asumiendo que en este caso no podia hacer eso. Intentare ahora cambiar todos esos campos a "hidden" a ver si me sale.

Cita:

en formato json permitiendo la posibilidad de obtener los datos en un orden aleatorio y con campos descriptivo

Definitivamente me gustaria explorar el como lograr esto, y mas que nada si la implementacion estaria a mi alcance, dado mi grado de analfabetismo programatico

Gracias a todos por sus aportes! Espero comentarios.

Muy agradecido por sus contribuciones!

sentnel · #4 (**permalink**) 15/04/2011, 10:28

Hola! Actualizacion: Cambiando el atributo a "hidden" de los campos del formulario para que no se muestren no me funciona.

Ahora, sucede lo siguiente:

1.- Al escanear el cursor salta a la barra de URL y despliega la siguiente direccion:

Código:

http://sentnel.info/pos.php?inputText=&outputText0=&outputText1=&outputText2=&outputText3=&outputText4=&outputText5=&outputText6=&outputText7=&outputText8=&outputText9=&outputText10=&outputText11=

2.- Aparte de que realmente los campos del formulario se ocultan entonces sucede que tampoco se muestran los campos generados dinamicamente, o sea, deja de funcionar la parte que queremos que se muestre (y que funciona bien antes del "hidden"). Detallo:

Cuando "escaneo" el codigo de barra no se muestran los resultados, pero si puedo ver que en cosa de menos de un segundo se pueden leer los campos generados dinamicamente y todos leen "undefined", pero inmediatamente desaparecen, dejando la pantalla tal cual antes de escanear, sin nada. O sea, el script se ejecuta, envia "undefined" a todos los campos generados dinamicamente y desaparece casi instantaneamente.

Porque no puedo solo poner "hidden" y lo demas ejecutarse? Pregunta del millon.

Gracias nuevamente!

laratik · #5 (**permalink**) 15/04/2011, 12:06

Me parece que si, es realmente extraño que no funcione el tratar de ocultar los campos con type="hidden" (Por cierto nunca entendí para que servían esos datos, si pudieras aclararlo). Acerca de las sugerencias de zerokilled creo que tiene toda la razón, por lo menos en lo que respecta en presentar datos tabulados (eso resulta más sencillo) y en enviar la respuesta de la petición AJAX en formato JSON (no comente nada anteriormente, por que soy de los que piensan "el cliente siempre tiene la razón"

).

Acerca de la pregunta original, los label se pueden crear y agregar como cualquier otro elemento, aqui un ejemplo:

Código Javascript:

Ver original<script>
function crearLabel() {
    var target = document.getElementById("target"); //ubicamos el objetivo al que se va a agregar el label
    var label = document.createElement("label"); //creamos el label
    var text = document.createTextNode("Articulo"); //creamos el nodo de texto que contiene la descripcion
    label.appendChild(text); //adherimos el texto al label
    target.appendChild(label); //aderimos el label al objetivo
}
</script>

Aunque para hacerlo deberás ponerte a rediseñar como se muestran los datos, aunque insisto los consejos de zerokilled son muy buenos para ser tenidos en cuenta.

sentnel · #6 (**permalink**) 15/04/2011, 13:18

Cita:

Aunque para hacerlo deberás ponerte a rediseñar como se muestran los datos, aunque insisto los consejos de zerokilled son muy buenos para ser tenidos en cuenta.

Entiendo, pero no tengo ni idea de como funciona o si implica dejar todo lo qu hicimos de un lado, particularmente me encanta la forma como funciona y es exactamente lo que busco, excepto que necesito ponerle etiquetas que indiquen que es cada campo mostrado.

Si no es muy complicado, como para que yo pueda "meterle mano", estoy dispuesto a irme por esa via, siempre y cuando me arroje resultados como el obtenido hasta ahora.

Alguien se anima a darme una opinion sobre si se debe "re-crear" todo desde cero o es alguna funcion que integrar y otras cosas que eliminar? Como le hago? Mientras ire documentandome un poco sobre Json, pero por supuesto, unas horas que le dedique no seran suficientes como para lanzarme a esta aventura, de manera que siguen siendo bienvenidos los consejos y comentarios.

Gracias!

sentnel · #7 (**permalink**) 15/04/2011, 14:39

Hello!

No logro conseguir que salgan los labels o etiquetas con el script de

Código:

<script>
function crearLabel() {
    var target = document.getElementById("target"); //ubicamos el objetivo al que se va a agregar el label
    var label = document.createElement("label"); //creamos el label
    var text = document.createTextNode("Articulo"); //creamos el nodo de texto que contiene la descripcion
    label.appendChild(text); //adherimos el texto al label
    target.appendChild(label); //aderimos el label al objetivo
}
</script>

Orientenme por favor, un ejemplo?

Gracias!

Aqui el codigo de la paqina:

Código:

<script language="javascript" type="text/javascript">
<!-- 
// Get the HTTP Object

function getHTTPObject(){
   if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest) return new XMLHttpRequest();
   else {
      alert("Your browser does not support AJAX.");
      return null;
   }
}   


function eliminar() {
     var parent = this.parentNode;
     var grandParent = parent.parentNode;
	 grandParent.removeChild(parent);
     
 }

 
// Change the value of the outputText field
var sum = 0;
var impuestos = 0;
var total = 0;
 
// Change the value of the outputText field

function setOutput(){
	
    if(httpObject.readyState == 4){
		var i=0;
		var respuesta = httpObject.responseText.split(",");
		var cont = document.createElement("div");
		var res = document.getElementById("resultadosScan1");
		var id = document.createElement("div");
		var packageId = document.createElement("div");
		var userId = document.createElement("div");
		var originCompany = document.createElement("div");
		var contentDescription = document.createElement("div");
		var originCity = document.createElement("div");
		var originState = document.createElement("div");
		var originZip = document.createElement("div");
		var packWeight = document.createElement("div");
		var packLength = document.createElement("div");
		var packHeight = document.createElement("div");
		var packDepth = document.createElement("div");
		var del = document.createElement("img"); //creo el div para eliminar
        del.src = "images/eliminar.gif";
        del.onclick = eliminar;
		
		id.className = "classId";
		packageId.className = "classPackageId";
		userId.className = "classUserId";
		originCompany.className = "classOriginCompany";
		contentDescription.className = "classContentDescription";
		originCity.className = "classOriginCity";
		originState.className = "classOriginState";
		originZip.className = "classOriginZip";
		packWeight.className = "classPackWeight";
		packLength.className = "classPackLength";
		packHeight.className = "classPackHeight";
		packDepth.className = "classPackDepth";
		
		document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
        document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
		document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
		document.getElementById('outputText3').value = httpObject.innerHTML= respuesta[3];
		document.getElementById('outputText4').value = httpObject.innerHTML= respuesta[4];
		document.getElementById('outputText5').value = httpObject.innerHTML= respuesta[5];
		document.getElementById('outputText6').value = httpObject.innerHTML= respuesta[6];
		document.getElementById('outputText7').value = httpObject.innerHTML= respuesta[7];
		document.getElementById('outputText8').value = httpObject.innerHTML= respuesta[8];
		document.getElementById('outputText9').value = httpObject.innerHTML= respuesta[9];
		document.getElementById('outputText10').value = httpObject.innerHTML= respuesta[10];
		document.getElementById('outputText11').value = httpObject.innerHTML= respuesta[11];
		
		id.innerHTML = httpObject.innerHTML= respuesta[0];
		packageId.innerHTML = httpObject.innerHTML= respuesta[1];
		userId.innerHTML = httpObject.innerHTML= respuesta[2];
		originCompany.innerHTML = httpObject.innerHTML= respuesta[3];
		contentDescription.innerHTML = httpObject.innerHTML= respuesta[4];
		originCity.innerHTML = httpObject.innerHTML= respuesta[5];
		originState.innerHTML = httpObject.innerHTML= respuesta[6];
		originZip.innerHTML = httpObject.innerHTML= respuesta[7];
		packWeight.innerHTML = httpObject.innerHTML= respuesta[8];
		packLength.innerHTML = httpObject.innerHTML= respuesta[9];
		packHeight.innerHTML = httpObject.innerHTML= respuesta[10];
		packDepth.innerHTML = httpObject.innerHTML= respuesta[11];
		
		cont.appendChild(id);
        cont.appendChild(packageId);
        cont.appendChild(userId);
		cont.appendChild(originCompany);
		cont.appendChild(contentDescription);
		cont.appendChild(originCity);
		cont.appendChild(originState);
		cont.appendChild(originZip);
		cont.appendChild(packWeight);
		cont.appendChild(packLength);
		cont.appendChild(packHeight);
		cont.appendChild(packDepth);
		
        cont.appendChild(del);
        res.appendChild(cont);
		
		/*sum = sum+parseInt(respuesta[2]);
		impuestos = sum * 0.16 ;
		total = sum + impuestos;
        document.getElementById("suma").value = sum.toFixed(2);
		document.getElementById("impuestos").value = impuestos.toFixed(2);
		document.getElementById("total").value = total.toFixed(2);*/
		
    }
	
 
}


// Implement business logic    
function doWork(){    
	var text = document.getElementById('inputText').value;
    if(text.length == 13) {
		httpObject = getHTTPObject();
		if (httpObject != null) {
			httpObject.open("GET", "manager.php?inputText="
							+text, true);
			httpObject.send(null); 
			httpObject.onreadystatechange = setOutput;
			document.getElementsByName("testForm").item(0).reset();
			document.getElementById('inputText').focus();
		}
	}
}
 
var httpObject = null;
 
//-->


</script>


</head>
<body>

<div id="mainContainer">


<form name="testForm">
     Scan: 
       	<input type="text"  onkeyup="doWork();" name="inputText" id="inputText" />
        <input type="text" name="outputText0" id="outputText0" class="outPuts"/>
  		<input type="text" name="outputText1" id="outputText1" class="outPuts"/>
  		<input type="text" name="outputText2" id="outputText2" class="outPuts"/>
        <input type="text" name="outputText3" id="outputText3" class="outPuts"/>
        <input type="text" name="outputText4" id="outputText4" class="outPuts"/>
        <input type="text" name="outputText5" id="outputText5" class="outPuts"/>
        <input type="text" name="outputText6" id="outputText6" class="outPuts"/>
        <input type="text" name="outputText7" id="outputText7" class="outPuts"/>
        <input type="text" name="outputText8" id="outputText8" class="outPuts"/>
        <input type="text" name="outputText9" id="outputText9" class="outPuts"/>
        <input type="text" name="outputText10" id="outputText10" class="outPuts"/>
        <input type="text" name="outputText11" id="outputText11" class="outPuts"/>

     
</form>

<p>
  <script language="JavaScript">
<!--

document.testForm.inputText.focus();

//-->
  </script>
  
<script>
function crearLabel() {
    var target = document.getElementById("packageId"); //ubicamos el objetivo al que se va a agregar el label
    var label = document.createElement("Paquete"); //creamos el label
    var text = document.createTextNode("Articulo"); //creamos el nodo de texto que contiene la descripcion
    label.appendChild(text); //adherimos el texto al label
    target.appendChild(label); //aderimos el label al objetivo
}
</script>  
  
  
 
Pruebe insertando el codigo 8802946000357 (copie y pegue el codigo en "Scan")

		<p>        
		<div id='resultadosScan1'></div>

sentnel · #8 (**permalink**) 16/04/2011, 15:24

Ayuda por favor en la creacion de las etiquetas, disculpen y gracias!

sentnel · #9 (**permalink**) 26/04/2011, 08:40

Cita:

Iniciado por zerokilled

si devolverias la consulta en formato json

Podrias darme un ejemplo en este caso de como devolver la consulta en json?

Gracias!