JQuery nested $.each loop not executing in order?

Question

Basically I want to loops through all the inputs that has a "data-id" attribute and with a matching ItemID, then insert them into the database in order. Unfortunately they're not being inserted into the database in the correct order.

Here is my html:

<input id="control01" data-ItemId="11" value="xxx">
<input id="control02" data-ItemId="11" value="xxx">
<input id="control03" data-ItemId="12" value="xxx">
<input id="control04" data-ItemId="12" value="xxx">
<input id="control05" data-ItemId="12" value="xxx">
<input id="control06" data-ItemId="13" value="xxx">
<input id="control07" data-ItemId="13" value="xxx">
<input id="control08" data-ItemId="13" value="xxx">
<input id="control09" data-ItemId="14" value="xxx">    
<input id="control10" data-ItemId="14" value="xxx">
<input id="control11" data-ItemId="14" value="xxx">

Here's my code:

var ItemIDs = [12,13,14]; //Here's the given ID we're looking for
$.each(ItemIDs, function (index, value) {
        //alert(value); If I add an alert here it'll be inserted in the correct order
        $(":input[data-id='" + value + "']").each(function (index2, value2) {
        //Code to insert its value into SQL database;
        //PageMethods.AddItemToDB(ItemID);
       });   
    });

I want the result in the database to be:

AutoID        ItemID
1                 12
2                 12
3                 12
4                 13
5                 13
6                 13
7                 14
8                 14
9                 14

But here's what I'm getting:

AutoID        ItemID
1                 12
2                 12
3                 13
4                 14
5                 14
6                 13
7                 14
8                 12
9                 13

I have no clue why the order is so random. I tried adding an alert inside each loop, which to my surprise actually fixed the problem, otherwise it'll just be in random order. What am I doing wrong here? I'll greatly appreciate any help or suggestion!

How are you inserting them in the database? If you're calling an asynchronous function, they may not be executed in order. — Barmar
– Barmar, Commented Jun 21, 2016 at 19:13
Is this the exact code you're using? Because calling $.each on "12 13 14" is only going to iterate once, since that's not an array. Should be [12, 13, 14] — grimmdude
– grimmdude, Commented Jun 21, 2016 at 19:15
I'm calling a [Webmethod] in C# code behind to connect to my database then inserting the record. @Barmar — LostCoder
– LostCoder, Commented Jun 21, 2016 at 19:23
The issue is that calling webmethods in Javascript is asynchronous. There's no guarantee that they'll be executed in the same order that you call them. — Barmar
– Barmar, Commented Jun 21, 2016 at 19:24

wmash · Accepted Answer · 2016-06-21 19:28:32Z

1

var IDArray = [];
$("input[data-ItemId]").each(function() {
     if ($.inArray($(this).data("ItemId"), ItemIDs)) {
         IDArray.push($(this).data("ItemId"));
     }
});

I'm not sure how you want to add these values to the db but this code will add them to an array if they are present in that array (ItemIDs)

edited Jun 21, 2016 at 19:28

answered Jun 21, 2016 at 19:23

wmash

4,1924 gold badges38 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LostCoder · Accepted Answer · 2016-06-21 20:13:55Z

0

Since @Barmar mentioned that calling WebMethod in javascript is asynchronous, I ended up adding a new column in the table just for sorting purpose and then inserted a new index into it. It's finally working the way I wanted! Thanks for all your help!!

answered Jun 21, 2016 at 20:13

LostCoder

13 bronze badges

Collectives™ on Stack Overflow

JQuery nested $.each loop not executing in order?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related