带Ajax的弹出式搜索表单

Question

So I have two resources: group and user. When I'm on a group's show.html.erb page, I want to be able to click a link that creates a popup with a search form to search through all users. I've gotten to the point where I click the 'add user' link and a popup comes up with a search form. The search form functions, the only issue is that I am directed to the users index page for the results whereas I want the results to appear in this popup.

My thought would be to move what I have in user's index.html.erb into the popup and then have the search form function via ajax. I'm not quite sure how to implement this however especially given that I want to run a search for the user resource via the group controller/view.

Group's 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>

Group's Controller

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

User's Controller

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

User's index.html.erb

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

Thanks in advance. Any help would be much appreciated!

Answer 1

Add the javascript code to handle the searching. This code simply calls the users#index action via ajax.

• /views/groups/show.html.erb add the new lines.

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