Foros del Web » Programando para Internet » Javascript » Frameworks JS »

aprendiendo a manejar xajax.

Estas en el tema de aprendiendo a manejar xajax. en el foro de Frameworks JS en Foros del Web. Buenas, estoy aprendiendo a manejar xajax con los ejemplos de desarrolloweb, me gustaría hacer algunas preguntas al respecto de los mismos. Estoy con el ejemplo ...
  #1 (permalink)  
Antiguo 20/07/2007, 15:02
 
Fecha de Ingreso: agosto-2006
Mensajes: 219
Antigüedad: 18 años, 4 meses
Puntos: 0
aprendiendo a manejar xajax.

Buenas, estoy aprendiendo a manejar xajax con los ejemplos de desarrolloweb, me gustaría hacer algunas preguntas al respecto de los mismos.

Estoy con el ejemplo de crear select dependientes de otro select.

Código PHP:
<?
//incluímos la clase ajax
require ('xajax/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

function 
select_combinado($id_provincia){
   
//función para crear el select combinado
   //debe extraer las opciones de un select a partir de un parámetro
   
   //generamos unos arrays con distintas poblaciones de varias provincias
   //estos valores en un caso práctico seguramente se extraerán de base de datos
   //no habría que cargar todos en memoria, sólo hacer el select de las poblaciones de la provincia deseada
   
$madrid = array("Madrid""Las Rozas""Móstoles""San Sebastián de los Reyes");
   
$valencia = array("Valencia""La Eliana""Paterna""Cullera");
   
$barcelona = array("Barcelona""Badalona");
   
$leon = array ("León""Astorga""Villamejil");
   
$poblaciones = array($madrid$valencia$barcelona$leon);
   
   
//creo las distintas opciones del select
Entiendo que aquí sería el segundo select, que colgaría del primero, no?, y que se recoge el id_provincia, y que la select esta condiciona al id_provincia.

quedaría tal que así:

Código:
  $nuevo_select ="<select name='poblaciones'>";

 $sSQL="Select * from descriptor where id_provincia =$id_provincia";
 $result=mysql_query($sSQL);
 echo "<select multiple name=\"id_descrip[]\">";
 //Generamos el menu desplegable
 while ($row=mysql_fetch_array($result))
 echo "<option value='{$row['id_descrip']}'>{$row['descriptor']}  </ option>"}}
Código PHP:
   $nuevo_select = "<select name='poblaciones'>";
   
   for ($i=0; $i<count($poblaciones[$id_provincia]); $i++){
   //for ($i=0; $i<2; $i++){
      $nuevo_select .= '<option value="' . $i . '">' . $poblaciones[$id_provincia][$i] . '</option>';
   }
   $nuevo_select .= "</select>";
   return $nuevo_select;
}

function generar_select($cod_provincia){
   //instanciamos el objeto para generar la respuesta con ajax
   $respuesta = new xajaxResponse('ISO-8859-1');
   
   if ($cod_provincia==999){
      //escribimos el select de poblaciones vacío
      $nuevo_select = '<select name="poblaciones">
                  <option value=0>Elegir provincia</option>
                  </select>
                  ';
   }else{
      $nuevo_select = select_combinado($cod_provincia);
   }
   //escribimos en la capa con id="seleccombinado"
   $respuesta->addAssign("seleccombinado","innerHTML",$nuevo_select);
   
   //tenemos que devolver la instanciación del objeto xajaxResponse
   return $respuesta;
}
   
//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("generar_select");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>

<html>
<head>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
   <title>Validar usuario en Ajax</title>
   <?
   
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
   
$xajax->printJavascript("xajax/");
   
?>
</head>

<body>

<form name="formulario">
Provincia:
<br>

<select name="provincia" onchange="xajax_generar_select(document.formulario.provincia.options[document.formulario.provincia.selectedIndex].value)">
Entiendo que el optión, en vez de sacarlo como se saca lo puedo generar dinámicamente mediante una consulta a una base de datos, no?

Código:

