如何使用 ajax 用 rails 填充 UL？答案

【问题标题】：How can I use ajax to populate a UL with rails?如何使用 ajax 用 rails 填充 UL？
【发布时间】：2014-08-17 12:22:51
【问题描述】：

我有一个 UL，我想通过对 rails 的 ajax 调用动态填充它。

如何使用 ajax 以该信息（即一组的 group.links 集合）动态填充不同的页面（由不同的控制器提供服务）？

可能是这样的

所以我寻找点击然后想要填充列表所以我有这个javascript：

$(function(){
  $("a[data-show-group-members]='true'").bind('click', function() {
    var gid= $(this).data("id");
    var gname= $(this).data("name");
    var links=$.get('/groups/' + gid);
    $('<tr><td colspan="4">Members:</br><ul id="group-members"><li>1</li><li>2</li><li>3</li></ul>Delete the <b>'+gname+'</b> group and all its members: <b><a rel="nofollow" data-method="delete" data-confirm="Are you sure?" href=\'/groups/'+gid+'\'>Yes</a></b> <b><a href="groups" data-close-group="true">No</b></br></br>').insertAfter($(this).closest('tr'));
    $(this).html("");
  });
});

该列表是一个占位符，但我想动态填充。

我正在考虑添加：

  var gid=$(this).data("id"); # comes from the url data attribute
  $.ajax({
    url: '/groups/$gid',
    type: 'get',
    data: $('#group-members').sortable('serialize'),
    dataType: 'script'
  });
});

但如果这是正确的，则不是。

我有一条现有路线 - groups/:id，它通过组显示方法填充@members，我在组显示页面 erb 模板中使用它来显示该组的成员。
目前组显示方法是

  def show
    @group = Group.find(params[:id])
    @members = Link.find_all_by_group_id(params[:id], :order => 'position')
    respond_to do |format|
      format.html # show.html.erb
      format.xml  { render :xml => @group }
    end
  end

所以我可以使用format.xml 或者我可以添加format.json，但我如何调用它并最终得到一个具有组名的UL。

组是：

id: integer, group_name: string, 
created_at: datetime, updated_at: datetime, group_description: string

页面使用：

<ul id="group-members"></ul>

作为接收此信息的地方。我显然可以删除占位符li的

【问题讨论】：

标签： jquery ruby-on-rails ruby ajax ruby-on-rails-3

【解决方案1】：

也许可以利用：

// Get the json from the controller
function GetListItems() {
    $.ajax({
        type: "POST",
        url: "/JsonService/GetItems",
        contentType: "application/json; charset=utf-8",
        data: "{}",
        dataType: "json",
        success: function (result) {
            DisplayListItems(result);
        },
        "error": function (result) {
            var response = result.responseText;
            alert('Error loading: ' + response);
        }
    });
}

// Create list items and append them inside <ul> element
function DisplayListItems(list) {
    $.each(list, function(index, element) {
        var itemHTML = ["<li>",
                                "<div>",
                                    "<div>",
                                        element.Title,
                                    "</div>",
                                    "<div>",
                                        element.Description,
                                    "</div>",                                    
                                "</div>",
                            "</li>"].join('\n');
        $(".list > ul").append(itemHTML);
    }
}

// Controller method that serves json data
public JsonResult GetItems()
{
    IQueryable<Item> itemList = new DAO().GetList();

    return Json(from e in itemList
                select new
                {
                    Title = e.Title,
                    Description = e.Description
                });
}

不确定要为我的组控制器节目添加的格式。

只是

format.json

或许

format.json {render @members}

【讨论】：