Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question

This question has an open bounty worth +100 reputation from Vinay ending in 2 days.

The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns.

1 Answer

up vote 0 down vote

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.

share|improve this answer
I tried with ajax:complete, ajax:error, ajax:success no luck. Thanks. – Vinay Jul 12 at 8:22
I updated to use the global events instead of namespaced events. Give that a try and see if it works. – cfs 2 days ago
ajax:complete not working mate. May be I need to try to attach a separate handler for ajaxError. Please guide me to do that. – Vinay yesterday
Did you try ajaxComplete? That's different than ajax:complete. – cfs 23 hours ago
I also updated the way the handler is registered. See if these updates help you. – cfs 23 hours ago
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.