JavaScript-Funktion funktioniert nicht in jquery-AJAX-Schienen Validierung Fehleranzeigen

Question

Ich habe eine Jquery UI Datepicker-Funktion global, um den Kalender auf allen Seiten zu verwenden. habe ich eine separate JavaScript-Seite wie folgt aus:

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); 

ich nur meiner Meinung nach meine picker Feld posten,

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

ich die obige Funktion zu einem separaten Aufruf Javascript-Datei.

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

Es funktioniert gut, wenn die Seite geladen, bearbeiten und neue Aktion. Aber wenn der Validierungsfehler der Schienen anzeigt, funktioniert die Datepicker-Funktion nicht. Es zeigt den leeren text_field.

FYI: Es ist eine Ajax-Seite und die new, create, update and edit Aktion arbeitet als ajax Seiten. Also, habe ich remote: true in meiner Form, und ich habe new.js, edit.js, create.js and update.js

Es ist mein 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 

Dank

Answer 1

Sie erstellen das Kalender wie so:

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

jedoch Dies wird nur ausgeführt, wenn der AJAX-Aufruf erfolgreich ist. Daher benötigen Sie auch einen Handler für Fehler.

Es scheint, dass Sie namespaced Ereignisse verwenden, und ich sehe nicht, dass in der jQuery-Dokumentation verwiesen wird. Wahrscheinlich möchten Sie die globalen AJAX-Ereignisse verwenden (z. B. ajaxComplete, ajaxError usw.).

Sie müssen entweder einen separaten Handler für ajaxError anhängen, um den Fehlerfall zu behandeln, oder einfach das -Ereignis anstelle von ajax:success verwenden. Sofern Sie keine spezifische Fehlerbehandlung benötigen, ist ajaxComplete der Weg zu gehen, da Sie nur einen Handler schreiben/pflegen müssen. Ab jQuery 1.8 werden globale Ereignisse auf dem document ausgelöst. Sie müssen Ihre Zuhörer auf das Dokument ohne weitere Selektoren befestigen:

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

Sie mehr über die jQuery AJAX Veranstaltungen auf der Ajax Events Seite lesen kann.