如何使用ajax在rails中填充UL?

时间:2014-08-17 12:22:52

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

我有一个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,通过群组展示方法,填充我在群组展示页面erb模板中使用的@members来显示该群组的成员。
目前,群组展示方法是

  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&#39;

1 个答案:

答案 0 :(得分:0)

可以使用:

// 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}