Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/06/2006, 12:00
Avatar de JuanKa
JuanKa
 
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 20 años, 3 meses
Puntos: 1
Comenzando con AJAX

Hola a todos.

Quizas sea un poquito extendo pero creo que valga la pena para que me puedan ayudar.

Actualmente he realizado una mini gestion de prendas de vestir y ustedes como saben estan involucrados varios cosas , como por ejemplo, prendas, colores, tallas y precios.

Esta mini gestion esta ya operativa en internet, en la cual envio a la cesta, la la prenda con su respectivos datos (id_prenda,id_talla,id_color,cantidad), es decir que tengo una pagina de nombre prenda_puntual.php en la cual me muestra sus datos, entonces el cliente puede escoger su color y su talla y la cantidad y debajo de estas caracterisiticas tengo un boton de tipo submit que cuando presiono lo envio a una pagina de nombre cesta.php.

Hasta aca me lo realiza todo muy bien

Pero porque explico esto, porque me gustaria trabajar con AJAX por que le permitira al cliente enviar el mismo articulo pero mandaria por ejemplo del color Azul la Talla X y presionar sobre el boton enviar a cesta, pero que NO me lo envie a cesta.php sino que se quede en esa misma pagina(pero que en segundo plano me lo grabe en su tabla cestita), es decir en prenda_puntual.php y poder seleccionar nuevamente de la misma prenda del Color Azul la talla XXL, es decir que en la Base de Datos en la Tabla cestita haya :

Prenda.....................Color...............Tal la
Camisa cuello cisne....Azul.................X
Camisa cuello cisne....Azul.................XXL
etc
etc
etc

Como puedo Hacer esto con AJAX
************************************************
CODIGO NORMAL EN INTERNET

prenda_puntual.php

<form action="cesta.php?action=add_item&id_prenda=<?php echo $param_id_prenda; ?>" method="post" name="form1" class="Formulario_Envio">
<BR>
<table width="500" height="30" border="0" align="center" cellpadding="2" cellspacing="2" class="Bordeado_Tabla">
<tr>
<td scope="col"><div align="center" class="Estilo6"><? echo $var_descripcion; ?></div></td>
</tr>
</table>
<BR>
<BR>
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2" class="Bordeado_Tabla">
<tr>
<td width="162" scope="col"><div align="center" class="Estilo4">
<div align="right">Referencia</div>
</div></td>
<td width="24" scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo6" scope="col"><? echo $var_referencia; ?></td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo4">Precio por Unidad </div></td>
<td scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo2" scope="col"><? echo $var_precio; ?> <span class="Estilo6">&euro;</span> </td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo4">Colores Disponibles </div></td>
<td scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo2" scope="col">
<?
$registros_color=mysql_num_rows($consulta_color_re gistradas);
$c=1;
while($lineas_color=mysql_fetch_array($consulta_co lor_registradas))
{
if ($c == $registros_color)
{ echo $lineas_color['des_color']; }
else
{ echo $lineas_color['des_color']." - "; }
$c++;
}
?>
</td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo4">Tallas Disponibles </div></td>
<td scope="col"><div align="center" class="Estilo6"><strong>:</strong></div></td>
<td colspan="2" class="Estilo2" scope="col">
<?
$registros_tallas=mysql_num_rows($consulta_tallas_ registradas);
$t=1;
while($lineas_tallas=mysql_fetch_array($consulta_t allas_registradas))
{
if ($t == $registros_tallas)
{ echo $lineas_tallas['cod_talla']; }
else
{ echo $lineas_tallas['cod_talla']." - "; }
$t++;
}
?>
</td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo8">Seleccionar Talla </div></td>
<td scope="col"><div align="center"><span class="Estilo6"><img src="../../Imagenes/Web/flechas_seleccionar.gif" width="7" height="6"></span></div></td>
<td colspan="2" class="Estilo2" scope="col">
<select name="txt_talla" class="Seleccion_Lista" id="txt_talla">
<?
while ($var_talla=mysql_fetch_array($consulta_tallas_sel eccionar))
{
echo"<option value=\"$var_talla[id_talla]\">$var_talla[cod_talla]</option>";
}

