AJAX列表更新，获取新元素和计数 [英] AJAX list update, get new elements and count

问题描述

我有这个HTML列表

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

以及通过AJAX添加新名称的表单，以逗号分隔的多个添加。响应是一个名称列表

  [{name：David，newUser：yes}，{name：Sara，newUser：是}，{name：Mark，newUser：no}] 
  

我正在尝试插入此名称在列表中按字母顺序排序，如 http://jsfiddle.net/VQu3S/7/ 这是我的AJAX提交

  var form = $（'＃ formUsername'）; 
 form.submit（function（）{
 $ .ajax（{
 type：form.attr（'method'），
 url：form.attr（'action'） ，
数据：form.serialize（），
 dataType：json，
 beforeSend：function（）{
 // 
}，
成功：function（data）{
 
 var listUsernames = $（'＃usernameList'）; 
 var numUsernames = listUsernames.children（）。length; 
 
 $。每个（数据，函数（i，用户）{
 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'）
 //我在发送表格之前得到相同数量的用户
 
 //如何在此更新listUsernames和numUsernames的值？ 
}）; 
 
 
 
} 
}）; 
返回false; 
}）; 
  

我的问题是，如何在添加项目后更新listUsernames和numUsernames的值。

解决方案

您需要在此时更新 numUsernames 。

在你评论的地方添加：

  numUsernames = listUsernames.children（）。长度; 
  

listUsernames 已经有更新的子项，如它是对父元素的引用。

编辑：Re：你的评论如下：

这应该可行：

  $（。username，listUsernames）.each（function（）{
 if（$（this ）.text（）> user.name）{
 $（htmlUser）.insertBefore（$（this））; 
 added = true; 
 return false; // stop` .each `loop。
} 
}）; 
  

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 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 I can update the value of listUsernames and numUsernames after adding an item.

解决方案

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.
    }
});

这篇关于AJAX列表更新，获取新元素和计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！