5

我有一个全局的 Jquery UI Datepicker 函数来使用所有页面中的日历。我创建了一个单独的 javascript 页面,如下所示:

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

我只是在我的视图中发布我的日期选择器字段,

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

我将上述函数调用到一个单独的 javascript 文件中。

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

当页面加载、编辑和新操作时,它工作正常。但是当 rails 验证错误显示 datepicker 函数不起作用时。它显示空白text_field

仅供参考:这是一个 ajax 页面,该new, create, update and edit操作作为ajax页面工作。所以,我remote: true在我的表格中添加了,我有new.js, edit.js, create.js and update.js

这是我的控制器,

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

谢谢

4

1 回答 1

5

您正在像这样创建日期选择器:

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

但是,这只会在 AJAX 调用成功时运行,因此您还需要一个错误处理程序。

看来您正在使用命名空间事件,而我在 jQuery 文档中没有看到该事件的引用。您可能希望使用全局 ajax 事件(例如,ajaxComplete、ajaxError 等)。

您要么需要附加一个单独的处理程序ajaxError来处理错误情况,要么只使用ajaxComplete事件代替ajax:success. 除非您需要特定的错误处理,否则这ajaxComplete是可行的方法,因为您只需要编写/维护一个处理程序。从 jQuery 1.8 开始,全局事件在document. 您需要在没有任何其他选择器的情况下将您的侦听器附加到文档:

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

您可以在Ajax 事件页面上阅读有关 jQuery AJAX 事件的更多信息。

于 2013-07-11T14:05:36.333 回答