Foros del Web » Programando para Internet » PHP »

Combos Dependientes 3 niveles php ajax mysql

Estas en el tema de Combos Dependientes 3 niveles php ajax mysql en el foro de PHP en Foros del Web. Hola a todos, soy nueva aqui y necesito su ayuda, llevo dias intentando hacer que funcionen una serie de select dependientes en un sistema que ...
  #1 (permalink)  
Antiguo 19/04/2014, 15:46
Avatar de pierinamorajp  
Fecha de Ingreso: abril-2014
Mensajes: 4
Antigüedad: 10 años
Puntos: 0
Exclamación Combos Dependientes 3 niveles php ajax mysql

Hola a todos, soy nueva aqui y necesito su ayuda, llevo dias intentando hacer que funcionen una serie de select dependientes en un sistema que estoy comenzando, es en relacion a una empresa y van asi:

REGION>PLANTA>DEPARTAMENTO>CARGO

Es decir, que las plantas se filtren de acuerdo a la Region seleccionada anteriormente, luego se muestren los Departamentos de esa Planta, y luego los cargos o tipo de trabajadores de ese departamento en concreto. El problema es que solo logro mostrar las regiones, y no comprendo donde esta el error. Es urgente resolverlo :S
De antemano muchas Graciass... se que me ayudarán...:)

Aca les dejo los fragmentos de codigos:

Index.php:

<script>
function requerir(){
try{
req= newXMLHttpRequest();}
catch(err1){
try{
req= newActiveXObject("Microsoft.XMLHTTP");
}
catch(err2){
try{
req= newActiveXObject("Msxml2.XMLHTTP");
}catch(err3){
req= false;
}
}
}
return req;
}
var peticion= requerir();
function busca_planta()
{
var aleatorio= parseInt(Math.random()*999999999);
valor= $(this).val();
// valor= document.getElementByID("region").value;
var url="planta.php?valor="+valor+"&r="+aleatorio;
peticion.open("POST",url,true);
peticion.onreadystatechange= respuesta_Planta();
peticion.setRequestHeader('Content-type','application/x-www-form-urlencoded');
peticion.send(null);
}

function respuesta_planta(){
if( peticion.readyState==4){
if(peticion.status==200){
document.getElementByID("plantas").innerHTML=petic ion.responseText;
}else{
alert("ha ocurrido un error"+peticion.statusText);
}
}
}

var peticion1= requerir();

function busca_depa()
{
var aleatorio= parseInt(Math.random()*999999999);
valor=
valor= document.getElementByID("plantas").value;
var url="departamento.php?valor="+valor+"&r="+aleatori o;
peticion1.open("POST",url,true);
peticion1.onreadystatechange= respuesta_depa();
peticion1.setRequestHeader('Content-type','application/x-www-form-urlencoded');
peticion1.send(null);
}

function respuesta_depa(){
if( peticion1.readyState==4){
if(peticion1.status==200){
document.getElementByID("depas").innerHTML=peticio n1.responseText;
}else{
alert("ha ocurrido un error"+peticion1.statusText);
}
}
}

var peticion2= requerir();

function busca_cargo()
{
var aleatorio= parseInt(Math.random()*999999999);
valor= document.getElementByID("depas").value;
var url="cargo.php?valor="+valor+"&r="+aleatorio;
peticion2.open("POST",url,true);
peticion2.onreadystatechange= respuesta_depa();
peticion2.setRequestHeader('Content-type','application/x-www-form-urlencoded');
peticion2.send(null);
}

function respuesta_depa(){
if( peticion2.readyState==4){
if(peticion2.status==200){
document.getElementByID("cargos").innerHTML=petici on2.responseText;
}else{
alert("ha ocurrido un error"+peticion2.statusText);
}
}
}
</script>

<form action="#" method="POST" class="form-horizontal">
<h3>A Qui&eacute;n desea enviar?</h3>
<label for="region">Pa&iacute;s/Estado </label>
<?php
$region= mysql_query("SELECT id, nombre,pais FROM region order by pais");
?>
<select name="region" id="region" onchange="busca_planta(this.value)" class="form-control">
<option>Seleccione</option>
<?php
while ($fila = mysql_fetch_array($region)){?>
<option value="<?php echo $fila['id'];?>"><?php echo $fila['pais'].' / '.$fila['nombre'];?></option>
<?php }?>
</select>
<div id="plantas">
<label>Planta </label>
<select id='plantas' class="form-control">
<option value="0">Seleccione</option>
</select>
</div>
<div id="depas">
<label>Departamento </label>
<select id='depas' class="form-control">
<option value="0">Seleccione</option>
</select>
</div>
<div id="cargos">
<label>Tipo de Cargo </label>
<select id='cargos' class="form-control">
<option value="0">Seleccione</option>
</select>
</div>
</form>

