Question

In my Rails 3.1 application I have a Jquery dialog that pops up when clicked, and inside that you have a submit button. I have made somewhat an attempt at making this ‘submit’ button ajax. So that when it is clicked it updates the appointment time and date. I have the following code:

<% if @booking.id and current_user.is_booking_manager? %>
<button id="confirm_appointment">
    test confirmation
</button>
<div style="display:none;">
    <div id="confirm_appointment_dialog" title="Test Confirm Booking">
        <%= form_for @booking, :url => booking_confirmation_path(@booking), :remote => true do |f| %>
        <%= f.hidden_field :id %>
        <%= f.datetime_select :confirmed_appointment %>
        <br />
        <b>Clear provisional appointment:</b><%= check_box_tag "make_unexpected" %>
        <br />
        <%= f.submit :class => 'submit_me' %>
        <% end %>
    </div>
</div>
<% end %> 

Application.js

$('.submit_me').bind('change', 
function() {
    $(this).parents('form:first').submit();
}); 

Is there something I am missing

Answer 1

You don’t update your View, after the JS request is processed. First you need to add an id to the HTML-Element you want to update.

Your Pastie had this Code:

<tr>
  <td><%= f.label :confirmed_appointment %></td>
  <td> <% f.hidden_field :confirmed_appointment %>
  <% if @booking.confirmed_appointment %>
  <%= l @booking.confirmed_appointment %>
  <% else %> <em>unconfirmed</em> <% end %> </td>
</tr>

In order to make it easy to reference the part you want to update in JavaScript, let’s add an id to that td.

  <td id="booking-confirmation"> <% f.hidden_field :confirmed_appointment %>

After that you need to create an update.js.erb in your views/ folder. Now you can put the line

  $("#booking-confirmation").html("<%= l @booking.confirmed_appointment %>");

In there, which will look for a field with the id “booking-confirmation” in your HTML and update it.

Lastly, be sure to include

 respond_to do |format|
   format.html
   format.js
 end

In your action, to make the action respond to JS calls.