how can I do that when I bring a table dynamically by ajax, I still respect the doubleclick of JavaScript on the table

Question

how can I do that when I bring a table dynamically by ajax, I still respect the doubleclick of JavaScript on the table

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

When loading the page a table is shown, to this table to double click on a record opens a modal with a graph, until it works correctly but when using a drop-down list that still commands me to attract other results through ajax and it is shown on the page .. when double clicking on one of the new records, I no longer double click to open the modal How could I make the javaScript that opens the modal open with the new loaded records?

I'm new to this and I'm really stuck with this. Thank you for taking a moment to try to clarify this.

This is the code of the table that loads at the beginning in the initial page.

Table:

 <tbody id="contenedora">                   
<?php
$conn = oci_connect("SYSTEM","Seguridad123","localhost/orcl");
$stid = oci_parse($conn, 'SELECT  IDCONTRATO,ANIOQNA,EDO,RFC,PUESTO,CURP,NOMBRE,
"2013_01","2013_02","2013_03","2013_04","2013_05","2013_06",
"2013_07","2013_08","2013_09","2013_10", QNACON FROM CONTRATOS WHERE rownum <= 15');
oci_execute($stid);

  while ($fila = oci_fetch_array($stid, OCI_BOTH+OCI_RETURN_NULLS)) {
        echo"<tr>";
echo "<td>".$fila['ANIOQNA']."</td>"."<td>".$fila['EDO']."</td>"."<td>".$fila['RFC']."</td>"."<td>".$fila['PUESTO'] ."</td>".
     "<td>".$fila['CURP']."</td>"."<td valor='$fila[IDCONTRATO]' class='click'>".$fila['NOMBRE']."</td>".
    "<td>".$fila['2013_01']."</td>"."<td>".$fila['2013_02']."</td>".
    "<td>".$fila['2013_03']."</td>"."<td>".$fila['2013_04']."</td>"."<td>".$fila['2013_05']."</td>"."<td>".$fila['2013_06']."</td>".
    "<td>".$fila['2013_07']."</td>"."<td>".$fila['2013_08']."</td>"."<td>".$fila['2013_09']."</td>"."<td>".$fila['2013_10']."</td>";
    echo "</tr>\n";
}
  ?>
 </tbody>

Drop-down list:

<script src="js/jquery-2.1.1.js"></script>
<script>
 jQuery.noConflict();
(function($) {
     $(document).ready(function(){
        $('#anio').change(function(){
     var url = "aniocon.php";                                     
        $.ajax({                        
            type: "GET",                 
           url: url,                    
           data:$("#anio").serialize(),
           success: function(data)            
           {
             $("tbody").html(data);           
           }
         });

      });
    });
        })(jQuery);
</script>

JavaScript that opens my modality by double clicking:

 <script>
 //ventana modal 
//Clase click
//datavalor=recoge el valor de la variable

$(".click").dblclick(function() {
      var parametros = $(this).attr("valor");
      alert(parametros);
      $('#myModal').show();
      $.ajax({
                data:   {parametros:parametros},
                url:   'grafica.php',
                type:  'GET',
                beforeSend: function () {
                        $("#resultado").html("<h2>Procesando, espere por favor...</h2>");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
     }); 
 });

javascript ajax

asked by Fernando 14.07.2017 в 19:25

source

2 answers

0

When you dynamically load code, events loaded in this way:

$(".click").dblclick(function() {
    ...
}

they do not work, because these are linked to those that were previously in the onReady in the DOM.

That is why it is preferable to use to bind an event using the .on .

$(".click").on('dblclick',function() {
    ...
}

That way you ensure that there is listening for the initial elements as well as for those that are loaded dynamically

answered by 14.07.2017 в 20:34

Change primary Key in ASP.NET MVC5 How can I get all the children of a category?

score 0 · Accepted Answer

When running

$(".click").dblclick(function() {...}

You are linking the handler (the function) over the elements with the class click at that time. The problem is that when you bring new elements to the DOM

$("tbody").html(data);

These new elements (even having the class click ), were not linked to that handler. Now, the solution is in; or re-link these new elements to the handler, or (and this is what I recommend), delegate the event , which would bind the handler to a parent element that contains to the elements on which you want the action, this is allowed by the same function on () by jquery

$('elemento_padre').on( evento [, selector ] [, data ], handler )

Which in your case would be

$("body").on(".click", "dblclick", function(){
...
});

I recommend reading the Direct and delegated events in the jquery documentation of the on

function

Something that would also work (not recommended) is to re-delegate

$("tbody").html(data); 
$(".click").dblclick(function() {...}