PLANTA.php:

<?php
require'config.php';
$valor=$_POST['valor'];
$planta= mysql_query("SELECT id,codigo,nombre FROM planta WHERE id_region='$valor'");
echo '<select id="plantas" name="plantas" onChange="busca_depa()">';
echo'<option value="">Seleccione</option>';
while ($fila = mysql_fetch_array($planta)){
echo '<option value="'.$fila['id'].'">'.$fila['nombre'].'</option>';
}
echo'</selct>';?>

DEPARTAMENTO.php:

<?php
require'config.php';
$valor=$_POST['valor'];
$consulta= mysql_query("SELECT id_depa FROM depaxplanta WHERE id_planta='$valor'");
while($row= mysql_fetch_array($consulta)){
$depa= mysql_query("SELECT id,codigo,nombre FROM departamento WHERE id='$row[id_depa]'");
echo '<select id="depas" name="depas" onChange="busca_cargo()>';
echo'<option value="">Seleccione</option>';
while($fila= mysql_fetch_array($depa)){
echo '<option value="'.$fila['id'].'">'.$fila['nombre'].'</option>';
}
}echo'</selct>';?>

CARGO.php:

<?php
require'config.php';
$valor=$_POST['valor'];
$cargo= mysql_query("SELECT cargo FROM persona WHERE id_depa='$valor'");
echo '<select>';
echo'<option value="">Seleccione</option>';
while ($fila = mysql_fetch_array($cargo)){
echo '<option value="'.$fila['cargo'].'">'.$fila['cargo'].'</option>';
}
echo'</select>;'?>

ESTOY INCLUYENDO jquery-chained.js Y jquery.js

LAS TABLAS MYSQL SON:


REGION(id, nombre, pais)

PLANTA (id, codigo, nombre,id_region)

DEPARTAMENTO(id,codigo,nombre)

depaxplanta( id_depa, id_planta) --->relacion entre departamento y planta

PERSONA(id, cedula,nombre,cargo)
  #2 (permalink)  
Antiguo 19/04/2014, 16:08
Avatar de rickyper  
Fecha de Ingreso: abril-2009
Mensajes: 182
Antigüedad: 15 años
Puntos: 10
Respuesta: Combos Dependientes 3 niveles php ajax mysql

Esto te puede ayuda es en 3 niveles:
http://www.martiniglesias.eu/blog/co...p-y-jquery/158
__________________
www.granideamillonaria.com
  #3 (permalink)  
Antiguo 20/04/2014, 04:30
Avatar de dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 927
Antigüedad: 17 años
Puntos: 270
Respuesta: Combos Dependientes 3 niveles php ajax mysql

Lo primero que tienes que pensar, es que si tienes 3 cosas que hacen lo mismo, hay que hacer 1 solo codigo que gestione todo, y no uno por cada select.
El problema a resolver es : cómo gestionar inputs que sólo pueden inicializarse si otro(s) input(s) ya tiene(n) valor(es).
Esto ya implica que los inputs necesitan 2 métodos, un constructor y una inicialización.
La clase base "jsInput" tendría los siguientes métodos

- construct(name, node)
- initialize()
- enable()
- disable()
- setValue()
- getValue()
La clase base llama a initialize en su constructor.

La clase "DependentInput" es un mixin que sobreescribe construct e initialize, y debe añadir métodos callback a los que llamar en caso de cambio de los inputs de los que depende:

-construct(name, node, depends)
-initialize()
-onChanged(dependency)

El constructor llama ahora a disable().Solo se llama a initialize cuando se le establece un valor
con setValue(), o cuando los onChanged de todos los depends() han sido llamados, y tienen valores no nulos.

Aparte, cualquier input que necesite una fuente de datos Ajax, deberia hacer mixin de una clase que dé esa funcionalidad. Si la clase se llama, por ejemplo, AjaxDataSource, tendriamos que, para hacer 3 inputs dependientes, necesitamos una clase AjaxSelect, que deriva de JsInput y hace mixin de AjaxDataSource, y una clase DependentAjaxSelect que deriva de AjaxSelect, y hace mixin de DependentInput.

