jQuery many functions for many rows, how to manage?

Question

I have this code: Example of my code working

Or maybe this with ID: Example 2 of my code

Another try: http://jsbin.com/wazeba/edit?js,console,output

And another one (with code from here: https://stackoverflow.com/a/4785886/4412054 ): http://jsbin.com/fuvoma/edit?js,console,output

IN EVERY CASE THE ID IS THE SAME.

My html:

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <br><br><br>

<button id="btnTest">Test many!</button>
<br><br><br>
<form id="formTest">

  <table>
    <thead>
    <tr>
      <th>Code</td>
    <th>Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="anumber" id="anumber">
      </td>
      <td>
        <input type="text" name="name" id="name">
      </td>
    </tr>
  </tbody>
  </table>


</form>

<button type="button" id="btnAdd">Add</button>

</body>
</html>

and my Javascript:

jQuery(document).ready(function() {

    jQuery("#btnTest").click(function() {
        for (var i = 0; i < 10; i++) {
            console.log("Test: " + i);
            jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
            jQuery('#btnAdd').click();
        }
    });


    jQuery("#btnAdd").click(function(e) {
        lastR = $("#formTest tbody tr").last();
        jQuery(lastR).clone().appendTo('#formTest tbody');
      readFnc(lastR);
    });

    function readFnc(lastR) {
      rowCode = $(lastR).find("input[name='anumber']");
      rowName = $(lastR).find("input[name='name']");
      var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {
       })
      .fail( function() {
        console.log("Error");
      })
      .done( function(data) {
        console.log("Goo!");
        rowCode.val(data.code);
        rowName.val(data.name);
        $(lastR).css({"background-color": "#99ff99"});
      });
    }

});

Now I need to update every row with a different value from each getJSON. How to manage many ajax calls or, more abstract, many functions?

I need to update form when the server resonds. And just then.

If I assign an ID to every tr then on each "Add" click the function variables are override. How to do?

Vanojx1 · Accepted Answer · 2016-02-22T09:54:57.453

getJSON is async so the script create 10 rows and just THEN it resolve the getJSOn promise, using the last() selector it assign the value only to the last row created. To avoid this issue you can pass the cloned object to the function. Just for explanation you can see that callOrder and resolveOrder are in a different order.

  var callORder = 0;

  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

jQuery(document).ready(function() {

  jQuery("#btnTest").click(function() {
    for (var i = 0; i < 10; i++) {
      console.log("Test: " + i);
      jQuery("#formTest tbody tr").last().find("input[name*='anumber']").val('243');
      jQuery('#btnAdd').click();
    }
  });

  var callORder = 0;
  
  jQuery("#btnAdd").click(function(e) {
    lastR = $("#formTest tbody tr").last();
    var newRow = jQuery(lastR).clone();
    newRow.appendTo('#formTest tbody');
    readFnc(newRow,++callORder);
  });

  var resolveOrder = 0;

  function readFnc(newR,callORder) {

    var jqxhr = $.getJSON('http://beta.json-generator.com/api/json/get/41Lpsgmsx', function(data) {})
      .fail(function() {
        console.log("Error");
      })
      .done(function(data) {
        console.log("Goo!");
        rowCode = newR.find("input[name='anumber']");
        rowName = newR.find("input[name='name']");
        rowCode.val(data.code + " " + (++resolveOrder)+ " " + (callORder));
        rowName.val(data.name);
        newR.css({
          "background-color": "#99ff99"
        });
      });
  }

});

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <br>
  <br>
  <br>

  <button id="btnTest">Test many!</button>
  <br>
  <br>
  <br>
  <form id="formTest">

    <table>
      <thead>
        <tr>
          <th>Code</td>
            <th>Name</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="text" name="anumber" id="anumber">
          </td>
          <td>
            <input type="text" name="name" id="name">
          </td>
        </tr>
      </tbody>
    </table>


  </form>

  <button type="button" id="btnAdd">Add</button>

</body>

</html>

Dear @Vanojx1, your code is beautiful, thanks a lot, but I need to create instantly the new row because I need instantly another input to write in and put in queue. I can't wait all the getjson to execute before write again and add the new row to the "queue". This is the real problem. — , Feb 22 '16 at 09:10
Can I pass an ID to the function? The ID of the TR like in this example: http://jsbin.com/pakexah/edit?js,console,output — , Feb 22 '16 at 09:17
Maybe this answer can help us? http://stackoverflow.com/questions/20975651/local-variables-overwrite-in-function-run-multiple-times-in-a-loop — , Feb 22 '16 at 09:20
Sorry i dont know that the istant creation was the real problem. I ve edited my answer, hope now it can solve your issue — Vanojx1, Feb 22 '16 at 09:53

jQuery many functions for many rows, how to manage?

1 Answers1

Linked