JQuery many functions for many lines, how to manage?

I have this code: An example of my code working

Or maybe it's with an identifier: Example 2 of my code

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

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

EVERYONE IS AN IDENTIFIER ONLY .

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 each row with a different value from each getJSON. How to manage many ajax calls or, more abstract, many functions?

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

If I assign an identifier to each tr, then each time I click Add, the function variables are redefined. How to do it?

0
javascript jquery arrays ajax getjson
Feb 22 '16 at 8:06
source share
1 answer

getJSON is async, so the script creates 10 lines and only THEN it resolves the getJSOn promise using the last () selector, which only assigns the value to the last line created. To avoid this problem, you can pass the cloned object to a 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> 
+1
Feb 22 '16 at 8:55
source share



All Articles