El primer select es "libre" (no tiene dependencias).Es un AjaxSelect.Los otros dos son DependentAjaxSelect que reciben en su constructor el select correspondiente como dependencia.

Hay muchas librerias js que permiten construir cómodamente clases y mixins.

Esta es una forma "correcta" de hacerlo.

La otra es hacerlo con copy-paste, que es el código que tienes.
Devolver selects html como respuesta ajax , en vez de simplemente los datos, es otra mala señal.Mezclar html con queries, es otra pésima señal.Obtener el valor del select con this.value , es incorrecto....En fin..
  #4 (permalink)  
Antiguo 20/04/2014, 06:24
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 389
Antigüedad: 13 años, 1 mes
Puntos: 16
Respuesta: Combos Dependientes 3 niveles php ajax mysql

YO pensaria en hacer algo así:
JAVASCRIPT :
Código Javascript:
Ver original
  1. $( document ).ready(function(){
  2.    
  3.     $( this ).on('change','[data-hijos=true]',function(){
  4.         idPadre = $( this ).attr('id');
  5.         urlAccion = $("[data-padre="+idPadre+"]").data('accion')
  6.         data = "s-ajax=true&"+idPadre+"="+encodeURIComponent(this.value);
  7.                 new jd.ajax({
  8.                     metodo:"POST",
  9.                     url: urlAccion,
  10.                     parametros:data,
  11.                     respuesta:"html",
  12.                     funcionCarga:function(ajax){
  13.                         $("[data-padre="+idPadre+"]").html(this.respuesta);  
  14.                     }
  15.                 });
  16.        
  17.     });
  18. });

Teniendo en cuenta que el objeto jd.ajax es la simple llamada a ajax que la puedes realizar con tu propio objeto o con $.ajax $.post de jquery. alli lo relevante es que agregues a los campos que son padres el atributo "data-hijos=true" y a cada selector hijo el data-padre=idDelPadre. le agregas un data-accion q tenga como valor la url a la q haras la petición. y por ese lado está listo la parte d javascript. solo te quedaria realizar cada metodo que devuelva los <options> segun la consulta que hagas a base de datos.

Esa lógica es independiente de niveles, por tanto podria servirte para 1 como para 10 niveles de dependencia.
__________________
Lo imposible es lo posible visto por los ojos de un incapaz.
Si te sirve la respuesta. dale + al karma.
Saludos
  #5 (permalink)  
Antiguo 24/04/2014, 13:45
Avatar de elporfirio  
Fecha de Ingreso: octubre-2013
Mensajes: 37
Antigüedad: 10 años, 5 meses
Puntos: 4
Respuesta: Combos Dependientes 3 niveles php ajax mysql

hola yo hice un tutorial en esta liga:

http://elporfirio.com/wp/2013/10/como-hacer-un-combo-select-option-dinamico/

viene con video ;)
__________________
visita http://elporfirio.com o habrá tabla ¬¬
  #6 (permalink)  
Antiguo 25/04/2014, 08:06
Avatar de pierinamorajp  
Fecha de Ingreso: abril-2014
Mensajes: 4
Antigüedad: 10 años
Puntos: 0
Respuesta: Combos Dependientes 3 niveles php ajax mysql

Hola muchas Gracias por sus respuesta, estaré probando lo mas pronto posible y les avisare como me fue :)
  #7 (permalink)  
Antiguo 17/05/2014, 12:18
Avatar de pierinamorajp  
Fecha de Ingreso: abril-2014
Mensajes: 4
Antigüedad: 10 años
Puntos: 0
Pregunta Respuesta: Combos Dependientes 3 niveles php ajax mysql

Cita:
Iniciado por rjulio21 Ver Mensaje
YO pensaria en hacer algo así:
JAVASCRIPT :
Código Javascript:
Ver original
  1. $( document ).ready(function(){
  2.    
  3.     $( this ).on('change','[data-hijos=true]',function(){
  4.         idPadre = $( this ).attr('id');
  5.         urlAccion = $("[data-padre="+idPadre+"]").data('accion')
  6.         data = "s-ajax=true&"+idPadre+"="+encodeURIComponent(this.value);
  7.                 new jd.ajax({
  8.                     metodo:"POST",
  9.                     url: urlAccion,
  10.                     parametros:data,
  11.                     respuesta:"html",
  12.                     funcionCarga:function(ajax){
  13.                         $("[data-padre="+idPadre+"]").html(this.respuesta);  
  14.                     }
  15.                 });
  16.        
  17.     });
  18. });

