Foros del Web » Programando para Internet » Javascript »

capturar valor de un <div> ajax

Estas en el tema de capturar valor de un <div> ajax en el foro de Javascript en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 24/11/2015, 07:24
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Exclamación capturar valor de un <div> ajax

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.
  #2 (permalink)  
Antiguo 24/11/2015, 09:14
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

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
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 24/11/2015, 09:27
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Cita:
Iniciado por Alexis88 Ver Mensaje
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.
  #4 (permalink)  
Antiguo 24/11/2015, 13:35
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

Lo anterior te lo comenté por esto:

Cita:
Iniciado por rprado2008 Ver Mensaje
[...] 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 original
  1. document.querySelector("#id del div").addEventListener("change", function(event){
  2.     alert(event.target.value); //El valor seleccionado del <select>
  3. }, false);

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 26/11/2015 a las 16:06 Razón: Faltó tomar al valor
  #5 (permalink)  
Antiguo 25/11/2015, 06:19
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Cita:
Iniciado por Alexis88 Ver Mensaje
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 original
  1. document.querySelector("#id del div").addEventListener("change", function(event){
  2.     alert(event.target); //El valor seleccionado del <select>
  3. }, 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.
  #6 (permalink)  
Antiguo 25/11/2015, 11:28
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

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 original
  1. alert(document.querySelector("#myDiv").innerHTML);

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #7 (permalink)  
Antiguo 25/11/2015, 12:31
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Cita:
Iniciado por Alexis88 Ver Mensaje
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 original
  1. alert(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
  #8 (permalink)  
Antiguo 25/11/2015, 12:55
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

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
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #9 (permalink)  
Antiguo 26/11/2015, 07:17
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Cita:
Iniciado por Alexis88 Ver Mensaje
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?
  #10 (permalink)  
Antiguo 26/11/2015, 09:18
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

Muéstranos lo que has intentado para poder ayudarte. Y, por favor, usa el highlight respectivo para mostrar el código.
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #11 (permalink)  
Antiguo 26/11/2015, 13:58
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Cita:
Iniciado por Alexis88 Ver Mensaje
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.

Última edición por rprado2008; 26/11/2015 a las 14:11 Razón: cambios
  #12 (permalink)  
Antiguo 26/11/2015, 16:05
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

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 original
  1. document.querySelector("#id del frame principal").addEventListener("change", function(event){
  2.     document.querySelector("#id del otro frame").innerHTML = event.target.value;
  3. }, false);

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

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #13 (permalink)  
Antiguo 27/11/2015, 06:47
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Cita:
Iniciado por Alexis88 Ver Mensaje
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 original
  1. document.querySelector("#id del frame principal").addEventListener("change", function(event){
  2.     document.querySelector("#id del otro frame").innerHTML = event.target.value;
  3. }, 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
  1. <html>
  2. <head>
  3. <title>prueba</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. </head>
  6. <frameset rows="*" cols="220,790*" framespacing="2" frameborder="yes" border="3" bordercolor="#000000" >
  7. <?php
  8.    echo  '<frame src="index2.php" >';
  9.    
  10.    echo  '<frame src="index3.php"';
  11.  ?>
  12.  
  13. </frameset>
  14. </body>
  15. </html>
  #14 (permalink)  
Antiguo 27/11/2015, 06:54
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

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
  #15 (permalink)  
Antiguo 27/11/2015, 06:55
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

--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)
  #16 (permalink)  
Antiguo 27/11/2015, 06:59
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

voy a colocarlo por partes:
Código PHP:
Ver original
  1. <?php
  2. include "conexion.php";
  3. //esta es mi conexion a la bd, funciona sin problemas
  4. ?>
  5. <html>
  6. <head>
  7. <script src="ajax.js">
  8. //este script es uno como los que hay en internet, está funcional
  9. </script>
  10. <script>
  11. function myFunction(str)
  12. {
  13. loadDoc("q="+str,"proc.php",function()
  14.   {
  15.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  16.     {
  17.     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  18.     }
  19.   });
  20. }
  21. function myFunction2(str)
  22. {
  23. loadDoc("r="+str,"proc22.php",function()
  24.   {
  25.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  26.     {
  27.     document.getElementById("myDiv2").innerHTML=xmlhttp.responseText;
  28.     }
  29.   });
  30. }
  31. </script>
  32. </head>
  33. <body>
  34. <h2>- PRUEBA - </h2>

// aqui debe venir la siguiente parte
  #17 (permalink)  
Antiguo 27/11/2015, 07:00
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Código PHP:
Ver original
  1. //inicia la segunda parte del mismo archivo
  2. <?php
  3. $con=conexion();
  4. $res=mssql_query(" //esta es mi consulta sql, funciona sin problemas ",$con);
  5. ?>
  6. <select id="cont" onChange="myFunction(this.value)">
  7. <option value="">Seleccione</option>
  8. //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
  9. <?php
  10.     while($row=mssql_fetch_array($res)){           
  11.             echo "<option value= '"> //toda esta parte está funcional, las opciones se muestran correctamente // </option>";
  12.                             }
  13.                 mssql_free_result($res);
  14.                 mssql_close($connectID);                       
  15.                 ?></select>
  16. <div id="myDiv"></div><!--div donde aparecen las opciones principales, se muestra correctamente-->
  17. <p>Ubicacion :</p>
  18. <div id="myDiv2"></div><!--div donde aparecen las opciones auxiliares que corresponden a los item principales, esta parte funciona sin problemas-->
  19. </body>
  20. </html>
  #18 (permalink)  
Antiguo 27/11/2015, 07:01
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

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

Código Javascript:
Ver original
  1. var xmlhttp;
  2. function loadDoc(string,url,cfunc)
  3. {
  4. if (window.XMLHttpRequest)
  5.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  6.   xmlhttp=new XMLHttpRequest();
  7.   }
  8. else
  9.   {// code for IE6, IE5
  10.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  11.   }
  12. xmlhttp.onreadystatechange=cfunc;
  13. xmlhttp.open("POST",url,true);
  14. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  15. xmlhttp.send(string);
  16. }
  #19 (permalink)  
Antiguo 27/11/2015, 07:03
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

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

Código PHP:
Ver original
  1. <?php
  2. include "conexion.php";
  3. $q=$_POST['q'];
  4. $con=conexion();
  5. $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);
  6.  
  7. ?>
  8.  
  9. <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-->
  10.  
  11. <option value="">Seleccione</option>
  12. <?php while($row=mssql_fetch_array($res)){ ?>
  13.  <option value="--bla bla bla -- // toda esta parte funciona sin problemas"></option>
  14. <?php } ?>
  15.  
  16. </select>
  17.  
  18. // todo lo anterior funciona sin inconvenientes
  #20 (permalink)  
Antiguo 27/11/2015, 07:04
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

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

Código PHP:
Ver original
  1. <?php echo $r=$_POST['r'] ?>">
  2.  
  3. //no necesito agregarle mas funciones, solo mostrar el valor del segundo menu que se ha escogido

--pagina index3.php
Código PHP:
Ver original
  1. <html>
  2. <body>
  3.  
  4. <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
  #21 (permalink)  
Antiguo 27/11/2015, 13:51
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

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
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #22 (permalink)  
Antiguo 27/11/2015, 13:53
 
Fecha de Ingreso: septiembre-2015
Mensajes: 39
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: capturar valor de un <div> ajax

Cita:
Iniciado por Alexis88 Ver Mensaje
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
  #23 (permalink)  
Antiguo 27/11/2015, 14:20
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: capturar valor de un <div> ajax

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
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Etiquetas: ajax, php+ajax
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 10:53.