Pass data through a link

Question

Pass data through a link

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

Through a 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."'>";
}

I show several links and I pass a value that varies according to the link.

I want that through ajax and using jquery that data is shown in another part of the page where I have a div, which is where it should be loaded:

<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) {
          });
    });
});

The error returned by the Firefox console is:

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

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

If instead this I put - >

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

Apparently it works, but it actually shows the first result of the foreach.

Why is this happening? What am I doing wrong?

jquery ajax

asked by Isaac Palacio 06.02.2018 в 11:53

source

2 answers

-1

You could decompose the url with a function to see the parameter (s) you need in your validation, something like this:

$("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>

answered by 06.02.2018 в 13:07

BD by default in Vtiger CRM 6.0.0 Problem with special characters Highcharts JS [Ubuntu]

score 1 · Accepted Answer

In the end, solve it in the following way:

First you had to initialize the empty data variable, and check that it is empty to assign it the value of data-value.

Once this is done and inside the data function we check that the data value is equal to the id (I think that with class it would work the same, I have not tried it) and if it is, we send the html to the data selector. I put the code below:

$(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) {
          });
    });
});