Teniendo en cuenta que el objeto jd.ajax es la simple llamada a ajax que la puedes realizar con tu propio objeto o con $.ajax $.post de jquery. alli lo relevante es que agregues a los campos que son padres el atributo "data-hijos=true" y a cada selector hijo el data-padre=idDelPadre. le agregas un data-accion q tenga como valor la url a la q haras la petición. y por ese lado está listo la parte d javascript. solo te quedaria realizar cada metodo que devuelva los <options> segun la consulta que hagas a base de datos.

Esa lógica es independiente de niveles, por tanto podria servirte para 1 como para 10 niveles de dependencia.

Hola, rjulio21, disculpa, seguí tu consejo pero estoy algo confundida, estas son las modificaciones que le hice al código y señalare donde no entiendo:

<script type="text/javascript">
$(document).ready(function(){

$( this ).on('change','[data-hijos=true]',function(){
idregion = $( this ).attr('region');
urlAccion = $("[data-padre="+idregion+"]").data('buscaplanta.php')
data = "s-ajax=true&"+idregion+"="+encodeURIComponent(this.v alue);
new $.post({
metodo:"POST",
url: buscaplanta.php,
parametros:data,
respuesta:"html",
funcionCarga:function(post){
$("[data-padre="+idregion+"]").html(this.respuesta);
}
});

});
});
</script>

MIS DUDAS SON LAS SIGUIENTES:

*No se si este bien hacer el llamado "$.post"
*No se que debo colocar en la linea de funcionCarga donde puse "(post)"
*No entiendo porque cosa debo sustituir "respuesta" en la ultima linea.

Ademas... No se si deba repetir el codigo javascript cuantas veces select hijos tenga...

En vista de todas las confusiones, Agradeceria enormemente su ayuda :) ya que espero resolver esto cuanto antes.Muchas Gracias de antemano.

Ah! este es el form html:


<form action="#" method="POST" class="form-horizontal">
<h3>A Qui&eacute;n desea enviar?</h3>
<label for="region">Pa&iacute;s/Estado </label>
<?php
$region= mysql_query("SELECT id, nombre,pais FROM region order by pais");
?>
<select name="region" id="region" class="form-control" data-hijos="true">
<option>Seleccione</option>
<?php
while ($fila = mysql_fetch_array($region)){?>
<option value="<?php echo $fila['id'];?>"><?php echo $fila['pais'].' / '.$fila['nombre'];?></option>
<?php }?>
</select>
<h4>Planta:</h4>
<select class="form-control" name="planta" data-padre="<?php echo $fila['id'];?>" data-accion="buscaplanta.php"></select>
<h4>Departamento:</h4>
<select class="form-control" name="depa" data-padre="idPadre" data-accion="buscadepa.php"></select>
<h4>Tipo de Cargo:</h4>
<select class="form-control" name="cargo" data-padre="idPadre" data-accion="buscacargo.php"></select>
</form>
  #8 (permalink)  
Antiguo 19/05/2014, 15:22
Avatar de ginitofl  
Fecha de Ingreso: diciembre-2006
Ubicación: Lima Perú
Mensajes: 349
Antigüedad: 17 años, 4 meses
Puntos: 22
Respuesta: Combos Dependientes 3 niveles php ajax mysql

aqui tienes una alternativa para hacer combos (select) dependientes, para ello use jquery, espero sea de tu ayuda.

primero hacemos nuestra clase:

bd.php
Código PHP:
<?php
    
class BD{
        var 
$cn;
        function 
__construct($servidor="localhost"$usuario="root"$clave="juver"$base="test"){
            
$this->cn mysql_connect($servidor$usuario$clave);
            
mysql_select_db($base$this->cn);
            
ini_set('display_errors','On');
        }
        
        function 
consulta($sql){
            
$res mysql_query($sql$this->cn) or die("Error <b><br>".mysql_error()."</b><br>$sql");
            if(!
$res){
                die(
"query error."); 
            }else{ 
                return 
$res;
            }
        }
        function 
fetch_assoc($resultado){
            return 
mysql_fetch_assoc($resultado);
        }
        
    }
