javascript関数がjquery-ajaxのレール検証エラーで表示されない

Question

すべてのページでカレンダーを使用するために、Jquery UIのDatepicker関数をグローバルに使用しています。私は別々のJavaScriptファイルに上記の関数を呼び出す

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

、私はちょうど私の見解で私のDatePickerのフィールドを投稿

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

： 私は次のように別々のjavascriptのページを作成しました。

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

ページの読み込み、編集、および新しい操作がうまくいきました。しかし、レールの検証エラーが表示されてdatepicker関数が動作していないとき。それはブランクtext_fieldを示しています。

FYI：これはajaxページで、new, create, update and editアクションはajaxページとして機能しています。だから、私は自分のフォームでremote: trueを追加し、私はそれはあなたがそうのようなdatepickers作成している、

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 

おかげ

Answer 1

私のコントローラだnew.js, edit.js, create.js and update.js

を持っています、しかし

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

をこれはAJAX呼び出しが成功した場合にのみ実行されるため、エラーのハンドラも必要になります。

名前空間のイベントを使用しているようですが、jQueryのマニュアルで参照されていないようです。グローバルなajaxイベント（たとえば、ajaxComplete、ajaxErrorなど）を使用することをお勧めします。

エラーケースを処理するためにajaxErrorの別のハンドラを添付するか、ajax:successの代わりにajaxCompleteイベントを使用するだけです。特定のエラー処理が必要な場合を除き、ajaxCompleteは、1つのハンドラを作成/保守するだけで済むので、移動する方法です。 jQuery 1.8以降、グローバルイベントはdocumentでトリガーされます。あなたは、他のセレクタなしで文書に自分のリスナーを添付する必要があります：

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

あなたはAjax EventsページでjQueryのAJAXイベントについての詳細を読むことができます。