Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Lupin en 26 Mayo 2011, 03:01 am



Título: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 26 Mayo 2011, 03:01 am
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
 :-[ :-[
Código:
<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


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: bomba1990 en 26 Mayo 2011, 03:54 am
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
  1. $(".delete").click(function (){
  2. var id_pagina = $(this).attr('href);
  3. var id = id.substring(id.lastIndexOf("="),id.length);
  4. });
  5.  

No lo e probado pero te debe funcionar


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Shell Root en 26 Mayo 2011, 04:05 am
Yo tengo esta pequeña función para obtener un parámetro GET.
Código
  1. function buscarParametroGET( parametros ){
  2.  var expReg    = "[\\?&]"+parametros+"=([^&#38;#]*)";
  3.  var regEx     = new RegExp ( expReg );
  4.  var uRL       = window.location.href;
  5.  var resultado = regEx.exec( uRL );
  6.  if( resultado == null ){
  7.    return "";
  8.  }else{
  9.    return resultado[1];
  10.  }
  11. }


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: RedZer en 26 Mayo 2011, 04:26 am
checate esta liga aver si te sirve de algo
http://foro.elhacker.net/desarrollo_web/pasar_parametros_con_jquery_y_ajax-t327513.0.html


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 27 Mayo 2011, 00:34 am
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
Código:
<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>


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Shell Root en 27 Mayo 2011, 04:48 am
Pero no entiendo muy bien, a ver. Supongamos que tenemos la siguiente estructura.

Código
  1. <div id = "contenedor">
  2.  <a href = "index.php?token=23fb81d50f1eaf9de847a56a00">
  3.    <img src = "IMG/imgPoC.jpg" >
  4.  </a>
  5.  <div id = "delete">DELETE</div>
  6. </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
  1.  <head>
  2.    <title>PoC</title>
  3.    <script type = "text/javascript" src = "JQuery.js"></script>
  4.  </head>
  5.  <body>
  6.  
  7.  <div class = "art">
  8.      <a id = "link" href = "hola">
  9.        <img alt = "" src = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/186520_100001061925688_4930346_q.jpg" border = 0>
  10.      </a>
  11.    <div class = "delete" align = "center"><b>DELETE</b></div>
  12.  </div>
  13.  
  14.  <script language="javascript">
  15.    $("div.art > div.delete").click( function() {
  16.      var sHREF = $("#link").attr("href");
  17.      alert(sHREF);
  18.    });
  19.  </script>
  20.  
  21.  </body>
  22. </html>


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 27 Mayo 2011, 20:12 pm
Código:
<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>




Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 27 Mayo 2011, 20:26 pm
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
Código:
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..
Código:
<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>



Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Shell Root en 27 Mayo 2011, 23:14 pm
Debería de funcionar sólo si tienes correcta la variable sHREF, es decir,
Código
  1.  var sHREF = "http://foro.elhacker.net/post.html;topic=328726.0;num_replies=7";
  2.  alert( buscarParametroGET("num_replies", sHREF) );

Así que tienes que hacer que sHREF contenga la URL que quieres.


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 27 Mayo 2011, 23:23 pm
Pero si tengo  sHREF correcto incluso cuando
hice un alert(sHREF) me arroja la url sin problemas

Código:
...
$("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 :
Código:
...var sHREF = $("#link").attr("href");
var strCompleta=new String(sHREF);
var adelante = strCompleta.substring(strCompleta.indexOf("id_pagina")+10, strCompleta.length);
alert (adelante);
...


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Shell Root en 27 Mayo 2011, 23:37 pm
Pues no se que no es lo que te funciona,
Código
  1.  <head>
  2.    <title>PoC</title>
  3.    <script type = "text/javascript" src = "JQuery.js"></script>
  4.    <script language = "javascript">
  5.      function buscarParametroGET( parametros, url){
  6.        var expReg    = "[\\?&]"+parametros+"=([^&#38;#38;#]*)";
  7.        var regEx     = new RegExp ( expReg );
  8.        var resultado = regEx.exec( url );
  9.        if( resultado == null ){
  10.          return "";
  11.        }else{
  12.          return resultado[1];
  13.        }
  14.      }
  15.    </script>
  16.  </head>
  17.  <body>
  18.  
  19.  <div class = "art">
  20.      <a id = "link" href = "http://127.0.0.1/PoC/index.php?token=PoC">
  21.        <img alt = "" src = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/186520_100001061925688_4930346_q.jpg" border = 0>
  22.      </a>
  23.    <div class = "delete" align = "center"><b>DELETE</b></div>
  24.  </div>
  25.  
  26.  <script language="javascript">
  27.    $("div.art > div.delete").click( function() {
  28.      var sHREF = $("#link").attr("href");
  29.      alert(buscarParametroGET("token", sHREF));
  30.    });
  31.  </script>
  32.  
  33.  </body>
  34. </html>


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 28 Mayo 2011, 19:08 pm
 ;D ;D Gracias tu codigo va de maravillas.
Tratando de hacerlo mas general he reemplazado  esto :
 
Código:
 
<script language="javascript">
    $("div.art > div.delete").click( function() {
     var sHREF = $("#link").attr("href");
     alert(buscarParametroGET("token", sHREF));
    });

por esto
Código:
  <script language="javascript">
    $("div.art > div.delete").click( function() {
   var sHREF = $(this).parent().find('#link').attr("href");
  alert(buscarParametroGET("id_pagina",sHREF));
    });
  </script>

El problema es que me funciona en un solo DIV de los varios que el php genera en mi pagina, mas especifico en el segundo DIV. De alli la funcion arroja vacio...tratare de solucionarlo  y lo posteo...eso espero ;D


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 31 Mayo 2011, 18:38 pm
Gracias Shell Root por tu ayuda...genial !!!
Bueno aun no lo resuelvo pero me quedo con este codigo

(Si funciona)
Código:
<html>
<head>
    <title>PoC</title>
    <script type = "text/javascript" src = "JQuery.js"></script>
    <script language = "javascript">
      function buscarParametroGET( parametros, url){
        var expReg    = "[\\?&]"+parametros+"=([^&#38;#38;#]*)";
        var regEx     = new RegExp ( expReg );
        var resultado = regEx.exec( url );
        if( resultado == null ){
          return "";
        }else{
          return resultado[1];
        }
      }
    </script>
<style type="text/css">
<!--
.art {
height: 50px;
width: 50px;
background-color:#00BFAA;
}
.delete {
height: 50px;
width: 120px;
background-color:#00BFAA;
}
-->
  </style>
  </head>
  <body>
 
  <div class = "art">
      <a id = "link" href = "http://127.0.0.1/PoC/index.php?token=100">
        <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>
 
  <br>
  <div class = "art">
      <a id = "link" href = "http://127.0.0.1/PoC/index.php?token=101">
        <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>
 
  <br>
  <div class = "art">
      <a id = "link" href = "http://127.0.0.1/PoC/index.php?token=102">
        <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>
  <br>
 
  <div class = "art">
      <a id = "link" href = "http://127.0.0.1/PoC/index.php?token=103">
        <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 = $(this).parent().find('#link').attr("href");
  var strCompleta=new String(sHREF);
  var adelante = strCompleta.substring(strCompleta.indexOf("token")+6, strCompleta.length );
  alert (adelante);


    });
  </script>
 
  </body>
</html>

Voy a ponerme a estudiar mas en serio Jquery..
Espero que a otros le sirva este tema...
Por cierto como hago para postear el codigo de colores ??  ;D ;D


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Shell Root en 31 Mayo 2011, 22:45 pm
Con el uso de la etiqueta [code][/code]

Así,
[code=javascript]var sPoc = 1;[/code]

Resultado,
Código
  1. var sPoc = 1;


Título: Re: ¿Como recuperar un dato de varios divs haciendo Click ? - javascript - Jquey
Publicado por: Lupin en 31 Mayo 2011, 23:42 pm
Gracias
Asi sera mas facil hacer entender mis codeX !!!  >:D
Saludos !!