Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   Frameworks JS (http://www.forosdelweb.com/f127/)
-   -   Cargar combo en PHP sin recargar pagina (http://www.forosdelweb.com/f127/cargar-combo-php-sin-recargar-pagina-483617/)

virgyn86 21/04/2007 15:41

Cargar combo en PHP sin recargar pagina
 
Hola!! tengo que programar un buscador para un portal y tengo dos combos, uno que muestre las provincias y otro que en funcion de la provicia escogida muestre las localidades correspondientes. Estos datos se cargaran de una base de datos MySQL.
Me gustaria que el 2º combo se cargase cuando el usuario escogiese una opcion del 1º. Creo que es con javascript y AJAX pero no tengo ni idea de este lenguaje.

Ejemplo: cuando en el 1er combo se seleccione Madrid kiero que en ese momento se cargue el segundo combo con las localidades de Madrid.

Si pudieseis echarme una mano... Muchas gracias.

Felicidades por estos foros!! me encanta actualizarme en conocimientos y estos me resuelven algunas dudas.

killaton 21/04/2007 17:06

Re: Cargar combo en PHP sin recargar pagina
 
Hola....

Obviamente y como podras imaginartelo la respuesta es AJAX

yo lo e hecho con 3 listas dependientes en un Site.

Puedes verlo aqui... http://www.gtsneumaticos.com.ar

Bien ahora te dire como hacerlo.

Primero de todo tus dos combos deben tener id

por ejemplo utilizaré id="cbx_primero" para el 1er combo y id="cbx_segundo" para el 2do combo.

Segundo sobre el onChange del 1er combo llama a la funcion javascript onChange_primer_combo()

<script type="text/javascript" language="JavaScript1.2">

var url_carga_segundo_combo = "accion_carga_segundo_combo.php?id=";

var http = getHTTPObject(); // We create the HTTP Object

//---------------------------------------------------
//-- Genera xmlHttpRequest
//---------------------------------------------------

function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}

//------------------------------ on change del 1er combo

function onChange_primer_combo() {

// obtenemos el id seleccionado del 1er combo
var selObj = document.getElementById('cbx_primero');
var selIndex = selObj.selectedIndex;
var v_id = selObj.options[selIndex].value;

// blanquemos el 2do combo
document.getElementById('cbx_segundo').options.len gth = 0;

http.open("GET", url_carga_segundo_combo + escape(v_id) , true);

http.onreadystatechange = handleHttpResponse_onChange_primer_combo;

http.send(null);



}

// y por ultimo publicamos los resultados

//*---------------------------------------------------------------
//-- Publica Combo PERFIL segun seleccion Combo ANCHOS - PASO II
//----------------------------------------------------------------

function handleHttpResponse_onChange_Combo_Ancho() {



if (http.readyState == 4) {

var i;

var total = http.responseXML.getElementsByTagName('LINEA').len gth;



results = http.responseText.split(",");




for(i=0;i<total;i++){

document.getElementById('cbx_segundol').options[i+1]= new Option( http.responseXML.getElementsByTagName('COL1')[i].firstChild.data ,http.responseXML.getElementsByTagName('COL2')[i].firstChild.data);

}



window.status = '';


return false;

}

}

</script>

Bien hasta aqui seria todo tu codigo javascript necesario


Ahora como ultimo vamos con el php...

Creas un php con el nombre accion_carga_segundo_combo.php

este archivo va a publicar un XML por lo tanto debe llevar los tags de xml para identificarlo como tal. Va el codigo


<?php
header('Content-Type: text/xml');
header ("Expires: Fri, 14 Mar 1980 20:53:00 GMT"); //la pagina expira en fecha pasada
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); //ultima actualizacion ahora cuando la cargamos
header ("Cache-Control: no-cache, must-revalidate"); //no guardar en CACHE
header ("Pragma: no-cache");

$host = "host";
$user = "usuario";
$password = "password";
$db = "base de datos";

$link = mysql_connect($host, $user, $password);

mysql_select_db($db,$link);

$sql = "SELECT * FROM medida_perfil ";
$sql .= " WHERE campo_en_relacion_con_primer_combo = '$id' ";

$result = mysql_query($sql);

if (mysql_num_rows($result) > 0) {

$string = '';
$string = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
$string .= "<MARCAS>\n";

while ($row = mysql_fetch_assoc($result)){

$string .= "<LINEA>\n";
$string .= "<COL1>".$row[id_segundo_combo]."</COL1>\n";
$string .= "<COL2>".$row[descripcion]."</COL2>\n";
$string .= "</LINEA>\n";


}

$string .= "</MARCAS>\n";

echo $string;
}

?>

LISTO... de esta forma debe funcionar sin problemas....

Cualquier cosa escribeme a mi correo personal y lo vemos.... Pero deberia andar sin problemas...

salu2.

golun2006 06/06/2007 12:50

Re: Cargar combo en PHP sin recargar pagina
 
hola sabes esta bacn el codigo que has ddejado lo he tratao de aplicar a un ejemplo que quiero hacer pero la verdad q no puedo no si se podrias orientarme un poco de como funciona asi a grosdo modo y q tablas interactuan ahi ya q hay algunos vacios qno entiendo bien ya q no tengo ni se como es tu modelo de datos gracias..!!

