Updating AJAX list, getting new items and counting

Question

I have this html list

<ul id='usernameList'> <li class='username'>John</li> <li class='username'>Mark</li> </ul> 

and the form for adding new names via AJAX, several addings are separated by commas. The answer is a list with names

 [{name:David, newUser:yes}, {name:Sara, newUser:yes}, {name:Mark, newUser:no}] 

I am trying to insert these names sorted alphabetically in a list, like this example http://jsfiddle.net/VQu3S/7/

This is my AJAX submit

 var form = $('#formUsername'); form.submit(function () { $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize(), dataType: "json", beforeSend: function () { // }, success: function (data) { var listUsernames = $('#usernameList'); var numUsernames = listUsernames.children().length; $.each(data, function(i, user) { if(user.newUser == "yes"){ var htmlUser = "<li class='username'>" + user.name + "</li>"; var added = false; $(".username", listUsernames).each(function(){ if ($(this).text() > user.name) { $(htmlUser).insertBefore($(this)); added = true; } }); if(!added) $(htmlUser).appendTo($(listUsernames)); } // HERE I DO alert('numUsernames') // I get the same number of users before sending form // How can I update here the value of listUsernames and numUsernames? }); } }); return false; }); 

My question is how can I update the value of listUsernames and numUsernames after adding an item.

Answer 1

You just need to update numUsernames at this point.

Add this where your comments are:

 numUsernames = listUsernames.children().length; 

listUsernames already has updated child elements, as this is a reference to the parent element.

Edit: Re: your comment below:

This should probably work:

 $(".username", listUsernames).each(function(){ if ($(this).text() > user.name) { $(htmlUser).insertBefore($(this)); added = true; return false; // stop `.each` loop. } }); 

Answer 2

At first, you don't need jQuery double wrapping:

 $(htmlUser).appendTo($(listUsernames)); 

listUsernames already a jQuery object, so try:

 $(htmlUser).appendTo(listUsernames); 

And after each addition, you can update the numUsernames variable with

 numUsernames = listUsernames.children().length; 

but this is not necessary because you can always access listUsernames.children().length in the success handler.

Answer 3

I am updating JSFIDDLE

 var listUsernames = $('#usernameList'); var numUsernames = listUsernames.children().length; var data = [{name:'David', newUser:'yes'}, {name:'Sara', newUser:'yes'}, {name:'Mark', newUser:'no'}] $.each(data, function(i, user) { if(user.newUser == "yes"){ var htmlUser = "<li class='username'>" + user.name + "</li>"; var added = false; $(".ingredient", listUsernames).each(function(){ if ($(this).text() > user.name) { $(htmlUser).insertBefore($(this)); added = true; } }); if(!added) $(htmlUser).appendTo($(listUsernames)); } // HERE I DO alert('numUsernames') // I get the same number of users before sending form // How can I update here the value of listUsernames and numUsernames? });