Foros del Web » Programando para Internet » Javascript »

Necesito idea de como lograr un flujo continuo

Estas en el tema de Necesito idea de como lograr un flujo continuo en el foro de Javascript en Foros del Web. Hola a todos nuevamente! Mucho les agradeceria si pueden ver esta pagina en la que intento scanear los codigos de barra de paquetes que van ...
  #1 (permalink)  
Antiguo 14/04/2011, 00:44
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Necesito idea de como lograr un flujo continuo

Hola a todos nuevamente!

Mucho les agradeceria si pueden ver esta pagina en la que intento scanear los codigos de barra de paquetes que van a ser entregados, me retorna lla descripcion del articulo, el peso y habra de calcular la tarifa o precio.

Mi problema es:

1- Cómo, despues de escanear un primer paquete retorno el cursor en "focus" al campo de texto de "scan" para que este listo para el proximo escaneo?


2- Como hago para escanear repetidamente y que el sistema agregue los datos del segundo paquete a la segunda fila, y asi sucesivamente?

Agradezco sus opiniones y comentarios!

A continuacion el codigo de la pagina en cuestion:

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


 
// Change the value of the outputText field
function setOutput(){
    if(httpObject.readyState == 4){
		var respuesta = httpObject.responseText.split(",");
        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('articulo').innerHTML = httpObject.innerHTML= respuesta[0];
		document.getElementById('peso').innerHTML = httpObject.innerHTML= respuesta[1];
		document.getElementById('precio').innerHTML = httpObject.innerHTML= respuesta[2];
    }
 
}
 
// Implement business logic    
function doWork(){    
    httpObject = getHTTPObject();
    if (httpObject != null) {
        httpObject.open("GET", "procesador.php?inputText="
                        +document.getElementById('inputText').value, true);
        httpObject.send(null); 
        httpObject.onreadystatechange = setOutput;
    }
}
 
var httpObject = null;
 
//-->


</script>

 
<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 id="articulo" class="articulo">Articulo</div>
  &nbsp;<div id="peso" class="peso">Peso</div><div id="precio" class="precio">Precio</div></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 />


Los estilos son estos, por si acaso:

