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

Cargar combo en PHP sin recargar pagina

Estas en el tema de Cargar combo en PHP sin recargar pagina en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/04/2007, 15:41
 
Fecha de Ingreso: abril-2007
Mensajes: 4
Antigüedad: 17 años
Puntos: 0
Exclamación 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.
  #2 (permalink)  
Antiguo 21/04/2007, 17:06
 
Fecha de Ingreso: julio-2003
Mensajes: 71
Antigüedad: 20 años, 8 meses
Puntos: 0
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.
  #3 (permalink)  
Antiguo 06/06/2007, 12:50
 
Fecha de Ingreso: junio-2007
Mensajes: 1
Antigüedad: 16 años, 10 meses
Puntos: 0
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..!!
  #4 (permalink)  
Antiguo 09/06/2007, 11:40
Avatar de carlosmbrizuela  
Fecha de Ingreso: enero-2007
Ubicación: La Plata (Argentina)
Mensajes: 490
Antigüedad: 17 años, 3 meses
Puntos: 1
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
__________________
http://www.rollermountain.com
  #5 (permalink)  
Antiguo 10/06/2007, 16:28
 
Fecha de Ingreso: septiembre-2005
Mensajes: 1.289
Antigüedad: 18 años, 6 meses
Puntos: 3
Re: Cargar combo en PHP sin recargar pagina

a pues auiq esta lo que necesitan....
__________________
Wow! No se que decir...
  #6 (permalink)  
Antiguo 11/06/2007, 02:47
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.597
Antigüedad: 18 años, 7 meses
Puntos: 49
Re: Cargar combo en PHP sin recargar pagina

mirese este postyo tambien tube ese problema ;)

http://php.novacreations.net/viewtopic.php?t=53
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #7 (permalink)  
Antiguo 11/06/2007, 21:38
Avatar de carlosmbrizuela  
Fecha de Ingreso: enero-2007
Ubicación: La Plata (Argentina)
Mensajes: 490
Antigüedad: 17 años, 3 meses
Puntos: 1
Re: Cargar combo en PHP sin recargar pagina

Cita:
a pues auiq esta lo que necesitan....
donde? no se ve...
__________________
http://www.rollermountain.com
  #8 (permalink)  
Antiguo 14/06/2007, 20:08
Avatar de rogoelpra  
Fecha de Ingreso: abril-2007
Ubicación: Bucaramanga
Mensajes: 246
Antigüedad: 17 años
Puntos: 2
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 Ver Mensaje
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.
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 10:33.