//Creamos la sentencia SQL y la ejecutamos
 $sSQL="Select * from provincia ";
 $result=mysql_query($sSQL);
 echo "<select multiple name=\"id_provincia[]\">";
 //Generamos el menu desplegable
 while ($row=mysql_fetch_array($result))
echo "<option value='{$row['id_provincia']}'>  
{$row['provincia']}  </ 
option>"}} 
Código PHP:
<option value="999">Selecciona provincia</option>
<
option value=0>Madrid</option>
<
option value=1>Valencia</option>
<
option value=2>Barcelona</option>
<
option value=3>León</option>
</
select>
<
br>
<
br>
Población: <div id="seleccombinado">
<
select name="poblaciones">
<
option value=0>Elegir provincia</option>
</
select>
</
div>
</
form>
</
body>
</
html

Como podeis ver, mis dudas es como se recoge en el segundo select los datos del primer select que se selecciona.

Un saludo y gracias

Oskar Calvo

pd. la url del ejemplo de desarrollo web:
http://www.desarrolloweb.com/articul...-ajax-php.html
  #2 (permalink)  
Antiguo 28/01/2008, 16:02
Avatar de totigo  
Fecha de Ingreso: marzo-2007
Ubicación: America
Mensajes: 103
Antigüedad: 17 años, 9 meses
Puntos: 3
Re: aprendiendo a manejar xajax.

Si te fijas en el codigo HTML veras que en el primer SELECT, hay un evento:
onchange="xajax_generar_select(document.formulario .provincia.options[document.formulario.provincia.selectedIndex].value)"

Tan pronto se selecciona un item del primer Select, se ejecuta la funcion generar_select la cual recibe como parametro el codigo de la provincia! en estos terminos:

1. El sistema realiza la busqueda
2. Construye la sintaxis HTML para el segundo select
3. Retorna la sintaxis que llenará el segundo SELECT en la capa id="seleccombinado",

//escribimos en la capa con id="seleccombinado"
$respuesta->addAssign("seleccombinado","innerHTML",$nuevo_sel ect);

//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;

En la capa HTML :

<div id="seleccombinado">
<select name="poblaciones">
<option value=0>Elegir provincia</option>
</select>
</div>


4. El segundo combo se llena!!

Veo que colocaste ECHO en las funciones!! Las funciones no te funcionaran con esos echos insertados!!

Cualquier duda no dude en preguntar!


Rodrigo Solorzano Pardo
  #3 (permalink)  
Antiguo 03/03/2010, 19:15
 
Fecha de Ingreso: marzo-2010
Mensajes: 2
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Re: aprendiendo a manejar xajax.

Hola buenas noches me puedes ayudar yo necesito trabajar con combos dependientes pero tomar los datos de una base de mysql y otro ejemplo seleccionar un dato de un combo y como consecuencia de eso que muestre un dato como respuesta de una consulta en base la seleccion hecha.

Armando


Cita:
Iniciado por totigo Ver Mensaje
Si te fijas en el codigo HTML veras que en el primer SELECT, hay un evento:
onchange="xajax_generar_select(document.formulario .provincia.options[document.formulario.provincia.selectedIndex].value)"

Tan pronto se selecciona un item del primer Select, se ejecuta la funcion generar_select la cual recibe como parametro el codigo de la provincia! en estos terminos:

1. El sistema realiza la busqueda
2. Construye la sintaxis HTML para el segundo select
3. Retorna la sintaxis que llenará el segundo SELECT en la capa id="seleccombinado",

//escribimos en la capa con id="seleccombinado"
$respuesta->addAssign("seleccombinado","innerHTML",$nuevo_sel ect);

//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;

En la capa HTML :

<div id="seleccombinado">
<select name="poblaciones">
<option value=0>Elegir provincia</option>
</select>
</div>


4. El segundo combo se llena!!

Veo que colocaste ECHO en las funciones!! Las funciones no te funcionaran con esos echos insertados!!

Cualquier duda no dude en preguntar!


Rodrigo Solorzano Pardo
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 18:35.