Ver Mensaje Individual
  #5 (permalink)  
Antiguo 14/04/2011, 11:42
Avatar de laratik
laratik
 
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 9 meses
Puntos: 63
Respuesta: Necesito idea de como lograr un flujo continuo

Como haz dicho que las dos opciones son validas, he optado por validar el tamaño del string a 13, validar la pulsación del enter es relativamente sencillo, el resultado:

Código HTML:
<html>
<head>

<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;
   }
}   


 
// Change the value of the outputText field
function setOutput(){
    if(httpObject.readyState == 4){
		var respuesta = httpObject.responseText.split(",");
		var res = document.getElementById("resultadosScan1");
		var art = document.createElement("div");
		var peso = document.createElement("div");
		var precio = document.createElement("div");
		art.className = "articulo";
		peso.className = "peso";
		precio.className = "precio";
        document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
		document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
		document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
		art.innerHTML = httpObject.innerHTML= respuesta[0];
		peso.innerHTML = httpObject.innerHTML= respuesta[1];
		precio.innerHTML = httpObject.innerHTML= respuesta[2];
		res.appendChild(art);
		res.appendChild(peso);
		res.appendChild(precio);
    }
 
}
 
// Implement business logic    
function doWork(){    
	var text = document.getElementById('inputText').value;
    if(text.length == 13) {
		httpObject = getHTTPObject();
		if (httpObject != null) {
			httpObject.open("GET", "prueba.php?inputText="
							+text, true);
			httpObject.send(null); 
			httpObject.onreadystatechange = setOutput;
			document.getElementsByName("testForm").item(0).reset();
			document.getElementById('inputText').focus();
		}
	}
}
 
var httpObject = null;
 
//-->


</script>

<style type="text/css" media="screen">
    <!--
      BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; }
      BODY { font-size: 100%; }
      H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
      DIV.selHolder { float: left; border: 3px solid #ccc; margin: 10px; padding: 5px;}
      TEXTAREA { width: 80%;}
      FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
      LEGEND { color: #ccc; font-size: 120%; }
      INPUT, TEXTAREA { font-family: Arial, verdana; padding: 3px; border: 1px solid #999; }
      LABEL { display: block; margin-top: 10px; } 
      IMG { margin: 5px; }
      SELECT { margin: 10px; width: 200px; }
	  #resultadosScan1, #resultadosScan2, #resultadosScan3 { width:750px; border: 3px solid #ccc; padding:10px; }
	  .articulo {width: 350px; border:1px solid #309; display:inline-block; margin-left: 10px; text-align:center;margin-bottom: 10px; }
	  .peso {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}
	  .precio {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}
	  #outputText0 { width:1px; border:0px; color:#ffffff;}
	  #outputText1 { width:1px; border:0px; color:#ffffff;}
	  #outputText2 { width:1px; border:0px; color:#ffffff;}
	-->
	</style>
</head>
<body>

<form name="testForm">
     Scan: 
       <input type="text"  onkeyup="doWork();" name="inputText" id="inputText" />
     <input type="text" name="outputText0" id="outputText0"/>
  <input type="text" name="outputText1" id="outputText1" />
  <input type="text" name="outputText2" id="outputText2" />

     
</form>

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

document.testForm.inputText.focus();

//-->
  </script>
  
</p>
<p>Pruebe insertando el codigo &nbsp;<strong>8802946000357</strong>&nbsp; (copie y pegue el codigo en &quot;Scan&quot; y presione &quot;Enter&quot;)<br />
  
  
  
  <br />
  
</p>
<div id='resultadosScan1'></div><br />
  
  <div id='resultadosScan2'> <div id="articulo2" class="articulo">Articulo</div>
  &nbsp;<div id="peso2" class="peso">Peso</div><div id="precio2" class="precio">Precio</div></div><br />
</body>
</html> 
Ahora si procedo a explicar los cambios realizados:

1- el reset y focus() del cual hable:

Código Javascript:
Ver original
  1. function doWork(){    
  2.     var text = document.getElementById('inputText').value;
  3.     if(text.length == 13) {
  4.         httpObject = getHTTPObject();
  5.         if (httpObject != null) {
  6.             httpObject.open("GET", "prueba.php?inputText="
  7.                             +text, true);
  8.             httpObject.send(null);
  9.             httpObject.onreadystatechange = setOutput;
  10.             document.getElementsByName("testForm").item(0).reset();
  11.             document.getElementById('inputText').focus();
  12.         }
  13.     }
  14. }

Se deben validar que se digiten 13 caracteres exactos para ahí si proceder a realizar la petición y seguidamente restear el formulario de nombre testForm y pasarle el focus al campo con id inputText.

2- Manejo del DOM:

Código Javascript:
Ver original
  1. function setOutput(){
  2.     if(httpObject.readyState == 4){
  3.         var respuesta = httpObject.responseText.split(",");
  4.         var res = document.getElementById("resultadosScan1");
  5.         var art = document.createElement("div");
  6.         var peso = document.createElement("div");
  7.         var precio = document.createElement("div");
  8.         art.className = "articulo";
  9.         peso.className = "peso";
  10.         precio.className = "precio";
  11.         document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
  12.         document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
  13.         document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
  14.         art.innerHTML = httpObject.innerHTML= respuesta[0];
  15.         peso.innerHTML = httpObject.innerHTML= respuesta[1];
  16.         precio.innerHTML = httpObject.innerHTML= respuesta[2];
  17.         res.appendChild(art);
  18.         res.appendChild(peso);
  19.         res.appendChild(precio);
  20.     }
  21.  
  22. }

Cada vez que se realice una petición al servidor se crean tres divs y se les asignan sus clases correspondientes (articulo, precio y peso), luego a cada div se le inserta (mediante innerHTML) los datos recogidos de la petición AJAX y se adhiren al div de id resultadosScan1 que ya se había ubicado anteriormente mediante document.getElementById(). De esta manera cada consulta creara tres div con los valores especificados.

3- cambio de stilo:

Código CSS:
Ver original
  1. .articulo {width: 350px; border:1px solid #309; display:inline-block; margin-left: 10px; text-align:center;margin-bottom: 10px; }
  2.       .peso {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}
  3.       .precio {width: 150px; border:1px solid #309; display:inline-block; margin-left:20px; text-align:center;}

por ultimo cambio los estilos de las clases articulo, precio y peso, ya que manejan floats lo cual descuadra el resultado final, dejando divs flotantes por lodos lados cada vez que se adhiren los tres divs a resultadosScan1, así que en vez de float utilizo display:inline-block;.

Resultado final:



Edito: al final del div precio aparecen más valores, eso se debe a un mal manejo del script del lago del servidor .
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.