AJAX list update, get new elements and count

Question

I have this HTML list

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

and a form to add new names via AJAX, multiple add separated by commas. The response is a list with the names

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

I'm trying to insert this names sorted alphabetically in the list, like this example https://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 I can update the value of listUsernames and numUsernames after adding an item?

`if ($(this).text() > user.name) {` You know you're comparing strings right ? — adeneo, May 18 '13 at 17:14

Gabriel Petrovay · Answer 1 · 2013-05-18T17:08:21.600

1

First you don't need a double jQuery wrapping:

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

listUsernames is already a jQuery object, so try:

$(htmlUser).appendTo(listUsernames);

And after every adding, 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.

edited May 18 '13 at 17:08

answered May 18 '13 at 17:00

Gabriel Petrovay

20,476
22
97
168

1

Even though re-extending it is unnecessary, removing it is unlikely to make any difference i'd think.. – techfoobar May 18 '13 at 17:02

Dogbert · Accepted Answer · 2013-05-18T17:14:53.700

1

You just need to update numUsernames at that point.

Add this where your comments are:

numUsernames = listUsernames.children().length;

listUsernames already has the updated children, as it's 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.
    }
});

edited May 18 '13 at 17:14

answered May 18 '13 at 17:02

Dogbert

212,659
41
396
397

Sorry accidentally delete the comment, yes that found.. i add `numUsernames = listUsernames.children().length;` and i get the new number of elements in the list.. but for example in a empty list if i add 'Mickey' and later i add 'David'.. It insert 'David' at the end, not in sorted alphabetically. But if i add 'mickey' i refresh the page and i add 'david', it insert sorted alphabetically first, david and second myckey – JGrinon May 18 '13 at 17:30
thanks, it works!! There is no problem.. is because i do some changes and in the var htmlUser i had forgotten put the class='username' – JGrinon May 18 '13 at 17:40

score 0 · Answer 3 · edited Apr 03 '21 at 09:33

I update your 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?
});

AJAX list update, get new elements and count

3 Answers3

Linked