capturar valor de un <div> ajax

rprado2008 · #1 (**permalink**) 24/11/2015, 08:24

Comunidad, buenos dias.
Tengo una inquietud sobre como capturar el valor de un <div>, resulta que tengo una lista <select> que muestra en el <div> varias opciones, si de esa lista escojo algun item, automaticamente el <div> muestra una sublista dependiente, de la cual puedo seleccionar cualquier item respectivo.

Todo eso funciona entre php y ajax sin problema, la cuestion es que necesito capturar el valor seleccionado en el <div> y pasarlo a una variable php para una consulta en sql.

He tomado el ejemplo funcional de la página:

https://coudlain.wordpress.com/2013/05/20/cargar-un-select-o-lista-desplegable-desde-otro-select-php-ajax-mysql-by-codigojerry-blogspot-com/

Pero allí me falta el paso de que al elegir el valor desplegado en el <div>, ese valor lo pueda capturar en una variabla php para efectuar una consulta.

Comunidad, agradezco su orientación.

Alexis88 · #2 (**permalink**) 24/11/2015, 10:14

PHP se ejecuta antes que JavaScript, además, uno trabaja en el lado del servidor y el otro en el del cliente. Lo mejor será que vuelvas a utilizar AJAX para realizar la asignación del valor del nuevo <select>.

Un saludo

rprado2008 · #3 (**permalink**) 24/11/2015, 10:27

Cita:

Iniciado por Alexis88

PHP se ejecuta antes que JavaScript, además, uno trabaja en el lado del servidor y el otro en el del cliente. Lo mejor será que vuelvas a utilizar AJAX para realizar la asignación del valor del nuevo <select>.

Un saludo

Gracias Alexis88 por responder, si te fijaste en el link que dejé y desde el cual estoy tomando el ejemplo, lo que necesito es poder "capturar" el valor cambiante del <div> el cual se llena con una consulta de sql, de esta manera si escojo alguna de sus opciones, quisiera que esa opcion elegida se mostrara en algun <input>. Estoy intentandolo con javascript.

Alexis88 · #4 (**permalink**) 24/11/2015, 14:35

Lo anterior te lo comenté por esto:

Cita:

Iniciado por rprado2008

[...] ese valor lo pueda capturar en una variabla php para efectuar una consulta [...]

Te sugiero delegar el evento change al <div> que contiene al <select>, de esta forma, solo tendrías que capturar al elemento en el cual se produjo el evento mediante la propiedad event.target.

Código Javascript:

Ver originaldocument.querySelector("#id del div").addEventListener("change", function(event){
    alert(event.target.value); //El valor seleccionado del <select>
}, false);

Un saludo

rprado2008 · #5 (**permalink**) 25/11/2015, 07:19

Cita:

Iniciado por Alexis88

Lo anterior te lo comenté por esto:

Te sugiero delegar el evento [URL="[inline]event.target[/inline]"][inline]change[/inline][/URL] al <div> que contiene al <select>, de esta forma, solo tendrías que capturar al elemento en el cual se produjo el evento mediante la propiedad [URL="https://developer.mozilla.org/es/docs/Web/API/Event/target"][inline]event.target[/inline][/URL].

Código Javascript:

Ver originaldocument.querySelector("#id del div").addEventListener("change", function(event){
    alert(event.target); //El valor seleccionado del <select>
}, false);

Un saludo

Alexis88, gracias por tu respuesta, voy a indicarte como tengo estructurado el programa:

---index.php---
<script src="ajax.php"></script>
Luego en el <body> tengo una etiqueta <select id="cont" onchange"load(this.value)">
<option>Seleccione</option>
Esta instruccion me trae una lista desplegable desde donde puedo escoger una serie de items, al escoger cualquiera de ellos me muestra los sub-items dependientes de cualquiera que escogí en esta lista en este tag :

<div id="myDiv"></div>
En ese div, me muestra los sub-items que pertenecen a cualquiera de las opciones elegidas en la primera lista

