Question

在我的项目中，我有一对多的关系（客户有很多联系人），现在，我在下拉菜单中列出客户端，我想要的是，要让所选客户端的联系人呈现动态地作为复选框。

这是我的_form.html.haml的（部分），以及发送Ajax请求的jQuery部分：

  %h4 This meeting is made for :
  = f.input :client_id, collection:(Client.all)
  %br
  %hr     


  %h4 Assign Contacts:
  //HERE WHERE I REALLY WANT THE CHECKBOXES TO BE REDNERED DYNAMICALLY.
  = check_box_tag "contact_ids[]", c.id, @meeting.contacts.include?(c)
  = c.first_name
  %br


  :javascript
    $(document).ready(function (){
      $('#meeting_client_id').change(function(){
      var state = $('#meeting_client_id :selected').val();
      if(state !== "")
      {
        $.getJSON('/clients/client_contacts/' + state, function(data){
        console.log(data);
        })
      }
     return false;
     })
   });

这是我的Clients_controller操作，它处理请求：

def client_contacts
  client = (params[:id])
  cou = Contact.where(client_id: client)
  @msg = { "success" => "true", "message" => "hello", "count" => cou}
  respond_to do |format|
    format.html
    format.json { render json: @msg }
  end
end

现在，在控制台中，我可以看到请求正在返回计数和对象。

因此我对JS / jQuery很陌生，对Rails来说还是新手，我真的不知道如何从这里开始。

非常感谢任何提示/文章/链接/帮助或建议。

Answer 1

试试这个：

$.getJSON('/clients/client_contacts/' + state, function(data){
    console.log(data);
    data.each(function(){
        var id = data.id;
        var name = data.firstName;
        //add to new div with id myDiv
        $('#myDiv').append('<input name='+ id +' type="checkbox" /> ' + name + '<br />');)
    });
});

Answer 2

如果您缺少的唯一部分是复选框的创建，您可以尝试这样的事情;

var output = $("some selector for an element containing the checkboxes");

$('#meeting_client_id').change(function(){
    var state = this.value;
    if(state !== "") {
        $.getJSON("/clients/client_contacts/" + state).done(function(data) {
            output.empty(); // clear the container
            // assuming data is an array of strings, modify as needed
            $.each(data, function () { 
                // for each array item in the result, create a checkbox
                $('<input type="checkbox" value="'+this+'">'+this+'</option>')
                    .appendTo(output); // append it to the container
            });
        });
    }
});

我在这里使用的重要部分是：

$.each()用于循环遍历数组：http://api.jquery.com/jQuery.each/
$("<html>")语法：http://api.jquery.com/jQuery/#jQuery2
.appendTo()用于附加到DOM：http://api.jquery.com/appendTo/

这是一个演示，我只是使用自定义函数伪造ajax调用。

http://jsfiddle.net/kK622/1/

根据下拉选择生成复选框？

2 个答案: