Rails 4 + simple_form e jQuery UI. Datepicker non funziona tramite turbolinks

Question

ho questa forma che chiama datepicker:

... 
<%= f.input :expiration_date, as: :datepicker, required: false %> 
... 

Simple_form involucro: app/ingressi/datepicker_input.rb

class DatepickerInput < SimpleForm::Inputs::Base 
    def input 
    @builder.text_field(attribute_name, input_html_options) + \ 
    @builder.hidden_field(attribute_name, { :class => attribute_name.to_s + "-alt"}) 
    end 
end 

Quando la pagina viene caricata da zero ($ (documento) .ready evento), viene generato il seguente html:

<input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" type="text"> 

Tuttavia, quando la pagina viene caricata con turbolinks (dalla barra laterale di navigazione "pagina: load" dell'evento), il rendering HTML è la seguente:

<input class="datepicker optional form-control" id="order_expiration_date" name="order[expiration_date]" type="text"> 

Naturalmente, posso semplicemente aggiungo hasDatepicker classe in .html.erb o nel file application.js, ma mi chiedo se è possibile raggiungerlo con la funzionalità Rails.

Answer 1

ho finalmente trovato una soluzione adeguata:

app/ingressi/datepicker_input.rb è lasciato lo stesso, l'involucro funziona bello.

attività/javascript/application.js

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap.js 
//= require_tree . 

$(document).on("page:load ready", function(){ 
    $("input.datepicker").datepicker(); 
}); 

dal: datepicker tipo di ingresso aggiunge ".datepicker" classe per il formato HTML, E 'quanto basta per legare datepicker() per tutti gli elementi con quella classe. Fa il trucco con la minor quantità di codice.

È importante specificare "input.datepicker" poiché la classe ".datepicker" viene aggiunta sia all'etichetta che ai tag di input.

turbolinks getta una pagina: evento di caricamento, così ho gestore aggiunto per entrambi i casi - quando la pagina viene caricata con turbolinks, e quando viene caricato da zero (refresh finestra, collegamento salvato nei preferiti, ecc)

ora il seguente .html.erb è reso come mi aspetto:

<%= f.input :expiration_date, as: :datepicker, required: false, 
    :placeholder => 'Select date', input_html: {class: "form-control"}, 
    label: "Expiration date: " %> 

uscita:

<div class="control-group datepicker optional order_expiration_date"> 
    <label class="datepicker optional control-label" for="order_expiration_date">Expiration date: </label> 
    <div class="controls"> 
    <input class="datepicker optional form-control hasDatepicker" id="order_expiration_date" name="order[expiration_date]" placeholder="Select date" type="text"> 
    <input class="expiration_date-alt" id="order_expiration_date" name="order[expiration_date]" type="hidden"> 
    </div> 
</div> 

Answer 2

Prova questa:

<%= f.text_field :expiration_date, as: :datepicker, :placeholder => 'Select Expiration Date' %> 

Javascript

$(document).ready(function() { 
    $('#order_expiration_date').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '-70:-18' 
    }); 
    }); 

app/beni/javascript/applicazione.js dovrebbe essere

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require jquery.ui.all 
//= require turbolinks 

Answer 3

le seguenti opere per me in simple_form e jquery-ui:

JS:

$('input#date_field').datepicker();

forma:

<%= f.text_field :expiration_date, :placeholder => 'Select Date' %>

Quindi senza as: :datepicker.