---ajax.js---
Este tiene la funcion load(str)
Tiene además los parámetros para validar si el navegador es versión anterior de ie5, 6 y culmina con estas sentencias:

xmlhttp.open("POST", "proc.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+str);

---proc.php---
Este tiene :
<?php
$q = $_POST['q'];

//--aqui hago la consulta sql donde tomo la variable $q para que me indique la opción que he tomado en el primer tag <select></select>

?>

Todo lo anterior funciona sin inconvenientes, pero necesito determinar qué valor se ha seleccionado en la lista que muestra la etiqueta de mi index.php en el tag <div id=myDiv></div> ya que es allí de esos ítems mostrados que necesito saber que valor estoy seleccionando y poder pasarlo a una variable en javascript para una consulta sql final y mostrar los campos de la tabla a la cual hace referencia esa escogencia.

Agradezco tu asesoría al respecto.

Alexis88 · #6 (**permalink**) 25/11/2015, 12:28

Creí que lo que querías capturar era el valor de un <select> contenido en el <div id="myDiv">, pero si el valor carga directamente en el <div id="myDiv"> como texto, puedes tomarlo a partir de la propiedad innerHTML.

Código Javascript:

Ver originalalert(document.querySelector("#myDiv").innerHTML);

Un saludo

rprado2008 · #7 (**permalink**) 25/11/2015, 13:31

Cita:

Iniciado por Alexis88

Creí que lo que querías capturar era el valor de un <select> contenido en el <div id="myDiv">, pero si el valor carga directamente en el <div id="myDiv"> como texto, puedes tomarlo a partir de la propiedad [URL="https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML"][inline]innerHTML[/inline][/URL].

Código Javascript:

Ver originalalert(document.querySelector("#myDiv").innerHTML);

Un saludo

Mil gracias Alexis88, tu asesoría me ha servido a este desarrollo.
Quisiera saber como pasar ese valor capturado, en vez de un alert(); enviarlo hacia una página php distinta a la index.php que tengo, sin usar <form></form> es posible ? Cómo se haría?

Mil y mil gracias

Alexis88 · #8 (**permalink**) 25/11/2015, 13:55

Si lo vas a hacer mediante AJAX, solo tienes que enviar el valor mediante el método .send(), pero si quieres enviarlo de forma síncrona, solo asígnalo a un elemento del formulario, por ejemplo, un elemento oculto.

Un saludo

rprado2008 · #9 (**permalink**) 26/11/2015, 08:17

Cita:

Iniciado por Alexis88

Si lo vas a hacer mediante AJAX, solo tienes que enviar el valor mediante el método .send(), pero si quieres enviarlo de forma síncrona, solo asígnalo a un elemento del formulario, por ejemplo, un elemento oculto.

Un saludo

Alexis88, gracias por tu recomendación, sinembargo no he conseguido llevar ese valor del <div id="myDiv"> hasta otra página, lo puedo visualizar de forma dinámica en la misma página index.php, pero no sé como recargar ese valor (cuantas veces cambie) en la segunda pagina. Me podrías ayudar?

Alexis88 · #10 (**permalink**) 26/11/2015, 10:18

Muéstranos lo que has intentado para poder ayudarte. Y, por favor, usa el highlight respectivo para mostrar el código.

rprado2008 · #11 (**permalink**) 26/11/2015, 14:58

Cita:

Iniciado por Alexis88

Muéstranos lo que has intentado para poder ayudarte. Y, por favor, usa el highlight respectivo para mostrar el código.

Alexis88, lo que pretendo hacer es esto:

index.php tiene dos frames, el nombre de los frames es; frameizq que tiene la pagina frameizq.php; y el frameder que contiene la pagina frameder.php.

En la pagina frameizq.php tengo funcionando sin problemas las llamadas a ajax y a javascript, he tomado los ejemplos disponibles en la web para usar ajax y javascript como se describe en:

http://codigojerry.blogspot.com.es/2012/11/cargar-un-select-desde-otro-select-php.html

Todo lo anterior está funcional, sinembargo para efectos del proyecto de mis dos frames (sé que no debo usar frames, pero el proyecto así lo demanda), se necesita que el valor que he recopilado en una variable $q (que se muestra correctamente, y que cambia su valor de forma dinamica al escoger alguna opción de mis menús de ajax); esa variable se muestre también de forma dinámica en un tag <div> tan pronto cambie en el frameizq.php sin recargar la pagina frameder.php

Agradezco tu ayuda.

Alexis88 · #12 (**permalink**) 26/11/2015, 17:05

Cuando se seleccione un valor del <select> cargado dinámicamente, tómalo como te lo expliqué más arriba y asígnalo como contenido del otro contenedor.

Código Javascript:

Ver originaldocument.querySelector("#id del frame principal").addEventListener("change", function(event){
    document.querySelector("#id del otro frame").innerHTML = event.target.value;
}, false);

Si no es lo que buscas, te sugiero explicarlo junto con el código que tienes hecho para así despejar dudas.

Un saludo

rprado2008 · #13 (**permalink**) 27/11/2015, 07:47

Cita:

Iniciado por Alexis88

Cuando se seleccione un valor del <select> cargado dinámicamente, tómalo como te lo expliqué más arriba y asígnalo como contenido del otro contenedor.

Código Javascript:

Ver originaldocument.querySelector("#id del frame principal").addEventListener("change", function(event){
    document.querySelector("#id del otro frame").innerHTML = event.target.value;
}, false);

Si no es lo que buscas, te sugiero explicarlo junto con el código que tienes hecho para así despejar dudas.

Un saludo

Alexis88, voy a copiar aquí los archivos que estoy trabajando:

--archivo index.php, el cual contiene dos frames--

Código PHP:

Ver original<html>
<head>
<title>prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="*" cols="220,790*" framespacing="2" frameborder="yes" border="3" bordercolor="#000000" >
<?php
   echo  '<frame src="index2.php" >'; 
   
   echo  '<frame src="index3.php"'; 
 ?>
 
</frameset>
</body>
</html>

rprado2008 · #14 (**permalink**) 27/11/2015, 07:54

Es curioso, no me está dejando enviar el resto de los códigos, me pide un captcha de números pero nunca se va el mensaje

rprado2008 · #15 (**permalink**) 27/11/2015, 07:55

--archivo index2.php , en el cual tengo las funciones javascript, aquí se despliegan dos menús en cascada, el primero hace una consulta sql para cargar las opciones principales, de tal manera que al escoger uno, el segundo menú se actualiza con una consulta sql. Aquí es donde quisiera que al escoger alguna de sus opciones, esa opción elegida se muestre con javascript en el frame del lado derecho, y se actualice dinamicamente sin recargar la página index3.php, cada vez que escoja una opción del segundo menú ubicado en el frameizq (index2.php)

rprado2008 · #16 (**permalink**) 27/11/2015, 07:59

voy a colocarlo por partes:

Código PHP:

Ver original<?php
include "conexion.php";
//esta es mi conexion a la bd, funciona sin problemas
?>
<html>
<head>
<script src="ajax.js">
//este script es uno como los que hay en internet, está funcional
</script>
<script>
function myFunction(str)
{
loadDoc("q="+str,"proc.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
function myFunction2(str)
{
loadDoc("r="+str,"proc22.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv2").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>
<h2>- PRUEBA - </h2>

// aqui debe venir la siguiente parte

rprado2008 · #17 (**permalink**) 27/11/2015, 08:00

Código PHP:

Ver original//inicia la segunda parte del mismo archivo
<?php
$con=conexion();
$res=mssql_query(" //esta es mi consulta sql, funciona sin problemas ",$con);
?>
<select id="cont" onChange="myFunction(this.value)">
<option value="">Seleccione</option>
//este es el primer menu, el cual tiene las opciones principales, al elegir cualquiera de esas opciones, se efectúa una segunda consulta para traer las opciones auxiliares que corresponden a a cada item , esto está también funcionando sin problemas
<?php
    while($row=mssql_fetch_array($res)){            
            echo "<option value= '"> //toda esta parte está funcional, las opciones se muestran correctamente // </option>";
                            }
                mssql_free_result($res);
                mssql_close($connectID);                        
                ?></select>
<div id="myDiv"></div><!--div donde aparecen las opciones principales, se muestra correctamente-->
<p>Ubicacion :</p>
<div id="myDiv2"></div><!--div donde aparecen las opciones auxiliares que corresponden a los item principales, esta parte funciona sin problemas-->
</body>
</html>

rprado2008 · #18 (**permalink**) 27/11/2015, 08:01

--archivo ajax.js , este archivo es uno de muchos que se consiguen por aquí en los tutoriales, funciona sin problemas

Código Javascript:

Ver originalvar xmlhttp;
function loadDoc(string,url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(string);
}

rprado2008 · #19 (**permalink**) 27/11/2015, 08:03

--archivo proc.php, este archivo procesa el primer menu desplegable

Código PHP:

Ver original<?php
include "conexion.php";
$q=$_POST['q'];
$con=conexion();
$res=mssql_query(" // en esta sentencia sql, busco con apoyo de la variable .$q. , que opción estoy buscando de las principales, funciona sin problemas",$con);
 
?>
 
<select id="pais" onchange="myFunction2(this.value)"><!--cuando seleccionan una de las opciones principales se ejecuta la funcion myFunction2() ubicada en el archivo index2.php-->
 
<option value="">Seleccione</option>
<?php while($row=mssql_fetch_array($res)){ ?>
 <option value="--bla bla bla -- // toda esta parte funciona sin problemas"></option>
<?php } ?>
 
</select>
 
// todo lo anterior funciona sin inconvenientes

rprado2008 · #20 (**permalink**) 27/11/2015, 08:04

--proc22.php aquí proceso las opciones del segundo menú, todo esta funcionando sin inconvenientes

Código PHP:

Ver original<?php echo $r=$_POST['r'] ?>">
 
//no necesito agregarle mas funciones, solo mostrar el valor del segundo menu que se ha escogido

--pagina index3.php

Código PHP:

Ver original<html>
<body>
 
<div id = "myDiv3"></div>

esta página solo tiene ese tag <div id="myDiv3></div>", está en blanco porque aquí quiero recibir de forma dinámica el valor del último tag <div id="myDiv2">, el cual lo estoy visualizando por la variable $r.
Es aquí en esta página index3.php que requiero que se actualice ese <div> o se muestre la variable $r de forma dinámica cada vez que haya un cambio en la variable $r o en el <div id="myDiv2>".

No sé cómo implementar eso en esta página.

Quedo atento

Alexis88 · #21 (**permalink**) 27/11/2015, 14:51

Solo necesitas realizar una petición asíncrona (AJAX) más a partir del resultado previo, así lograrás enviar el dato a "index3.php" y mostrarlo.

Un saludo

rprado2008 · #22 (**permalink**) 27/11/2015, 14:53

Cita:

Iniciado por Alexis88

Solo necesitas realizar una petición asíncrona (AJAX) más a partir del resultado previo, así lograrás enviar el dato a "index3.php" y mostrarlo.

Un saludo

Alexis88, me podrías indicar la forma de poder efectuar esta nueva petición y que se muestre en el index3.php ? Gracias

Alexis88 · #23 (**permalink**) 27/11/2015, 15:20

Solo necesitas utilizar la función de tu archivo "ajax.js", envías el dato recogido del <select> e indicas el nombre del archivo, que en este caso es "index3.php". Una vez que se complete la petición, muestras la respuesta de "index3.php" en el frame que corresponda.

Un saludo