Question

所以我有两个资源：group和user。当我在group的show.html.erb页面上时，我希望能够点击创建带有搜索表单的弹出窗口的链接来搜索所有用户。我已经到了点击“添加用户”链接并弹出一个搜索表单的地步。搜索表单功能，唯一的问题是我被引导到结果的users索引页面，而我希望结果出现在这个弹出窗口中。

我的想法是将我在用户的index.html.erb中的内容移动到弹出窗口中，然后通过ajax获得搜索表单功能。我不太确定如何实现这一点，特别是考虑到我想通过user控制器/视图搜索group资源。

群组的show.html.erb

<div id="add_user"><%= link_to '(Add User)', '#' %></div>
<div class="popup" id="user_search_form">
    <%= form_tag users_path, :method => 'get' do %>
        <%= text_field_tag :search, params[:search] %>
        <%= submit_tag "Find User", :name => nil, class: "btn btn-primary" %>
    <% end %>
    <div id="close_window"><%= link_to 'Cancel', '#' %></div>
</div>

群组的控制器

def show
    @group = Group.find(params[:id])
end

用户控制器

def index   
    @users = User.search(params[:search]).paginate(page: params[:page])
end

用户的index.html.erb

<u1 class="users">
    <div class="container-fluid">
        <%= render @users %>
    </div>
</u1>

提前致谢。任何帮助将不胜感激！

Answer 1

添加javascript代码以处理搜索。此代码只是通过ajax调用users#index操作。

/views/groups/show.html.erb添加新行。

<div id="add_user"><%= link_to '(Add User)', '#' %></div>
<div class="popup" id="user_search_form">
    <%= form_tag users_path, :method => 'get', :id => 'user-search' do %>
        <%= text_field_tag :search, params[:search] %>
        <%= submit_tag "Find User", :name => nil, class: "btn btn-primary" %>
    <% end %>
    <div id="users-result"></div>
    <div id="close_window"><%= link_to 'Cancel', '#' %></div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('form#user-search').on('submit',function(event){
            event.preventDefault();
            var url = $(this).attr('action');
            var type = $(this).attr('method');
            var data = { search : $(this).find(#'search').val() };
            $.ajax({
                url: url,
                type: type,
                data: data,
                success: function (data) {
                    $('#users-result').html(data);
                }
            });
        });

    });
</script>

使用Ajax弹出搜索表单

1 个答案: