Chức năng javascript không hoạt động trong lỗi xác nhận đường ray jquery-ajax hiển thị

Question

Tôi có chức năng Jquery UI Datepicker trên toàn cầu để sử dụng lịch trong tất cả các trang. Tôi tạo ra một riêng biệt trang javascript như sau:

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

tôi chỉ gửi lĩnh vực datepicker tôi theo quan điểm của tôi,

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

Tôi gọi hàm trên vào một tập tin javascript riêng biệt.

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

Làm việc tốt khi tải trang, chỉnh sửa và thực hiện hành động mới. Nhưng Khi lỗi xác nhận đường ray hiển thị hàm datepicker không hoạt động. Nó hiển thị trống text_field.

FYI: Đây là trang ajax và hành động new, create, update and edit đang hoạt động như ajax trang. Vì vậy, tôi đã thêm remote: true trong hình thức của tôi và tôi có new.js, edit.js, create.js and update.js

Đó là điều khiển của tôi,

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 

Cảm ơn

Answer 1

Bạn đang tạo datepickers như vậy:

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

Tuy nhiên, điều này sẽ chỉ chạy nếu cuộc gọi AJAX thành công, vì vậy bạn cũng sẽ cần một trình xử lý cho các lỗi.

Dường như bạn đang sử dụng các sự kiện không gian tên và tôi không thấy sự kiện được tham chiếu trong tài liệu jQuery. Có thể bạn sẽ muốn sử dụng các sự kiện ajax toàn cầu (ví dụ: ajaxComplete, ajaxError, v.v.).

Bạn cần phải đính kèm trình xử lý riêng cho ajaxError để xử lý trường hợp lỗi hoặc chỉ sử dụng sự kiện ajaxComplete thay cho ajax:success. Trừ khi bạn cần xử lý lỗi cụ thể, ajaxComplete là cách để đi, vì bạn sẽ chỉ cần viết/duy trì một trình xử lý. Kể từ jQuery 1.8, các sự kiện toàn cầu được kích hoạt trên document. Bạn sẽ cần phải đính kèm nghe của bạn vào tài liệu mà không cần bất kỳ selectors khác:

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

Bạn có thể đọc thêm về các sự kiện jQuery AJAX trên trang Ajax Events.