javascript funzione non funziona in jquery-ajax rails errore di validazione display

Question

Ho una funzione Jquery UI Datepicker globalmente per utilizzare il calendario in tutte le pagine. Ho creato una pagina javascript separata come la seguente:

var showDatePickers = function() { 
    $('[data-field-type="date"]').datepicker({ 
    dateFormat: "yy-mm--dd", 
    showOn: "both", 
    buttonImageOnly: true, 
    buttonImage: "/assets/blue-calendar-icon.png", 
    buttonText: "Calendar" 
    }); 
} 

$(showDatePickers); 

Ho appena inserisco il mio campo datepicker a mio avviso,

<div class="field"> 
    <%= f.label :Renewal_Date %> 
    <%= f.text_field :Renewal_Date, readonly: 'readonly', data: {field_type: date}} 
</div> 

io chiamo la funzione di cui sopra ad un file JavaScript separato.

$(function() { 
    if ($('html.asset_contracts').length == 1) { 
    $(document.body).on('ajax:success', '.new_asset_contract, .edit_asset_contract',  showDatePickers); 
    } 
}); 

Funziona correttamente quando la pagina viene caricata, modificata e nuova azione. Ma quando l'errore di validazione dei binari visualizza la funzione datepicker non funzionante. Mostra lo spazio vuoto text_field.

FYI: È una pagina Ajax e l'azione new, create, update and edit funziona come ajax pagine. Così, ho aggiunto remote: true nella mia forma e ho new.js, edit.js, create.js and update.js

E 'il mio controller,

def create 
    @contract = Asset::Contract.new(params[:asset_contract]) 

    respond_to do |format| 
     if @contract.save 
     format.html { redirect_to asset_contracts_path, notice: "Successfully Created" } 
     format.js 
     format.json { render json: @contract, status: :created, location: @contract } 
     else 
     format.html { render action: "new" } 
     format.js 
     format.json { render json: @contract.errors, status: :unprocessable_entity } 
     end 
    end 
    end 



    def update 
    @contract = Asset::Contract.find(params[:id]) 

    respond_to do |format| 
     if @contract.update_attributes(params[:asset_contract]) 
     format.html { redirect_to asset_contracts_path, notice: "Succesfully Updated" } 
     format.js 
     format.json { head :no_content } 
     else 
     format.html { render action: "edit" } 
     format.js 
     format.json { render json: @contract.errors, status: :unprocessable_entity } 
     end    
    end 
    end 

Grazie

Answer 1

Stai creando i datepickers in questo modo:

$(document.body).on('ajax:success', '.new_asset_contract, .edit_asset_contract',  showDatePickers); 

Tuttavia, questo verrà eseguito solo se la chiamata AJAX avrà successo, quindi avrai bisogno di un gestore per gli errori.

Sembra che si stiano utilizzando gli eventi con nomi assegnati e non vedo questo a cui si fa riferimento nella documentazione di jQuery. Probabilmente vorrai utilizzare gli eventi Ajax globali (ad es. AjaxComplete, ajaxError, ecc.).

È necessario associare un gestore separato per ajaxError per gestire il caso di errore oppure utilizzare l'evento ajaxComplete al posto di ajax:success. A meno che non sia necessario un trattamento degli errori specifico, ajaxComplete è la strada da percorrere, dal momento che è sufficiente scrivere/gestire un gestore. A partire da jQuery 1.8, gli eventi globali sono attivati ​​su document. Avrete bisogno di collegare il vostro ascoltatore al documento senza altri selettori:

$(document).on('ajaxComplete', showDatePickers); 

Si può leggere di più sugli eventi jQuery AJAX nella pagina Ajax Events.