Skip to content

AJAX DENTRO DE FOR EN JAVASCRIPT

JavaScript


 

 

Código Java Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <title>Ajax dentro del ciclo for en Java Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      var ids = [1,2,3,4,5];
       
      for(indice = 0; indice < ids.length; indice++){
      // Es importante notar que estamos utilizando jQuery
      $.ajax({
          url: "test.php",
          method: "POST",
          data: { parametro: ids[indice] }
            }).done(function(data) {
               console.log(data);
          });
      }
    </script>
  </body>
</html>
 

Peticiones AJAX dentro del ciclo for en Java Script

Una de las opciones para solucionar este problema es la recursividad, si no están muy familiarizados con este tema los invito al leer el tutorial que explica que es la programación recursiva. Para este caso podemos crear una función que se llama a sí misma dentro de done con el parámetro del índice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <title>AJAX dentro del ciclo for en Java Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
    <script>
      var ids = [1,2,3,4,5];
       
      function enviar(indice){
        // Es importante notar que estamos utilizando jQuery
        if(indice < ids.length){
          $.ajax({
            url: "test.php",
            method: "POST",
            data: { parametro: ids[indice] }
            }).done(function(data) {
              console.log(data);
              enviar(indice + 1);
          });
        }
      }
      enviar(0);
    </script>
  </body>
</html>

Con el script anterior nos aseguraremos que nuestro código se ejecute de la misma forma (estructural) siempre, donde cada petición AJAX se va a ejecutar una vez que termine la anterior.

Continue reading "AJAX DENTRO DE FOR EN JAVASCRIPT"

Determine Click Position (Row and Column Number) on click of a table cell

JQuery

 

 

Prepare a dummy HTML table for testing purpose. 'result' Div will show the corresponding row and column number when a particular cell of 'myTable' table is clicked.

<div id="result"> </div>
<table id="myTable" border="1" style="border-collapse: collapse;" cellpadding="8">
    <!--1st ROW-->
    <tr>
        <td>row 1, col 1</td>
        <td>row 1, col 2</td>
        <td>row 1, col 3</td>
        <td>row 1, col 4</td>
        <td>row 1, col 5</td>
    </tr>

    <!--2nd ROW-->
    <tr>
        <td>row 2, col 1</td>
        <td>row 2, col 2</td>
        <td>row 2, col 3</td>
        <td>row 2, col 4</td>
        <td>row 2, col 5</td>
    </tr>

    <!--3rd ROW-->
    <tr>
        <td>row 3, col 1</td>
        <td>row 3, col 2</td>
        <td>row 3, col 3</td>
        <td>row 3, col 4</td>
        <td>row 3, col 5</td>
    </tr>

    <!--4th ROW-->
    <tr>
        <td>row 4, col 1</td>
        <td>row 4, col 2</td>
        <td>row 4, col 3</td>
        <td>row 4, col 4</td>
        <td>row 4, col 5</td>
    </tr>

    <!--5th ROW-->
    <tr>
        <td>row 5, col 1</td>
        <td>row 5, col 2</td>
        <td>row 5, col 3</td>
        <td>row 5, col 4</td>
        <td>row 5, col 5</td>
    </tr>
</table>
Copy

Add following Javascript code to determine the click position on click of a table cell.

$(document).ready(function(){
    $("#myTable td").click(function() {

        var column_num = parseInt( $(this).index() ) + 1;
        var row_num = parseInt( $(this).parent().index() )+1;

        $("#result").html( "Row_num =" + row_num + "  ,  Rolumn_num ="+ column_num );
    });
});
Copy

Download SrcCodes

demo.html

Continue reading "Determine Click Position (Row and Column Number) on click of a table cell"