Incremento de variable Ajax y checkbox

lemonstar · #1 (**permalink**) 15/12/2011, 00:19

Hola gente necesito su ayuda para destrabarme que me estoy volviendo loco con este código, soy newbie en esto ;P

En mi página cargo una tabla con AJAX usando un php y MySql y muestro todo en un HTML, hasta ahí todo bien.

Dentro de esa tabla tengo un checkbox en cada fila, al hacer clic en ese checkbox quiero que vaya sumando un valor.

por ejemplo en cada fila tengo:

Naranjas=$5
Frutillas=$9
Melon=$3

Parte del código PHP es:

Código:

echo "<td>" ."<INPUT TYPE='checkbox' NAME='frutas[]' Value='$fruta'  onclick='CalcularTotal(this.value)'/>". "</td>";

Cuando el usuario hace clic en cada fruta , se tiene que sumar en la misma página los valores. Esto lo logré hacer con AJAX, el problema es que cada vez que hago click en otro checkbox, no va acumulando sino que realiza nuevamente la función y reemplaza el contenido del DIV encambio de sumar la variable.

La función CalcularTotal mediante AJAX busca el precio de la fruta y lo imprime en pantalla correctamente, pero al hacerlo nuevamente Se reemplaza por el nuevo valor y no logro hacer que se vaya acumulando, probe imprimiendo Javascript en ese php y sumarlo ahí pero no hay Caso

Vale aclarar que Tengo Dos Funciones Principales de AJAX
1) Es la que muestra la Tabla con Todos Los registros entre ellos los Checkbox
2) Es la que tiene que calcular la suma de los precios

DISCULPEN SI NO SE ENTIENDE NADA soy nuevo en esto y dandome manía logre hacer bastantes cosas pero me re trabé aca mall. No les pegue el código porque es un quilombo entenderlo todo,

Si pueden orientarme un poco estare agradecidoo

Saludso!!!

#2 (**permalink**) 15/12/2011, 00:41

si dejas el codigo que estas usando, sera mas facil para ayudarte, seguro con un simple + se soluciona todo

salu2

lemonstar · #3 (**permalink**) 15/12/2011, 06:38

Ok voy a intentar , espero que lo entiendan

1. En el index.html:

Código:

//aca carga la tabla con todos los registros
<div id="test2">
  <p>Cargando lista de películas, aguarde unos instantes...</p>
  <p><img src="./img/bigrotation2.gif" width="32" height="32" /></p>
</div>

//aca carga el espacio total
<div id="test3">
  <p>Espacio Total=</p>
</div>

2. En el script.js:

a)esta es la funcion AJAX que carga toda la tabla en el DIV TEST2

Código:

function CargaLista(str)
{
if (str=="")
  {

  document.getElementById("test2").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp2=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5

  xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
  }
  

xmlhttp2.onreadystatechange=function()
  {
  if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
    {
    document.getElementById("test2").innerHTML=xmlhttp2.responseText;
    }
  }
  
xmlhttp2.open("GET","cargalista.php",true);

xmlhttp2.send();
}

A la primer función la llamo cuando se carga la página

Código:

$(document).ready(function() {CargaLista();}

En cargalista.php:

Código:

<?php

header("Content-Type: application/xml; charset=ISO-8859-1");

$host2="localhost";
$user2="lalala_user";
$passwd2="lalal_pass";
$dbname2="lala_pm2";
$tabla2="peliculas";


$conexion2 = mysql_connect ($host2, $user2, $passwd2) or die ("No se puede conectar con el servidor");

mysql_select_db ($dbname2) or die ("No se puede seleccionar la base de datos");

$inst_sql2="SELECT * FROM peliculas order by original";

$consulta2 = mysql_query ($inst_sql2, $conexion2) or die ("Fallo en la consulta");

$muestra_consulta2=mysql_num_rows($consulta2);


$sPattern2 = '/\s*/m'; 
$sReplace2 = '';
$size_total=0;

echo "<table id='hor-zebra' border='1'>
<tr>
<th> </th>
<th>Titulo</th>
<th>A&ntilde;o</th>
<th>Res</th>
<th>Formato</th>
<th>G&eacute;nero</th>
<th>IMDB</th>
</tr>";

if ($muestra_consulta2> 0) {
	

while ($fila2 = mysql_fetch_array($consulta2)) {


$id2=$fila2['ID'];

$estreno2=$fila2['Estreno'];
$res2=$fila2['Res'];
$formato2=$fila2['Formato'];
$genero2=$fila2['Genero'];
$imdb2=$fila2['Imdb'];
$size2=$fila2['Size'];
$original2=$fila2['Original'];

$nuevo_original2="id".preg_replace( $sPattern2, $sReplace2, $original2 );

	echo "<tr>";
//ACA ES DONDE LE VOY A PASAR EL VALOR DEL CHECKBOX A LA OTRA FUNCIÓN
	echo "<td>" ."<INPUT TYPE='checkbox' NAME='originales[]' Value='$original2' id='$nuevo_original2' onclick='Incrementa(this.value)'/>". "</td>";
	echo "<td>" . $original2 . "</td>";
	echo "<td>" . $estreno2 . "</td>";
	echo "<td>" . $res2 . "P"."</td>";
	echo "<td>" . $formato2 . "</td>";
	echo "<td>" . $genero2 . "</td>";
	echo "<td>" . "<a target='_blank' href=http://www.imdb.es/title/". $imdb2 . "><img src='./img/imdb_logo.png' width='43' height='21'/></a>" . "</td>";
	echo "</tr>";

   }
}

echo "</table>";

mysql_close ($conexion2);

?>

b)esta es la funcion AJAX que carga el incremento en el DIV TEST3

