javascript function not working in jquery-ajax rails validation error displays

Question

I have a Jquery UI Datepicker function globally to use the calendar in all the pages. I created a seperate javascript page like the following:

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

I just post my datepicker field in my view,

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

I call the above function to a seperate javascript file.

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

It is working fine when the page loads, edit and new action. But When the rails validation error displays the datepicker function not working. It showing the blank text_field.

FYI: It's an ajax page and the new, create, update and edit action is working as ajax pages. So, I added remote: true in my form and i have new.js, edit.js, create.js and update.js

It's my 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

Thanks

Answer 1

You're creating the datepickers like so:

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

However, this will only run if the AJAX call is successful, so you'll need a handler for errors as well.

It appears you're using namespaced events and I don't see that referenced in the jQuery documentation. You'll probably want to use the global ajax events (e.g., ajaxComplete, ajaxError, etc.).

You'll either need to attach a separate handler for ajaxError to handle the error case or just use the ajaxComplete event in place of ajax:success. Unless you need specific error handling, ajaxComplete is the way to go, since you will only need to write/maintain one handler. As of jQuery 1.8, Global events are triggered on the document. You'll need to attach your listener to the document without any other selectors:

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

You can read more about the jQuery AJAX events on the Ajax Events page.