?>
</select>
</td>
</tr>
<tr>
<td scope="col"><div align="right" class="Estilo8">Enviar a cesta </div></td>
<td scope="col"><div align="center"><span class="Estilo6"><img src="../../Imagenes/Web/flechas_seleccionar.gif" width="7" height="6"></span></div></td>
<td width="25" class="Estilo2" scope="col">
<input name="txt_cantidad" type="text" class="Caja_Cantidad" id="txt_cantidad" style="text-align:center" onKeyUp="CuentaChar(this.value)" value="2" size="2" maxlength="2">
</td>
<td width="261" class="Estilo2" scope="col">prendas</td>
</tr>
</table>
<BR>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" scope="col"><div align="center">
<input name="btn_enviar" type="submit" class="Boton_Cesta" value="A&ntilde;adir a Cesta" >
</div></td>
</tr>
</table>
<BR>
</form>

************************************************
cesta.php
$param_id_prenda=$_GET["id_prenda"];
$var_cantidad=$_POST["txt_cantidad"];
$var_id_color=$_POST["txt_color"];
$var_id_talla=$_POST["txt_talla"];

switch($_GET["action"])
{
case "add_item":
{
$consulta_cesta=mysql_result(mysql_query("SELECT COUNT(*) FROM cesta WHERE codi_artic='$param_id_prenda' AND
cookieId='".GetCartId()."' AND
id_color=$var_id_color AND
id_talla = $var_id_talla "
,$conectar),0);
if ($consulta_cesta==0)
{ AddItem($_GET["id_prenda"], $var_cantidad, $var_id_color, $var_id_talla, $var_id_cliente );
ShowCart();
break;
}
else
{
include ('verifica_cabecera.php');
echo "Ya EXISTE esta Prenda, con el mismo Color y Talla en su Pedido";
include ('verifica_pie_pagina.php');
break;
}
}

Leyendo manuales por alli tengo un JS donde guardo los siguiente:

function creaAjax(){
var objetoAjax=false;
try {
/*Para navegadores distintos a internet explorer*/
objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
/*Para explorer*/
objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E) {
objetoAjax = false;
}
}

if (!objetoAjax && typeof XMLHttpRequest!='undefined') {
objetoAjax = new XMLHttpRequest();
}
return objetoAjax;
}

function FAjax (url,capa,valores,metodo)
{
var ajax=creaAjax();
var capaContenedora = document.getElementById(capa);

/*Creamos y ejecutamos la instancia si el metodo elegido es POST*/
if(metodo.toUpperCase()=='POST')
{
ajax.open ('POST', url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState==1) {
capaContenedora.innerHTML="Cargando.......";
}
else if (ajax.readyState==4){
if(ajax.status==200)
{
document.getElementById(capa).innerHTML=ajax.respo nseText;
}
else if(ajax.status==404)
{
capaContenedora.innerHTML = "La direccion existe";
}
else
{
capaContenedora.innerHTML = "Error: ".ajax.status;
}
}
}
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(valores);
return;
}


QUISIERA SABER COMO IMPLEMENTARIA ESTO CON AJAX YA QUE ME GUSTARIA NO RECARGAR LA PAGINA ES DECIR NO IR A CESTA.PHP Y QUE SE QUEDE EN PRENDA_PUNTUAL.PHP PARA INGRESAR TODO LO QUE EL CLIENTE NECESITE Y DESPUES HACER UN BOTON QUE ME PERMITA VER LO QUE HE INGRESADO EN LA CESTA Y QUE LUEGO EL CLIENTE TOME DECISIONES PARA QUE PUEDA REALIZAR EL PEDIDO. ES DECIR DARLE AL CLIENTE LO MAS OPTIMO POSIBLE Y NO TENGA PROBLEMAS DE IR DE UNA PAGINA A OTRA.

EL PROBLEMA ES QUE DESCONOZCO COMO DEBO ENVIAR LOS PARAMETROS DE UNA PAGINA A OTRA EN SEGUNDO PLANO


Gracias a todos y reciban un cordial saludo.