Código:

function Incrementa(str)
{
if (str=="")
  {

  document.getElementById("test3").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp3=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5

  xmlhttp3=new ActiveXObject("Microsoft.XMLHTTP");
  }
  

xmlhttp3.onreadystatechange=function()
  {
  if (xmlhttp3.readyState==4 && xmlhttp3.status==200)
    {
    document.getElementById("test3").innerHTML=xmlhttp3.responseText;
    }
  }
xmlhttp3.open("GET","gb.php?idoriginalgb="+str,true);

xmlhttp3.send();


}

El php donde tendría que incrementar (gb.php):

Código:

<?php

header("Content-Type: application/xml; charset=ISO-8859-1");

$idoriginal=$_GET["idoriginalgb"];

//Muestra el titulo de la pelicula
echo $idoriginal;



$host="localhost";

$user="lalalaaa";
$passwd="lalal";
$dbname="lalalala";
$tabla="peliculas";


$conexion = mysql_connect ($host, $user, $passwd) or die ("No se puede conectar con el servidor");


mysql_select_db ($dbname) or die ("No se puede seleccionar la base de datos");



$inst_sql="select Size from ($tabla) where Original ='$idoriginal'";





$consulta = mysql_query ($inst_sql, $conexion) or die ("Fallo en la consulta");



$muestra_consulta=mysql_num_rows($consulta);



if ($muestra_consulta> 0 ) {
	


while ($fila3 = mysql_fetch_array($consulta)) {
$size3=$fila3['Size'];

$size_total=$size_total+$size3;

echo "<table border='1'>
<tr>
<th>Espacio</th>
</tr>";
	echo "<tr>";
	echo "<td>" . $size_total . "</td>";
	echo "</tr>";

echo "</table>";
   }
   
}


mysql_close ($conexion);
	

?>

Eso fué todo, vuelvo a repetir Al cliquear en un checbox muestra correctamente en DIV TEST3 el valor con el nombre de película, el problema es al cliquear en otro checkbox en cambio de sumar el valor, cambia todo y eso es porque estoy llamando nuevamente a la función, ¿como debería incrementar una variable y donde guardarla para luego mostrarla???

GRACIASSSSS desde yaa por la ayuda

#4 (**permalink**) 15/12/2011, 07:58

Fijate si te sirve este codigo, para deducir una solucion:

Código HTML:

Ver original<script language="javascript">
function sumar(sel) {
    var obj, sel, precio, obj2;
    precio = 0;
    obj = document.forml['campo[]'];
    for (i = 0; lcheck = obj[i]; i++) {
        if(obj[i].checked){
            precio += parseInt(obj[i].value);
        }
        
    }
    document.getElementById('precio').innerHTML = precio;
}
 
</script>
 
<form action="" method="post" name="forml" >
<input name="campo[]" type="checkbox" value="1" onClick="sumar(this)">
<input name="campo[]" type="checkbox" value="2" onClick="sumar(this)">
<input name="campo[]" type="checkbox" value="3" onClick="sumar(this)">
<input name="campo[]" type="checkbox" value="4" onClick="sumar(this)">
<div id="precio"></div>
</form>

lemonstar · #5 (**permalink**) 15/12/2011, 13:38

Gracias!!! me sirvió falta un solo tema, yo no tengo que sumar el "value" de cada checkbox ya que este son Titulos en String, intente usar el atributo "alt" del checkbox para asignarle ahí el valor me funciona en FF y en CHrome pero no en IE, tenés idea que puede ser??

Osea el código me quedó asi:

Código:

<script language="javascript">
function sumar(sel) {
    var obj, sel, precio, obj2;
    precio = 0;
    obj = document.testform['originales[]'];
    for (i = 0; lcheck = obj[i]; i++) {
        if(obj[i].checked){
            //precio += parseInt(obj[i].alt);
			precio += parseFloat(obj[i].alt);
        }
    }
    document.getElementById('precio').innerHTML = precio;
}
</script>

Y en el checkbox (la variable que se tiene que incrementar es $size2, ya que el value despues lo va a mandar al formulario y tiene que ser el titulo de la peli.

Código:

echo "<td>" ."<INPUT TYPE='checkbox' NAME='originales[]' Value='$original2' id='$nuevo_original2' onclick='sumar(this)' alt='$size2'/>". "</td>";

Lo raro es porque no suma en IE, encambio de la Suma aparece NaN

Desde ya graciassss

lemonstar · #6 (**permalink**) 15/12/2011, 15:16

Lo logré hacer funcar con este script en el body

Código:

<script>

var clickHandlers = (function () {
var testform = document.getElementById("testform");
var totalcost = document.getElementById("totalcost");

testform.onclick = function (e) {
e = e || window.event;
var thisInput = e.target || e.srcElement;
var sel = document.getElementsByName('originales[]');
var sum = 0;
for (var i=0; i<sel.length; i++) {
if (sel[i].checked) { sum += parseFloat(sel[i].alt); }
}
totalcost.value = (sum > 0) ? sum.toFixed(2) : "";
}
return null;
}()); 
</script>

y un input donde se van asignando las sumas

Código:

<input type="text" id="totalcost" value="">

Gracias igualmente !