Login/Register
jQuery many functions for many rows, how to manage?
Asked Answered
Solved javascriptjqueryarraysajaxgetjson
D

1

0

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://mcmap.net/q/325550/-queue-ajax-requests-using-jquery-queue ): 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?

Discourse answered 22/2, 2016 at 8:6 Comment(0)
A
0

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>
Alloway answered 22/2, 2016 at 8:55 Comment(4)
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. – Discourse
Can I pass an ID to the function? The ID of the TR like in this example: jsbin.com/pakexah/edit?js,console,output – Discourse
Maybe this answer can help us? #20976151 – Discourse
Sorry i dont know that the istant creation was the real problem. I ve edited my answer, hope now it can solve your issue – Alloway

© 2022 - 2024 — McMap. All rights reserved.