?>
Luego el Index.php
Código PHP:
<?php
include ("bd/bd.php");
$obj_bd = new BD();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select dependientes</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function cargarcombos(combo, url){
    $(combo).html("<option selected>Cargando...</option>");
    var php  = url;
    $.post(php,function(respuesta){
        $(combo).html(respuesta);
    });
}
</script>
</head>
<body>
<select name="region" id="region" onchange="cargarcombos('#plantas', 'combos.php?id_region=' + this.value + '&modo=plantas')">
    <option value="">Seleccione Region</option>
    <?php
    $sql 
$obj_bd->consulta("SELECT id, nombre, pais FROM region order by pais, nombre");
    while(
$fila=$obj_bd->fetch_assoc($sql)){?>
        <option value="<?php echo $fila['id'];?>"><?php echo $fila['pais'].' / '.$fila['nombre'];?></option> 
    <?php }?>
</select>
<select name="plantas" id="plantas" onchange="cargarcombos('#depas', 'combos.php?id_planta=' + this.value + '&modo=depas')">
    <option value="">Seleccione Planta</option>
</select> 
<select name="depas" id="depas" onchange="cargarcombos('#cargos', 'combos.php?id_depa=' + this.value + '&modo=cargos')">
    <option value="">Seleccione Departamento</option>
</select>
<select name="cargos" id="cargos">
    <option value="">Seleccione Cargo</option>
</select>   
</body>
</html>
y por ultimo nuestro archivo combos.php
Código PHP:
<?php
include("bd/bd.php");
$obj_bd = new BD();
$modo $_REQUEST['modo'];

if (
$modo=="plantas"){
    
$id_region $_REQUEST['id_region'];
    echo 
'<option value="">Seleccione Planta</option>';
    
$sql $obj_bd->consulta("SELECT id, codigo, nombre FROM planta WHERE id_region='$id_region'");
    while(
$fila=$obj_bd->fetch_assoc($sql)){
        echo 
'<option value="'.$fila['id'].'">'.$fila['nombre'].'</option>'
    }
}elseif (
$modo=="depas"){
    
$id_planta $_REQUEST['id_planta'];
    echo 
'<option value="">Seleccione Departamento</option>';
    
$sql $obj_bd->consulta("SELECT id, codigo, nombre FROM departamento WHERE id_planta='$id_planta'");
    while(
$fila=$obj_bd->fetch_assoc($sql)){
        echo 
'<option value="'.$fila['id'].'">'.$fila['nombre'].'</option>'
    }
}
?>
Saludos.
  #9 (permalink)  
Antiguo 19/05/2014, 15:39
Avatar de ginitofl  
Fecha de Ingreso: diciembre-2006
Ubicación: Lima Perú
Mensajes: 349
Antigüedad: 17 años, 4 meses
Puntos: 22
Respuesta: Combos Dependientes 3 niveles php ajax mysql

Otra cosa Pierina viendo tu codigo:

Código PHP:
<div id="plantas">
<
label>Planta </label>
<
select id='plantas' class="form-control">
<
option value="0">Seleccione</option>
</
select
colocas el mismo id "plantas" al div como a tu select y asi repites en depas y cargos lo cual esta muy mal por que un id dentro de una pagina debe ser único.

Saludos.
  #10 (permalink)  
Antiguo 20/05/2014, 06:23
Avatar de alexisverano  
Fecha de Ingreso: septiembre-2008
Ubicación: La Habana.Cuba
Mensajes: 298
Antigüedad: 15 años, 6 meses
Puntos: 36
Respuesta: Combos Dependientes 3 niveles php ajax mysql

Aqui deje el ejemplo completo de como hacer combos dependientes con 3 niveles.
Espero te pueda ayudar.

http://www.forosdelweb.com/f18/aport...veles-1090358/
  #11 (permalink)  
Antiguo 23/05/2014, 14:49
Avatar de pierinamorajp  
Fecha de Ingreso: abril-2014
Mensajes: 4
Antigüedad: 10 años
Puntos: 0
Respuesta: Combos Dependientes 3 niveles php ajax mysql

Hola! muchas gracias por la respuesta, no he podido sentarme a probar pero en cuanto lo haga les comento.

Etiquetas: ajax-php, combos, mysql, select
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

SíEste tema le ha gustado a 1 personas




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