Código:
<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; float:left; margin-left: 10px; text-align:center;}
	  .peso {width: 150px; border:1px solid #309; float:left; margin-left:20px; text-align:center;}
	  .precio {width: 150px; border:1px solid #309; float:right; 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>

Última edición por sentnel; 14/04/2011 a las 00:52
  #2 (permalink)  
Antiguo 14/04/2011, 10:33
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo

Friendly bump!.... ;)

Sugerencias es lo que necesito... lluvia de ideas... como enfrentarias tu este dilema?

Gracias!
  #3 (permalink)  
Antiguo 14/04/2011, 10:46
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 meses
Puntos: 63
Respuesta: Necesito idea de como lograr un flujo continuo

1- Me imagino que te refieres a realizar un reset sobre el formulario y luego proceder a realizar el focus sobre el campo, pues según veo estas realizando peticiones Ajax cada vez que pulsas una tecla, por lo cual es difícil determina cuando se a escaneado un producto o no (a no ser que el código tenga longitud fija, en cuyo caso tampoco es buena idea realizar una petición por cada tecla pulsada). Puedes utilizar una tecla de control como enter que al pulsarla realice la peticion al servidor y de paso realice el reset sobre el formulario con su respectivo focus().

2- me imagino que con DOM, dejame un ratico más y te presento una solución en codigo .
__________________
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.

Última edición por laratik; 14/04/2011 a las 11:02
  #4 (permalink)  
Antiguo 14/04/2011, 11:07
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo

Gracias laratik!

Cita:
realizar un reset sobre el formulario y luego proceder a realizar el onfocus sobre el campo
esto es correcto, lo que quiero es como si fueras al super y van escaneando tus articulos comprados, la cajera solo escanea articulo tras articulo y estos se van agregando a la lista y autosumandose, es exactamente lo que necesito crear.


Cita:
es difícil determina cuando se a escaneado un producto o no (a no ser que el código tenga longitud fija
en realidad es para usarse leyendo un codigo de barra, el scanner cuando lee automaticamente envia el pulso de "Enter", aparte de esto tambien la longitud debera ser fija, pues es para un control de paquetes, y el formato del codigo debera ser uniforme en este sentido.


Agradezco tu ayuda!
  #5 (permalink)  
Antiguo 14/04/2011, 11:42
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 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.
  #6 (permalink)  
Antiguo 14/04/2011, 12:06
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo



Laratik:

Me sorprenden sobremanera tus cualidades, primero la actitud de colaboracion, pero mas aun tu destreza en la materia, es obvio que no solo manejas esto con habilidad, sino tambien con una rapidez increible. Mis sinceras felicitaciones!

Funciona maravillosamente! Es exactamente lo que queria hacer, pero no esperaba una solucion, esperaba que me indicaran como manejarlo, etc., pero obtener la solucion, caramba, gracias gracias gracias!

Mientras tengo tu atencion dejame preguntarte algo mas, con lo cual puedo decir que completo el proyecto, y es lo relativo, y ahora si te aclaro que no pretendo que lo hagas por mi, pero ya dime ahora como hago dos campos adicionales, uno que autosume los precios, un subtotal, otro que calcule los impuestos y el otro que me de el resultado total.

La clave de la pregunta esta realmente, no en como hacerlo (pues creo que eso puedo manejarlo) sino, como grabaria esto a la base de datos al final de la transaccion?


De nuevo mis agradecimientos y admiracion!
  #7 (permalink)  
Antiguo 14/04/2011, 12:20
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 meses
Puntos: 63
Respuesta: Necesito idea de como lograr un flujo continuo

Tanto alago me pone rojo acerca de tu pregunta:

Cita:
como grabaria esto a la base de datos al final de la transaccion?
no se si existirá un mecanismo que finalice la transacción (realmente no tengo experiencia con lectores de código de barra) y envía algún tipo de pulsación (como el caso del enter). Si no es así, creo que la opción más obvia es la de colocar un botón submit al formulario "finalizar transacción" y enviar los valores a un script del lado del servidor que se encargue de guardar los datos. SALUDOS.
__________________
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.
  #8 (permalink)  
Antiguo 14/04/2011, 12:32
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo

Laratik:

Solo me queda darte las gracias otra vez! Genial y servicial.
  #9 (permalink)  
Antiguo 14/04/2011, 13:26
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo

Bueno, la verdad es que miro y miro y no se como meterle el diente. Dije que podia manejar lo de crear un campo de texto que fuera sumando los precios de los articulos segun se fueran ingresando, pero Laratik me abre un mundo nuevo: createElement, de manera que, la cantidad de articulos sera variable, no se cuantas filas habran y como llamar a cada fila (ej. precio fila 1 + precio fila 2, etc.) de modo que aqui estoy de nuevo preguntando como hago para calcular la suma de los precios ?

Gracias y Sorry
  #10 (permalink)  
Antiguo 14/04/2011, 13:45
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 11 meses
Puntos: 63
Respuesta: Necesito idea de como lograr un flujo continuo

Si vas a enviar tan solo el total sin importar los datos que se van a comprar, seria sencillo, solo es cuestion de crear una variable global dentro del script (sum) que se encargue de ir sumando cada uno de los productos que vas ingresando, e ir mostrandolos en un input text (si asi lo deseas):

Código Javascript:
Ver original
  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. // Get the HTTP Object
  4. var sum = 0;
  5.  
  6. function setOutput(){
  7.     if(httpObject.readyState == 4){
  8.         var respuesta = httpObject.responseText.split(",");
  9.         var res = document.getElementById("resultadosScan1");
  10.         var art = document.createElement("div");
  11.         var peso = document.createElement("div");
  12.         var precio = document.createElement("div");
  13.         art.className = "articulo";
  14.         peso.className = "peso";
  15.         precio.className = "precio";
  16.         document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
  17.         document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
  18.         document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
  19.         art.innerHTML = httpObject.innerHTML= respuesta[0];
  20.         peso.innerHTML = httpObject.innerHTML= respuesta[1];
  21.         precio.innerHTML = httpObject.innerHTML= respuesta[2];
  22.         res.appendChild(art);
  23.         res.appendChild(peso);
  24.         res.appendChild(precio);
  25.         sum = sum+parseInt(respuesta[2]);
  26.         document.getElementById("suma").value = sum;
  27.     }
__________________
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.
  #11 (permalink)  
Antiguo 14/04/2011, 13:59
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo

Voy a crear una constante llamada "Gracias" !!!!!!
  #12 (permalink)  
Antiguo 14/04/2011, 14:33
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 13 años, 10 meses
Puntos: 310
Respuesta: Necesito idea de como lograr un flujo continuo

Para el caso que te ocupa es viable, pero si quieres otra manera de hacerlo o una solución para otra ocasión:
Código Javascript:
Ver original
  1. var i = 1;
  2. while(document.getElementById('ejemplo'+i)){
  3.  // código
  4.  i++;
  5. }
  6.  
  7. /* ó */
  8.  
  9. for(var i = 1; act = document.getElementById('ejemplo'+i); i++){
  10.  // código
  11. }
Suponiendo que los elementos sean del tipo #ejemplo1, #ejemplo2, #ejemplo3...
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #13 (permalink)  
Antiguo 14/04/2011, 14:34
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo

Laratik:

No solo me has librado de infinidad de horas y dias con este proyecto que es de mi trabajo, en unos cuantos post me llevaste de principio a fin en esta pagina que usaremos cuando los clientes vengan a retirar sus paquetes.

Esta completa la tarea que me propuse y aunque no tuve que perder el pelo si aprendi muchisimo, me has dado las bases para seguir "inventando" como digo yo.

Ahora bien, hay 1 algo mas, y prometo que ya con esto concluyo todas estas consultas y haberte robado tu tiempo, aunque me temo que disfrutas esto:

Ultima consulta: Como puedo agregar al lado de los articulos una imagen (como una x) que sea para eliminar una fila?, por ejemplo si escaneo un articulo dos veces y quiero eliminar uno, como lo hago?

De paso puedes ver la pagina de resultado con los campos de subtotal, impuestos y total aqui.

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

Efectivamente disfruto de esto, de no ser así no lo haría. Para agregar la imagen lo haces por medio de DOM como el resto de elementos:

Código Javascript:
Ver original
  1. function setOutput(){
  2.     if(httpObject.readyState == 4){
  3.         var respuesta = httpObject.responseText.split(",");
  4.         var cont = document.createElement("div");
  5.         var res = document.getElementById("resultadosScan1");
  6.         var art = document.createElement("div");
  7.         var peso = document.createElement("div");
  8.         var precio = document.createElement("div");
  9.         var del = document.createElement("img"); //creo el div para eliminar
  10.         del.src = "eliminar.gif";
  11.         del.onclick = eliminar;
  12.         art.className = "articulo";
  13.         peso.className = "peso";
  14.         precio.className = "precio";
  15.         document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
  16.         document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
  17.         document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
  18.         art.innerHTML = httpObject.innerHTML= respuesta[0];
  19.         peso.innerHTML = httpObject.innerHTML= respuesta[1];
  20.         precio.innerHTML = httpObject.innerHTML= respuesta[2];
  21.         cont.appendChild(art);
  22.         cont.appendChild(peso);
  23.         cont.appendChild(precio);
  24.         cont.appendChild(del);
  25.         res.appendChild(cont);
  26.         sum = sum+parseInt(respuesta[2]);
  27.         document.getElementById("suma").value = sum;
  28.     }
  29.  
  30. }

Si eres observador te habrás fijado que aparte del elemento img, he creado un elemento div llamado cont (contenedor) al cual se agregan el resto de elementos (eso lo necesitamos para agrupar todos los elementos en un solo bloque y así facilitar su eliminación). Asignamos el src de la imagen y un evento onClick apuntando hacia la función eliminar.

Función eliminar:

Código Javascript:
Ver original
  1. function eliminar() {
  2.      var parent = this.parentNode;
  3.      var precio = parseInt(parent.childNodes[2].textContent);
  4.      var grandParent = parent.parentNode;
  5.      grandParent.removeChild(parent);
  6.      sum -= precio;
  7.      document.getElementById("suma").value = sum;
  8.  }

Deberemos hacer referencia a tres variables:
parent = elemento padre del elemento que disparo el evento (la imagen).
grandParent = elemento padre del padre del elemento que disparo el evento.
precio = tomamos el texto que contenga el hijo 2 (es decir el div que contiene el precio).
procedemos a remover de grandParent a parent, es decir removemos el contenedor de todos los elementos y ya para finalizar restamos el precio a la variable sum para luego mostrarla.

Repostería y demás:

Código CSS:
Ver original
  1. #resultadosScan1 img { margin-bottom: -5px; margin-left: 10px; cursor: pointer;}

Agrego estilo a la imagen para que se posicione como yo quiero y termino por adjudicarle un cursor pointer para dar un efecto de link.

Resultado:



Espero haber sido lo suficientemente claro en la explicación. Cualquier tipo de duda te sugiero recurras a este excelente manual y éxitos en tus próximos proyectos. SALUDOS.
__________________
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.
  #15 (permalink)  
Antiguo 14/04/2011, 16:23
 
Fecha de Ingreso: octubre-2010
Mensajes: 122
Antigüedad: 13 años, 6 meses
Puntos: 6
Respuesta: Necesito idea de como lograr un flujo continuo

Gracias! Me has ayudado y enseñado en esta tarde mas que lo que habia aprendido en meses.

Etiquetas: idea
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:18.