侧边栏和主页持久性 - Rails
Sidebar and Main page persistence - Rails
我正在使用侧边栏搜索并生成列表(在侧边栏内) 我希望在使用侧边栏搜索时主页保持不变。我相信这需要一些 JS,但我对 JS 一无所知。
- 我的导航栏在 div _navbar.html.erb
- 主页基本上是正在生成的任何其他页面
您需要将 AJAX 与 rails 一起使用。以下是它可能对您有用的方法:
在您的表单中添加 :remote => true 和 :'data-update-target' => 'update-container' 来指定您希望搜索结果的位置。您可能希望避免使用 courses_path,而是使用 form_tag({:controller => courses, :action => 'search'}
来直接说明您希望将表单提交到哪里。
<%= form_tag courses_path, method: :get, :remote => true ,class: "navbar- form navbar-right", :'data-update-target' => 'update-container' , role: "search" do %>
<p>
<%= text_field_tag :search, params[:search], class: "form-control" %>
<%= submit_tag "Search",:disable_with => 'Please wait...', name: nil, class: "btn btn-default" %>
</p>
<% end %>
将此添加到您的侧边栏。这是部分结果的来源:
<div id="update-container"></div>
添加 javascript`` 以在请求完成时将其放在应有的位置:
<script>
$(function() {
$('form[data-update-target]').on('ajax:success', function(evt, data) {
var target = $(this).data('update-target');
$('#' + target).html(data);
});
});
添加一个名为 _search_results.html.erb
的部分 <- 这就是您的结果所在的位置。
<!-- arbitrary code -->
<%= @results.each do |result| %>
<%= result %>
在您的控制器中:
def search
@results= #your search code
render :partial => 'search_results', :content_type => 'text/html'
end
这将获得您想要的功能。请注意,这更像是一个 伪代码 而不是您想要执行的操作的确切实现。你必须填补空白。
希望对您有所帮助!
我正在使用侧边栏搜索并生成列表(在侧边栏内) 我希望在使用侧边栏搜索时主页保持不变。我相信这需要一些 JS,但我对 JS 一无所知。
- 我的导航栏在 div _navbar.html.erb
- 主页基本上是正在生成的任何其他页面
您需要将 AJAX 与 rails 一起使用。以下是它可能对您有用的方法:
在您的表单中添加 :remote => true 和 :'data-update-target' => 'update-container' 来指定您希望搜索结果的位置。您可能希望避免使用 courses_path,而是使用
form_tag({:controller => courses, :action => 'search'}
来直接说明您希望将表单提交到哪里。<%= form_tag courses_path, method: :get, :remote => true ,class: "navbar- form navbar-right", :'data-update-target' => 'update-container' , role: "search" do %> <p> <%= text_field_tag :search, params[:search], class: "form-control" %> <%= submit_tag "Search",:disable_with => 'Please wait...', name: nil, class: "btn btn-default" %> </p> <% end %>
将此添加到您的侧边栏。这是部分结果的来源:
<div id="update-container"></div>
添加 javascript`` 以在请求完成时将其放在应有的位置:
<script> $(function() { $('form[data-update-target]').on('ajax:success', function(evt, data) { var target = $(this).data('update-target'); $('#' + target).html(data); }); });
添加一个名为
_search_results.html.erb
的部分 <- 这就是您的结果所在的位置。<!-- arbitrary code --> <%= @results.each do |result| %> <%= result %>
在您的控制器中:
def search @results= #your search code render :partial => 'search_results', :content_type => 'text/html' end
这将获得您想要的功能。请注意,这更像是一个 伪代码 而不是您想要执行的操作的确切实现。你必须填补空白。
希望对您有所帮助!