如何在javascript中使用ruby代码 [英] How use a ruby code inside the javascript
问题描述
我正在实现一个实时搜索,其中包含一个下拉列表,其中包含多个要过滤的字段,它仅以一个搜索字段开始,当用户单击时,下拉菜单选择要搜索的内容,并添加一个按钮以添加更多过滤条件按钮,它将生成一个新字段,如下所示:
I am implementing a live search with a drop down containing multiple fields to filter through.It starts with only one search field, a drop down to select what to be searched for and a button to add more filters, when the user click the button, it generate a new field like this:
此图像示例使用JavaScript内部的html进行了硬编码.问题是我将在很多视图中使用它,因此我需要像以前使用Ruby生成第一搜索字段的代码一样,使其具有动态性.我尝试这样做,但没有成功.
This image sample was done hard coded with the html inside the JavaScript. The problem is that I will use it in a lot of views so I need it to be dynamic as the code I previously done with Ruby to generate the first search field. I tried doing this way, but no success was achieved.
live_search.js.erb
$(function () {
function search() {
$.get(window.location.href, { object_columns: $("select#object_columns").val(), search: $("#search").val() }, null, "script");
};
$("select#object_columns").change(search);
$("input#search").keyup(search);
$('button').on('click',function(){
column = "<%= j render 'shared/search_engine' %>";
$('#search-form').after(column);
});
});
search_engine.html.erb
<div id="search-form">
<%= form_tag do %>
<% valid_column_names = target.column_names.reject{|r| r == "created_at" || r == "updated_at" || r == "slug"} %>
<%= select_tag :object_columns, options_for_select(valid_column_names) %>
<%= text_field_tag :search, '', autocomplete: :off %>
<% end %>
<%= button_tag "+" %>
</div>
我什至试图在单击按钮时在JavaScript中调用搜索表单"来复制代码,但我读到这是不可能的.
I even tried to call the "search-form" in the JavaScript to replicate the code when the button was clicked but I read that it is not possible.
编辑
我按照@ppascualv的建议进行了一些更改,但单击按钮时仍无法渲染并添加另一个"search_engine".我收到一个错误消息,说未定义的方法'render'.
I made some changes as @ppascualv suggested, but I still can't render and add another "search_engine" when I click the button. I am getting an error saying undefined method 'render'.
live_search.js.erb
$(function () {
function search() {
$.get(window.location.href, { object_columns: $("select#object_columns").val(), search: $("#search").val() }, null, "script");
};
$("select#object_columns").change(search);
$("input#search").keyup(search);
$('button').on('click',function(){
$('button').append("<%= escape_javascript(render @search_engine) %>");
});
});
search_engine.html.erb
<div id="search-form">
<%= form_tag({controller: "house_activities", action: "index"}, method: "get", remote: true) do %>
<% valid_column_names = HouseActivity.column_names.reject{|r| r == "created_at" || r == "updated_at" || r == "slug"} %>
<%= select_tag :object_columns, options_for_select(valid_column_names) %>
<%= text_field_tag :search, '', autocomplete: :off %>
<% end %>
<%= button_tag "+" %>
</div>
house_activities_controller.rb
class HouseActivitiesController < ApplicationController
before_action :set_house_activity, only: [:show, :edit, :update, :destroy]
def index
@house_activities = HouseActivity.page(params[:page]).per(5).search_for(params[:object_columns], params[:search])
respond_to do |format|
format.js
format.html
end
end
end
推荐答案
我能够解决我的问题.我发现您无法在资产中渲染事物,也无法在JavaScript文件中使用ruby.我做了一些解决方法,并完成了工作,我使用<script> JavaScript code </script>
语法将JavaScript代码包含在 html.erb 文件中,如下所示:
I was able to solve my problem. I discovered that you can't render things in assets and you can't use ruby inside a JavaScript file. I did some workaround and got it done, I included the JavaScript code inside the html.erb file using the <script> JavaScript code </script>
syntax as shown here:
<script type="text/javascript">
column =
'<%= form_tag({controller: "people", action: "index"}, method: "get", remote: true) do %>' +
'<% valid_column_names = Person.column_names.reject{|r| r == "created_at" || r == "updated_at" || r == "slug"} %>' +
'<%= j (select_tag :object_columns, options_for_select(valid_column_names)) %>' +
'<%= text_field_tag :search, '', autocomplete: :off %>' +
'<% end %>';
$('button').on('click',function(){
$('button').after(column);
});
</script>
因为 select_tag 红宝石行生成了带有很多引号的句子,所以使用的 j 与 escape_javascript 相同,因此使用了格式化句子,以便JavaScript可以正确阅读.
Because the select_tag ruby line generated a sentence with lots of quotation marks, the j used is the same as escape_javascript and it is used to format a sentence so the JavaScript can read it properly.
这篇关于如何在javascript中使用ruby代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!