Rails Ajax表單不響應

Question

當前我在我的應用程序中使用了pg search gem。搜索功能正常工作。但是，現在我想爲我的表單應用ajax。事情是在我輸入搜索查詢之後，表單根本不顯示任何結果。我不知道我犯了什麼錯誤。難道你們，請採取實際看看我的代碼：

search.haml：

.row 
    %h1.text-center Tìm Giảng Viên 
    #teacher_lookup 
    = form_tag search_teachers_path, :id => 'custom-search-input', method: :get, class: "input-group col-md-12", role: "search", remote: true do 
     .input-group 
     = text_field_tag :search, 
       params[:search], class: "search-query form-control", placeholder: "Tên giảng viên, ví dụ: Nguyễn Văn A" 
     %span.input-group-btn 
      = button_tag(:class => "btn btn-danger") do 
      .search-size 
       %span.glyphicon.glyphicon-search 

= @teachers.each do |teacher| 
    = link_to teacher, school_teacher_url(teacher.school_id, teacher) 
    Khoa 
    = teacher.department | 
    , 
    = link_to teacher.school.name, school_path(teacher.school_id) 
    %br/ 

teachers.js：

var search_teacher; 
search_teacher = function() { 
    $('#custom-search-input') .on('ajax:success', function (event, data, status) { 
     $('#teacher_lookup').replaceWith(data); 
     search_teacher(); 
    }); 
} 

$(document).ready(function() { 
    search_teacher(); 
}); 

Answer 1

最好嘗試： - 建立一個API ，它接受一個搜索參數並以JSON格式返回教師。 - 建立一個JS函數，它們調用與$ .getJSON 這個API - 在回調的getJSON您可以附加教師到你的HTML

你仍然可以使用您的形式，但您必須使用自定義查詢重寫提交功能到API。

---

另一種可能性： 使用標準導軌Ajax和裏面做你的東西的意見/ */search_teachers.js.erb

---

這裏有一些代碼片段其無軌的內置插件工作意見。

我們需要一些東西：從我們目前的項目之一被盜 - 一個軌道路線 - Rails控制器，讓您的搜索查詢（以任何你想要的）和JSON格式 反應 - 在前端我們有地方有一個按鈕，觸發一個「負荷」功能 一個HTML形式 - 「加載」功能使Ajax調用和重新渲染列表

# routes.rb 
get '/my_search_route', to: 'search#query', as: :search_query 

然後軌道控制器來處理路線

#app/controllers/search_controller.rb 
class SearchController < ApplicationController 

    # method to search after something (e.g. a model named 'Customer') 
    def query 
    if !params[:q].nil? 
     render :json => Customer.where("name ilike :q", q: "#{params[:q]}%") # put this logic into your model 
    else 
     render :json => [] # not absulutly sure if this is correct syntax 
    end 
    end 
end 

在你的一些erb文件的前端，你有你的表單。我做一個輸入字段一個簡​​單的例子，以明確：

<!-- app/views/whatever/some_file.html.erb --> 
<!-- Input field to search --> 
<input type="search" name="search" id="search" placeholder="Search..." /> 

<!-- HTML list to display your results --> 
<ul id="searchResults"></ul> 

<!-- Skript to call the 'load'-function, when user types something --> 
<script> 
    $('#search').keyup(function(){ 
    query = $('#search').val(); 
    loadData(query); 
    }); 
</script> 

在你的資產，你需要一個JavaScript文件，包括在資產管道，在這裏我們可以存儲負載功能。

// app/assets/javascripts/search_functionality.js 
// loadData calls the backend 
function loadData(query){ 
    var params = {}; 
    params['q'] = query; 

    // ajax call 
    $.get("/my_search_route", params).done(function(data) { 
    for (var i = 0; i < data.length; i++) { 
     $("#searchResults").append('<li>' + data[i].name + '</li>'); 
    } 
    }); 
} 

這只是一個如何使往返的例子。在我們的項目中，我們在這個東西里面有更多的邏輯，但我認爲主要部分應該清楚。某處存在某些html和js。使用js，您可以將ajax調用到服務器以獲取數據。服務器需要一個路由和控制器，在給定參數之後進行搜索。如果您有問題，請在javascript中使用console.log或在rails側使用puts/debugger