carlosmbrizuela 09/06/2007 11:40

Re: Cargar combo en PHP sin recargar pagina
 
podrian poner le codigo html donde se encuentran los select y la invocacion a los metodos.

saludos

zyon 10/06/2007 16:28

Re: Cargar combo en PHP sin recargar pagina
 
a pues auiq esta lo que necesitan....

kaninox 11/06/2007 02:47

Re: Cargar combo en PHP sin recargar pagina
 
mirese este postyo tambien tube ese problema ;)

http://php.novacreations.net/viewtopic.php?t=53

carlosmbrizuela 11/06/2007 21:38

Re: Cargar combo en PHP sin recargar pagina
 
Cita:

a pues auiq esta lo que necesitan....
donde? no se ve...

rogoelpra 14/06/2007 20:08

Re: Cargar combo en PHP sin recargar pagina
 
Hola, soy nuevo en Ajax y con otro codigo logro que el segundo combo se recargue segun lo que dice el primero, el problema es que necesito un tercero segun el segundo y un cuarto segun el tercero y no logro hacerlo, podrias colaborarme.
Tu codigo esta un poco complicado sobre todo donde dice "este archivo va a publicar un XML por lo tanto debe llevar los tags de xml para identificarlo como tal. Va el codigo" creo que no los tengo todos.

Muchas Gracias


Cita:

Iniciado por killaton (Mensaje 1977691)
Hola....

Obviamente y como podras imaginartelo la respuesta es AJAX

yo lo e hecho con 3 listas dependientes en un Site.

Puedes verlo aqui... http://www.gtsneumaticos.com.ar

Bien ahora te dire como hacerlo.

Primero de todo tus dos combos deben tener id

por ejemplo utilizaré id="cbx_primero" para el 1er combo y id="cbx_segundo" para el 2do combo.

Segundo sobre el onChange del 1er combo llama a la funcion javascript onChange_primer_combo()

<script type="text/javascript" language="JavaScript1.2">

var url_carga_segundo_combo = "accion_carga_segundo_combo.php?id=";

var http = getHTTPObject(); // We create the HTTP Object

//---------------------------------------------------
//-- Genera xmlHttpRequest
//---------------------------------------------------

function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}

//------------------------------ on change del 1er combo

function onChange_primer_combo() {

// obtenemos el id seleccionado del 1er combo
var selObj = document.getElementById('cbx_primero');
var selIndex = selObj.selectedIndex;
var v_id = selObj.options[selIndex].value;

// blanquemos el 2do combo
document.getElementById('cbx_segundo').options.len gth = 0;

http.open("GET", url_carga_segundo_combo + escape(v_id) , true);

http.onreadystatechange = handleHttpResponse_onChange_primer_combo;

http.send(null);



}

// y por ultimo publicamos los resultados

//*---------------------------------------------------------------
//-- Publica Combo PERFIL segun seleccion Combo ANCHOS - PASO II
//----------------------------------------------------------------

function handleHttpResponse_onChange_Combo_Ancho() {



if (http.readyState == 4) {

var i;

var total = http.responseXML.getElementsByTagName('LINEA').len gth;



results = http.responseText.split(",");




for(i=0;i<total;i++){

document.getElementById('cbx_segundol').options[i+1]= new Option( http.responseXML.getElementsByTagName('COL1')[i].firstChild.data ,http.responseXML.getElementsByTagName('COL2')[i].firstChild.data);

}



window.status = '';


return false;

}

}

</script>

Bien hasta aqui seria todo tu codigo javascript necesario


Ahora como ultimo vamos con el php...

Creas un php con el nombre accion_carga_segundo_combo.php

este archivo va a publicar un XML por lo tanto debe llevar los tags de xml para identificarlo como tal. Va el codigo


<?php
header('Content-Type: text/xml');
header ("Expires: Fri, 14 Mar 1980 20:53:00 GMT"); //la pagina expira en fecha pasada
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); //ultima actualizacion ahora cuando la cargamos
header ("Cache-Control: no-cache, must-revalidate"); //no guardar en CACHE
header ("Pragma: no-cache");

$host = "host";
$user = "usuario";
$password = "password";
$db = "base de datos";

$link = mysql_connect($host, $user, $password);

mysql_select_db($db,$link);

$sql = "SELECT * FROM medida_perfil ";
$sql .= " WHERE campo_en_relacion_con_primer_combo = '$id' ";

$result = mysql_query($sql);

if (mysql_num_rows($result) > 0) {

$string = '';
$string = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
$string .= "<MARCAS>\n";

while ($row = mysql_fetch_assoc($result)){

$string .= "<LINEA>\n";
$string .= "<COL1>".$row[id_segundo_combo]."</COL1>\n";
$string .= "<COL2>".$row[descripcion]."</COL2>\n";
$string .= "</LINEA>\n";


}

$string .= "</MARCAS>\n";

echo $string;
}

?>

LISTO... de esta forma debe funcionar sin problemas....

Cualquier cosa escribeme a mi correo personal y lo vemos.... Pero deberia andar sin problemas...

salu2.



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

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.