0

A través de un foreach:

foreach ($conexion->query($cefpp) as $row) {    
        $id = $row['id'];
        $dato = $row['dato'];
        echo "<a href='plantilla.php?id=".$id."' class="dato" id="dato"  data-valor='".$dato."'>";
}

Muestro varios enlaces y paso un valor que varia según el enlace.

Quiero que a través de ajax y usando jquery ese dato se muestre en otra parte de la página donde tengo un div, que es donde se debe cargar:

<div id="dato" class="dato"></div>

$(document).ready(function() {
    $("body").on("click", "a", function(event) {
            event.preventDefault();
            $.ajax({
                url: $(this).attr("href").valueOf()                     
            })                                                                                            
            .done(function(data) {

                if (data) {
                    if ($(this).attr("id").valueOf() == "dato") {
                        var dato = $(this).attr("data-valor").valueOf();
                        $(".dato").html(dato);
                    }   
                else {
                    alert("Data no tiene valor");
                }           
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                if(jqXHR.status === 0) {
                alert('Not connect: Verify Network.');

              } else if(jqXHR.status == 404) {

                alert('Requested page not found [404]');

              } else if(jqXHR.status == 500) {

                alert('Internal Server Error [500].');          

              } else if(textStatus === 'parsererror') {

                alert('Requested JSON parse failed.');

              } else if(textStatus === 'timeout') {

                alert('Time out error.');

              } else if(textStatus === 'abort') {

                alert('Ajax request aborted.');

              } else {

                alert('Uncaught Error: ' + jqXHR.responseText);         
              }
          })
          .always(function(result) {
          });
    });
});     

El error que me devuelve la consola de Firefox es:

TypeError: $(...).attr(...) is undefined

var dato = $(this).attr("data-valor").valueOf();

Si en vez this pongo -->

var enlace= "." + $(this,"a").prop("class");
var dato = $(enlace).attr("data-valor").valueOf();

Aparentemente funciona, pero en realidad muestra el primer resultado del foreach.

¿Porque pasa esto? ¿Que estoy haciendo mal?

7
  • 1
    echo "<a href='plantilla.php?id=".$id."' data-valor='".$dato."'>"; en estos enlaces no hay ningun atributo id. entonces $(this).attr("id").valueOf() == "dato" esta comprovación no te funcionará. Te lo encontrará si utilizas echo "<a href='plantilla.php?id=".$id."' id='dato' data-valor='".$dato."'>";
    – Txmx
    Commented el 6 feb. 2018 a las 11:47
  • 2
    @TxemaAlment aunque id tiene que ser unico.
    – lois6b
    Commented el 6 feb. 2018 a las 11:56
  • 2
    Tienes razón, entonces podria utilizar el $id que le da php o si utiliza class="dato", comprovarlo como `if($(this).hasClass('dato'))'
    – Txmx
    Commented el 6 feb. 2018 a las 12:02
  • php no esta asignando ninguna id al enlace, es una key mas de la url, debe descomponer la url para poder saber el valor de esta y así hacer su análisis Commented el 6 feb. 2018 a las 12:09
  • Es verdad, aquí me olvide de poner: class="dato" id="dato" pero en el código si que lo tengo puesto y el resultado es el que os indico. Commented el 6 feb. 2018 a las 12:40

2 respuestas 2

0

Al final lo solucione de la siguiente manera:

Primero había que inicializar la variable dato vacía, y que comprobar que esta vacía para asignarle el valor de data-valor.

Una vez hecho esto y dentro de la función data comprobamos que el valor de dato sea igual al id (Creo que con class funcionaría igual, no lo he probado) y si lo es, enviamos el html al selector dato. Pongo el código a continuación:

$(document).ready(function() {
    $("body").on("click", "a", function(event) {
            event.preventDefault();


            $.ajax({
                url: $(this).attr("href").valueOf() 

                var dato = ""; 
                if ($(this).attr("id").valueOf() == "dato") {
                     dato = $(this).attr("data-valor").valueOf();   
                }

            })                                                                                            
            .done(function(data) {    
                if (data) {
                   $(".marco_principal").html(data);

                   if ($(this).attr("id").valueOf() == "dato") {                        
                        $(".dato").html(dato);
                    } 

                else {
                    alert("Data no tiene valor");
                }           
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                if(jqXHR.status === 0) {
                alert('Not connect: Verify Network.');

              } else if(jqXHR.status == 404) {

                alert('Requested page not found [404]');

              } else if(jqXHR.status == 500) {

                alert('Internal Server Error [500].');          

              } else if(textStatus === 'parsererror') {

                alert('Requested JSON parse failed.');

              } else if(textStatus === 'timeout') {

                alert('Time out error.');

              } else if(textStatus === 'abort') {

                alert('Ajax request aborted.');

              } else {

                alert('Uncaught Error: ' + jqXHR.responseText);         
              }
          })
          .always(function(result) {
          });
    });
});     
0
-1

Podrias descomponer la url con una funcion para asi ver el o los parametros que necesites en tu validacion, algo asi:

$("a").click(function(e){
e.preventDefault();
 //Se preparan l as variables con la data a procesar 
 var dato = $(this).attr('data-valor');
 var enlace = $(this).attr('href').valueOf();
 var id = $.get("id",enlace);
 var key = $.get("key",enlace);
 
 //Se indica la salida de la data
 $("#enlace").html("<b>El enlace es:</b> "+enlace);
 $("#dato").html("<b>El data-valor es:</b> "+dato);
 $("#valor").html("<b>La ID de URL es:</b> "+id);
 $("#key").html("<b>La KEY de URL es:</b> "+key);
})


//Esta funcion parsea la url para obtener el valor de la clave solicitada
$.get = function(key,url)   {  
        key = key.replace(/[\[]/, '\\[');  
        key = key.replace(/[\]]/, '\\]');  
        var pattern = "[\\?&]" + key + "=([^&#]*)";  
        var regex = new RegExp(pattern);  
        var urls = url;  
        var results = regex.exec(urls);  
        if (results === null) {  
            return null;  
        } else {  
            return results[1];  
        }  
    } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="planilla.php?id=ID_MUESTRA&key=valuenuevo" data-valor="datos">Planilla 1</a>
<a href="planilla.php?id=ID_DOCUMENTO&key=otrovalue" data-valor="datosB">Planilla 1</a>
<a href="planilla.php?id=ID_LOQUESEA&key=nuevovalue" data-valor="datosC">Planilla 1</a>
<br>
<hr>
<p id="enlace">

</p>
<p id="dato">
  
</p>
<p id="valor">
  
</p>
<p id="key">
  
</p>

1
  • Hola Carlos, Para mejorar la respuesta, por favor añade informacion y expliacion de cómo funciona. Mira Cómo responder para más info. Un saludo
    – lois6b
    Commented el 6 feb. 2018 a las 12:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.