¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey

Iniciado por Lupin, 26 Mayo 2011, 03:01 AM

0 Miembros y 2 Visitantes están viendo este tema.

Lupin

Hola
Tengo varios divs que genero por php y cada uno me arroja un id especifico
¿como puedo recuperar el valor de esa id por javascript?
Quiero recuperar para poder enviarlo por url a otra pagina
:-[ :-[
<script src="includes/jquery.js" type="text/javascript"></script>
       
<script type="text/javascript">
            $(document).ready(function (){
                //Aqui asignamos el click al elemento <a>
                $(".delete").click(function (){

var click_element= this;
alert(click_element.nodeName); // QUIERO OBTENER
AQUI EL "id_pagina" DEL DIV  PERO SOLO ME ARROJA EL TIPO DE ELEMENTO!!!!
                });
            });
</script>


    <DIV class="art">
    <A href="<?php print 'empleados.php?hist='.$row["id_pagina"].'#ancla'?>"></A>
    <div class="delete" align="center"><b>DELETE</b></div>
   </DIV>
   
   
       <DIV class="art">
    <A href="<?php print 'empleados.php?hist='.$row["id_pagina"].'#ancla'?>"></A>
    <div class="delete" align="center"><b>DELETE</b></div>
   </DIV>
   
   
       <DIV class="art">
    <A href="<?php print 'empleados.php?hist='.$row["id_pagina"].'#ancla'?>"></A>
    <div class="delete" align="center"><b>DELETE</b></div>
   </DIV>
   .
   .
   .

Con este codigo solo logro recuperar el typo de elemento pero a mi me interesa el  $row["id_pagina"] que contiene un determinado Div al hacer click

bomba1990

si quieres obtener el valor de el atributo href solo tienes que hacer $(this).attr('href'), si quieres extraer el id tienes que hacer un de la url, puede usar esto var id= ruta.substring(ruta.lastIndexOf("="),ruta.length); es decir te quedaria asi:

Código (javascript) [Seleccionar]

$(".delete").click(function (){
var id_pagina = $(this).attr('href);
var id = id.substring(id.lastIndexOf("="),id.length);
});


No lo e probado pero te debe funcionar
"Cuando le di de comer a los pobres me llamaron santo, pero cuando pregunte porque los pobres eran pobres me dijeron comunista"

http://sosinformatico.blogspot.com/
http://www.publisnet.com.ve

Shell Root

Yo tengo esta pequeña función para obtener un parámetro GET.
Código (javascript) [Seleccionar]
function buscarParametroGET( parametros ){
  var expReg    = "[\\?&]"+parametros+"=([^&#]*)";
  var regEx     = new RegExp ( expReg );
  var uRL       = window.location.href;
  var resultado = regEx.exec( uRL );
  if( resultado == null ){
    return "";
  }else{
    return resultado[1];
  }
}
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

RedZer

Nacido y criado entre gente que enseño a pensar antes de creer a ciegas, Todo me causa curiosidad en el mundo

Lupin

Gracias por responder muchachos ,ahora he entendido como hacerlo pero no me funka el codigo lo he arreglado asi  (utilizando los codigos de bomba1990  y modificando la funcion de Shell Root ) :

Quiero recuperar "href" del los div "art" y luego mediante la funcion buscarparametrosGET recuperar un determinado "id_pagina" segun el div donde el usuario haga click y alli mandarlo por URL a la misma pagina pero enviando el metodo GET el "id_pagina" que recupere...
La verdad recien esoy empezando en PHP y no he prestado mucha importancia a javascript pero veo que hay casos en el cual hay que manejar los dos..
Aqui esta mi codigo que no funciona ante los clicks que le mando   :( :(


mipagina.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
            $(document).ready(function (){
                //Aqui asignamos el click al elemento <a>
              $(".delete").click(function (){

var id_pagina = $(".art").attr['href'];
location.href="mipagina.php?id="
  + buscarParametroGET( 'id_pagina' , id_pagina) ;
})
 
   });

function buscarParametroGET( parametros , url)
{
var expReg    = "[\\?&]"+parametros+"=([^&#38;#]*)";
var regEx     = new RegExp ( expReg );
var resultado = regEx.exec( url );
if( resultado == null ){
   return "";
}else{
   return resultado[1];
}
}



</script>


<style type="text/css">
<!--
.delete {
height: 300px;
width: 300px;
background-color: #0C0;
}
.art {
background-color: #0f0;
}

-->
</style>
</head>

<body>



<DIV class="art"><A
href="xxx.php?cap=1&id_pagina=78#ancla">
<img alt="" src="images/001.jpg"
border=0><br>
                  </A>
    <div class="delete" align="center"><b>DELETE</b></div>
</DIV>
 
   <br>
   
   
  <DIV class="art"><A
href="xxx.php?cap=1&id_pagina=79#ancla">
<img alt="" src="images/001.jpg"
border=0><br>
                  </A>
    <div class="delete" align="center"><b>DELETE</b></div>
</DIV>

   
 
</body>
</html>


Shell Root

Pero no entiendo muy bien, a ver. Supongamos que tenemos la siguiente estructura.

Código (html4strict) [Seleccionar]
<div id = "contenedor">
 <a href = "index.php?token=23fb81d50f1eaf9de847a56a00">
   <img src = "IMG/imgPoC.jpg" >
 </a>
 <div id = "delete">DELETE</div>
</div>


Entonces, lo que quieres es tener el LINK del a href si hace click en la capa DELETE? Quizás te sirva esto,
Código (html4strict) [Seleccionar]
<html>
  <head>
    <title>PoC</title>
    <script type = "text/javascript" src = "JQuery.js"></script>
  </head>
  <body>

  <div class = "art">
      <a id = "link" href = "hola">
        <img alt = "" src = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/186520_100001061925688_4930346_q.jpg" border = 0>
      </a>
    <div class = "delete" align = "center"><b>DELETE</b></div>
  </div>

  <script language="javascript">
    $("div.art > div.delete").click( function() {
      var sHREF = $("#link").attr("href");
      alert(sHREF);
    });
  </script>

  </body>
</html>
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

Lupin


<html>
<head>
<title>PoC</title>

    <script type="text/javascript" src="Saya Willka/includes/jquery.js"></script>

</head>
<body>

  <div class = "art">
      <a id = "link" href = "borrar.php?id_pagina=34">
        <img alt = "" src ="oficina.gif" border = 0>
      </a>
    <div class = "delete" align = "center"><b>DELETE</b></div>
  </div>

  <script language="javascript">
    $("div.art > div.delete").click( function() {
      var sHREF = $("#link").attr("href");
      alert( "HOLA "+ sHREF);
  alert(buscarParametroGET("id_pagina" , "borrar.php?id_pagina=54"));// SI FUNCIONA !!!!
  alert(buscarParametroGET("id_pagina" , sHREF)); // NO FUNCIONA !!!
 
location.href="destino.php?capt=" + buscarParametroGET("id_pagina" , sHREF);
   
function buscarParametroGET( parametros , url)
{
var expReg    = "[\\?&]"+parametros+"=([^&#38;#]*)";
var regEx     = new RegExp ( expReg );
var resultado = regEx.exec( url );
if( resultado == null ){
   return "";
}else{
   return resultado[1];
}
}
    });

</script>

</body>
</html>



Lupin

Gracias Shell Root
Tus codigos han sido geniales  me han sido de mucha ayuda,  veo que intentar programar una web y pretender querer hacerlo SOLO en php puede llegar a ser muy limitante !!!, bueno por lo menos para mi si.
Pero tengo una duda que no me explico :
1 .Porque el script de codigo de JQuery se coloca casi finalizando el Body, la verdad yo lo cambie de ubicacion encima de los divs y no me funciono.
2. Mi otra pregunta seria porque no funciona esto

alert(buscarParametroGET("id_pagina" , "borrar.php?id_pagina=54"));// SI FUNCIONA !!!!
  alert(buscarParametroGET("id_pagina" , sHREF)); // NO FUNCIONA !!!
  location.href="destino.php?capt=" + buscarParametroGET("id_pagina" , sHREF);

En realidad lo que necesito es la ultima linea osea una redireccion a otra pagina pero con datos obtenidos del div.
Tu funcion buscarParametroGET me ha dado la idea que necestiaba es recontra util, es mas le he modificado para dos paremetros y si me ha funcionado dentro del jquery pero cuando le paso variables no...
Aqui esta mi codigo completo...jeje lamento la insistencia pero es una joda atascarse en una parte del codigo y no seguir avanzando en el proyecto..

<html>
<head>
    <title>PoC</title>

    <script type="text/javascript" src="jquery.js"></script>

  </head>
  <body>

  <div class = "art">
      <a id = "link" href = "borrar.php?id_pagina=34">
        <img alt = "" src ="oficina.gif" border = 0>
      </a>
    <div class = "delete" align = "center"><b>DELETE</b></div>
  </div>

  <script language="javascript">
    $("div.art > div.delete").click( function() {
      var sHREF = $("#link").attr("href");
  alert(buscarParametroGET("id_pagina" , "borrar.php?id_pagina=54"));// SI FUNCIONA !!!!
  alert(buscarParametroGET("id_pagina" , sHREF)); // NO FUNCIONA !!!
  location.href="destino.php?capt=" + buscarParametroGET("id_pagina" , sHREF);
   


function buscarParametroGET( parametros , url)
{
var expReg    = "[\\?&]"+parametros+"=([^&#38;#]*)";
var regEx     = new RegExp ( expReg );
var resultado = regEx.exec( url );
if( resultado == null ){
   return "";
}else{
   return resultado[1];
}
}
    });

  </script>

  </body>
</html>


Shell Root

Debería de funcionar sólo si tienes correcta la variable sHREF, es decir,
Código (javascript) [Seleccionar]
 var sHREF = "http://foro.elhacker.net/post.html;topic=328726.0;num_replies=7";
 alert( buscarParametroGET("num_replies", sHREF) );


Así que tienes que hacer que sHREF contenga la URL que quieres.
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

Lupin

Pero si tengo  sHREF correcto incluso cuando
hice un alert(sHREF) me arroja la url sin problemas


...
$("div.art > div.delete").click( function() {
      var sHREF = $("#link").attr("href");  // si funciona pero parece que la funcion
buscarParametroGET no lo recibe bien.


....


Creo que optare por esta solucion menos eficiente pero  es lo que tengo a la mano por ahora :

...var sHREF = $("#link").attr("href");
var strCompleta=new String(sHREF);
var adelante = strCompleta.substring(strCompleta.indexOf("id_pagina")+10, strCompleta.length);
alert (adelante);
...