根据以前的选择字段值筛选选择字段
我是RoR的新手,在应用程序中遇到问题。问题在于基于其上的其他选择字段过滤名为“解决方案”的选择字段。根据以前的选择字段值筛选选择字段
现在,该应用所做的是从BD中检索关于区域,区域,关联,解决方案的所有信息,并使用这些数据填充选择字段。但是用户想要的是,当用户选择区域,区域和关联时,只应该显示关于该区域在该区域关联的解决方案。
编辑:
我快到了!我在我的应用程序中做了很多更改。选择字段由控制器动作new和函数“populate_selects”填充,该函数由参数before_action :popula_selects, only: [:new, :edit]
调用。一个新功能是为了创建通过AJAX调用和升级“解决方案”字段:
Atendments_Controller < ApplicationController
before_action :populate_selects, only: [:new, :edit]
def new
@atend = atendment.new
end
def update_solution #AJAX
@solutions = atendment.joins(:solution).where("atendment_area_id = ? and atendment_region_id = ? and atendment_assoc_id = ?", params[:atendment_area_id], params[:atendment_region_id], params[:atendment_assoc_id])
respond_to do |format|
format.js
end
end
private
def populate_selects
@atendment_area = atendmentArea.where(status: true, user_id: current_user.id)
@atendment_region = atendmentRegion.where(status: true, user_id: current_user.id)
@atendment_assoc = atendmentRegionAssoc.where(status: true, assoc_id: current_user.entidade_id).where(atendment_region_id: @atendment_region.map(&:atendment_region_id))
@solutions = atendment.joins(:solution).where("atendment_area_id = ? and atendment_region_id = ? and atendment_assoc_id = ?", params[:atendment_area_id], params[:atendment_region_id], params[:atendment_region_assoc_id])
end
end
下面,从视图中_form.html.erb代码:
<div class="atendment-form">
<%= form_for :atendment, url: {action: "new"}, html: {method: "get"} do |f| %>
<div class="col-xs-6">
<%= f.select :atendment_area_id, options_for_select(@atendment_area.collect { |c| [ c.atendment_area.name, c.id ] }, 1), {:prompt=>"Área"}, { :class => 'form-control', :required => true, id: 'atendment_atendment_area_id' } %>
</div>
<div class="col-xs-6">
<%= f.select :atendment_region_id, options_for_select(@atendment_region.collect { |c| [ c.atendment_region.name, c.id ] }, 1), {:prompt=>"Região"}, { :class => 'form-control', :required => true, id: 'atendment_atendment_region_id' } %>
</div>
</div>
</div>
<div class="field">
<%= f.select :atendment_assoc_id, options_for_select(@atendment_assoc.collect { |c| [ c.atendment_region.name, c.id ] }, 1), {:prompt=>"Associado"}, { :class => 'form-control', :required => true, id: 'atendment_atendment_assoc_id' } %>
</div>
<div class="field">
<%= f.select :solution_id, options_for_select(@solutions.collect { |solution| [solution.name, solution.id] }, 0), {:prompt=>"Solução"}, { :class => 'form-control', :required => true, id: 'atendment_solution_id' } %>
</div>
</div>
干线新功能:
resources :atendments do
collection do
get :update_solution
end
end
AJAX功能,调用 “update_solution” 并重置解决方案字段的值(应用程序/资产/ JavaScript的/ atendment.js.coffee):
show_solutions = ->
$.ajax 'update_solution',
type: 'GET'
dataType: 'script'
data: {
atendment_area_id: $("#atendment_atendment_area_id").val()
atendment_region_id: $("#atendment_atendment_region_id").val()
atendment_assoc_id: $("#atendment_atendment_assoc_id").val()
}
error: (jqXHR, textStatus, errorThrown) ->
console.log("AJAX Error: #{textStatus}")
success: (data, textStatus, jqXHR) ->
console.log("OK!")
$(document).ready ->
$('#atendment_atendment_assoc_id').on 'change', ->
show_solutions()
所以,我创建了一个.coffee文件渲染的部分,将返回一个新值“解决方案”领域“选项”标签 (应用程序/视图/ atendment/update_solution.coffee):
$("#atendment_solution_id").empty()
.append("<%= escape_javascript(render :partial => 'solution') %>")
并且,最后但并非最不重要的,含部分的HTML代码以上(APP /视图/ atendments/_solution.html.erb)中提到的 “选项” 的标签:
<option value="<%= solution.id %>" selected="selected"><%= solution.nome %></option>
对于任何原因,AJAX功能不会在控制台上打印任何内容(也不会出错ither成功),但它调用update_solution.coffee文件。问题是,由于错误(500内部服务器错误),它不会更新选项值。我不知道我做错了什么。如果有人能帮助我,我很感激。
我解决了这个用下面的代码:
资产/ JS/atendments.js
我改变了代码,因为最后一个有许多错误。
function getAssociated(){
var aau_id = $("#atendment_area_user_id").val()
var aru_id = $("#atendment_region_user_id").val();
$.getJSON("/controllers/atendments_controller/getAssociated/"+aru_id,
function (callback) {
if (callback != "error"){
var assoc = document.getElementById("atendment_region_associated_id");
while (assoc.firstChild) {
assoc.removeChild(assoc.firstChild);
}
var i = Object.keys(callback).length -1;
$("#atendment_region_associated_id").append("<option value=''>Associated</option>");
while (i >= 0) {
$("#atendment_region_associated_id").append("<option value='"+callback[Object.keys(callback)[i]]+"'>"+Object.keys(callback)[i]+"</option>");
i--;
}
}
});
get_solution_type();
}
function get_solution_type() {
var ara_id = $("#atendment_region_associated_id").val();
$.getJSON("/controllers/atendments_controller/getSolution/"+ara_id,
function (callback) {
if (callback != "error"){
var sol = document.getElementById("atendment_solution_id");
while (sol.firstChild) {
sol.removeChild(sol.firstChild);
}
var i = Object.keys(callback).length-1;
while (i >= 0) {
$("#atendment_solution_id").append("<option value='"+callback[Object.keys(callback)[i]]+"'>"+Object.keys(callback)[i]+"</option>");
i--;
}
}
});
var aau_id = $("#atendment_area_user_id").val();
$.getJSON("/controllers/atendments_controller/getType/"+aau_id,
function (callback) {
if (callback != "erro"){
var type = document.getElementById("atendment_type_id");
while (type.firstChild) {
type.removeChild(type.firstChild);
}
var i = 0;
while (i < (Object.keys(callback).length)) {
$("#atendment_type_id").append("<option value='"+callback[Object.keys(callback)[i]]+"'>"+Object.keys(callback)[i]+"</option>");
i++;
}
}
});
}
的$.getJSON
执行AJAX请求与响应JSON和更新选择字段的选项标签的控制器。
控制器/ atendments_controller
我只是从数据库取回数据并返回为JSON
def getAssociated
aru_id = params[:atendment_region_user_id]
aras = AtendmentRegionAssociated.where("SQL here")
if aras.present?
render :json => aras.to_json
else
render :json => "error".to_json
end
end
def getSolution
ara_id = params[:atendment_region_associated_id]
sol = Solution.where("SQL here")
if sol.present?
render :json => sol.to_json
else
render :json => "error".to_json
end
end
def getType
aau_id = params[:atendment_area_user_id]
type = AtendmentType.where("SQL here")
if type.present?
render :json => type.to_json
else
render :json => "error".to_json
end
end
更新routes
,把JavaScript函数中选择字段onchange
财产。现在一切工作正常:D
我会用JS做这件事,可以想想其他任何方式。
由onchange调用的函数,用于更改每个需要隐藏或显示的字段的显示属性。