0
私はvouchers#index.html.erbを持っています。伝票を作成したいと思っています。私は正常に私のフォームをレンダリングすることができますが、私の問題は、私のtypeaheadフィールドが動作していないということです。AJAXレンダリング後に私の先読みフォームフィールドが機能しないのはなぜですか？
私は_formをレンダリングするためにこのボタンを設定している：
<div class='row'>
<%= link_to 'New Voucher', new_voucher_path, id: 'new_voucher_btn', class:'btn btn-md btn-primary', remote: true %>
</div>
マイコントローラー：
def new
@voucher = Voucher.new
@voucher.voucherdetails.build
respond_to do |format|
format.html # new.html.erb
format.json { render json: @voucher }
format.js
end
end
New.js.erb
$('#new_voucher_btn').hide().after('<%= j render("form") %>'); //Hide 'New Voucher' button after clicking.
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy" }); //add the datepicker
Voucher.js
jQuery(function() {
var customers = jQuery.parseJSON(gon.customer_typeahead)
// This shows the Typeahead when typing
$('.search_cst').typeahead({
source: customers,
display: 'name',
val: 'id'
});
//This sets the value of customer
$('#customer_search').on("change", '#voucher_voucherdetails_attributes_0_s002', function() {
if (this.value != '') {
var current =$('.search_cst').typeahead("getActive");
if (current) {
$('.search_cst').val(current.name);
$('.search_cst_id').val(current.id);
}
} else {
$('.search_cst').val('');
$('.search_cst_id').val('');
}
});
}); //Function
_form.html.erb（先行入力フィールドのみを含む）
<%= f.fields_for :voucherdetails do |vd| %>
<div class='form-group' id='customer_search' data-provide="typeahead">
<%= vd.label :s002, "Customer:" %>
<%= vd.text_field :s002, class:'search_cst form-control' %>
<%= vd.hidden_field :s002, class: 'search_cst_id' %>
</div>
<% end %>
Aバウチャーhas_many :voucherdetails & accepts_nested_attributes_for :voucherdetails, allow_destroy: :true。
Voucherdetail belongs_to :voucher
私は私が新しいURLバウチャー/にアクセスし、フォームをレンダリングする場合の先行入力が機能することに注意したいと思います。問題は、私がAJAX呼び出しの後に型式を正しく初期化していないということです。
N.B私は前の現像剤（場所における従って奇数命名）からこのコードベースを継承4.0.2 Found Here
bootstrap3-typeahead.js Vを使用しています。