title: Handling js.erb files in Rails 3 - The Sequel
body: <p>I finally got the Rails application CRUD converted to AJAX, in that there is only one page refresh and all controller actions:  Create,Delete and Edit/ Update are driven by AJAX. Quite neat really. There are two residual problems:</p>
  
  <ul>
  <li><p>I get stuck in Update mode on the top of the screen _form partial because I cannot change the mode of the submit button, I want it to be Create after every action except Edit. How do I do this - is it through changing the screen with JQuery or some controller action.</p></li>
  <li><p>The second problem looks far simpler. When I leave required fields blank the app throws an error condition, as it should. In the relevant js.erb files, create.js,erb and update.js.erb the errors path is taken, but no errors appear on screen.</p></li>
  </ul>
  
  <p>I have listed out the relevant files below- the Customers Controller, along with the various html.erb and js.erb files under Customer views.</p>
  
  <p>Customers Controller :</p>
  
  <pre><code> class CustomersController &lt; ApplicationController
  
    before_filter :load
  
    def load
      @customers = Customer.all
      @customer  = Customer.new
    end
  
    # Display composite form used for AJAX operations.
  
    def index   
    end
  
  
  
  
    # This method implements customer create action for AJAX request.
  
    def create  
      @customer = Customer.new(params[:customer])
      if @customer.save
        flash[:notice] = "Customer Record Created."
        @customers = Customer.all
        respond_to do |format|
          format.js
        end
      end 
  
    end 
  
  
    # This method get customer for editing using AJAX.
  
    def edit
      @customer = Customer.find(params[:id])
  
      respond_to do |format|
        format.js
      end
    end
  
    # This method implements customer update from AJAX form.
  
    def update
      @customer = Customer.find(params[:id])
      if @customer.update_attributes(params[:customer])
        flash[:notice] = "Customer Record Updated."
        @customers = Customer.all
        respond_to do |format|
          format.js
        end 
      end
    end  
  
    # This method implements customer delete from AJAX form.
    def destroy
      @customer = Customer.find(params[:id])
      @customer.destroy
      flash[:notice] = "Customer Record Deleted"
      @customers = Customer.all
      respond_to do |format|
        format.js
      end
  
    end
  
    # This method lists all customers on file. 
  
    def getcustsjson
      render :json =&gt; @customers
    end
  
    # This method lists all the books purchased by a particular customer.
  
    def getbooksjson
  
      @customer = Customer.find(params[:id]) 
      @order = @customer.order
      @orderitems = Orderitem.find_all_by_order_id(@order)
      @book = Book.find_all_by_id(@orderitems)
  
      render :json =&gt; @book 
  
    end 
  
  end
  </code></pre>
  
  <p>Index Form:</p>
  
  <pre><code>&lt;div id="customer_form"&gt;&lt;%= render 'form' %&gt;&lt;/div&gt;
  &lt;div id="customers_list"&gt;&lt;%= render 'customers' %&gt;&lt;/div&gt;
  </code></pre>
  
  <p>_Form Partial with submit button :</p>
  
  <pre><code>&lt;%= form_for(@customer, :remote =&gt; true) do |f| %&gt;
  
  
    &lt;div id="customer_errors" style="display:none"&gt;&lt;/div&gt;
  
    &lt;div class="field"&gt;
      &lt;%= f.label :firstname %&gt;
      &lt;%= f.text_field :firstname %&gt;
      &lt;%= f.label :lastname %&gt;
      &lt;%= f.text_field :lastname %&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;%= f.label :email %&gt;
      &lt;%= f.text_field :email %&gt;
      &lt;%= f.label :phone %&gt;
      &lt;%= f.text_field :phone %&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;%= f.label :password %&gt;
      &lt;%= f.text_field :password %&gt;
      &lt;%= f.label :address_id %&gt;
      &lt;%= f.text_field :address_id %&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;%= f.submit %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>_Customers Partial :</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Firstname&lt;/th&gt;
      &lt;th&gt;Lastname&lt;/th&gt;
      &lt;th&gt;Email&lt;/th&gt;
      &lt;th&gt;Phone&lt;/th&gt;
      &lt;th&gt;Password&lt;/th&gt;
      &lt;th&gt;Address&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
  
  &lt;% @customers.each do |customer| %&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;%= customer.firstname %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= customer.lastname %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= customer.email %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= customer.phone %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= customer.password %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= customer.address_id %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= link_to 'Edit', edit_customer_path(customer), :remote =&gt; true %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= link_to 'Destroy', customer, :remote =&gt; true, :confirm =&gt; 'Are you sure?', :method =&gt; :delete %&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;% end %&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Create.js.erb file with errors code :</p>
  
  <pre><code>&lt;% if @customer.errors.any? -%&gt; 
  
     /* Hide the Flash Notice div */
     $("#flash_notice").hide(300);
  
     /* Update the html of the div customer_errors with the new one */
     $("#customer_errors").html("&lt;% @customer.errors.full_messages.each do |msg| %&gt;
                                &lt;li&gt;&lt;%= escape_javascript ( msg ) %&gt;&lt;/li&gt; 
                                &lt;% end %&gt;");
  
     /* Show the div customer_errors */
     $("#customer_errors").show(300);
  
  &lt;% else -%&gt;
  
     /* Hide the div customer_errors */
     $("#customer_errors").hide(300);
  
     /* Update the html of the div flash_notice with the new one */
     $("#flash_notice").html("&lt;%= flash[:notice] %&gt;");
  
     /* Show the flash_notice div */
     $("#flash_notice").show(300);
  
     /* Clear the entire form */
     $(":input:not(input[type=submit])").val("");
  
     /* Replace the html of the div customers_list with the updated new one */
     $("#customers_list").html("&lt;%=  escape_javascript render('customers') %&gt;");
  
     &lt;% end %&gt;
  </code></pre>
  
  <p>Edit.js.erb code:</p>
  
  <pre><code>$("#customer_form").html("&lt;%= escape_javascript render('form') %&gt;");
  </code></pre>
  
  <p>Update.js.erb code with errors code:</p>
  
  <pre><code>&lt;% if @customer.errors.any? -%&gt;
     $("#flash_notice").hide(300);
     $("#customer_errors").html("&lt;% @customer.errors.full_messages.each do |msg| %&gt;
                                &lt;li&gt;&lt;%= escape_javascript ( msg ) %&gt;&lt;/li&gt; 
                                &lt;% end %&gt;");
     $("#customer_errors").show(300);
  &lt;% else -%&gt;
     $("#customer_errors").hide(300);
     $("#flash_notice").html("&lt;%= flash[:notice] %&gt;");
     $(":input:not(input[type=submit])").val("");
     $("#customer_form").html("&lt;%= escape_javascript render('form') %&gt;");
     $("#customers_list").html("&lt;%= escape_javascript render('customers') %&gt;");
  &lt;% end %&gt;
  </code></pre>
  
  <p>and finally the Destroy.js.erb which I need to reset to create mode after execution :</p>
  
  <pre><code>$("#customer_errors").hide(300);
  $("#flash_notice").html("&lt;%= flash[:notice] %&gt;");
  $("#flash_notice").show(300);
  $("#customers_list").html("&lt;%= escape_javascript render('customers') %&gt;");
  
  
  
  $("#customer_form").html("&lt;%= escape_javascript render('form') %&gt;");
  </code></pre>
  
  <p>If anything else is needed - please ask.</p>
  
  <p>EDIT :</p>
  
  <p>I now have a further problem in that the Edit action does not work properly. Looking at the Log the transaction is posted properly, but the response leaves the top of the form unchanged, rather than displaying the details of the record to be updated. I have pasted in the latest controller code.</p>
  
  <p>EDIT  II :</p>
  
  <p>The problem now seems to be that the DOM updates for the customer_errors and customer_form divs are not being processed. In contrast all updates to the customer_list  div get processed fine. I have included below the respone content for both types of message , along with the source listing from the browser, showing the arious divs.</p>
  
  <p>The source from the browser is :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;OnlineBookStore&lt;/title&gt;
    &lt;link href="/stylesheets/scaffold.css?1323327452" media="screen" rel="stylesheet" type="text/css" /&gt;
    &lt;script src="/javascripts/jquery.js?1323855673" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/javascripts/jquery-ui.js?1323855673" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/javascripts/jquery_ujs.js?1323855673" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/javascripts/application.js?1323327452" type="text/javascript"&gt;&lt;/script&gt;
  
    &lt;meta name="csrf-param" content="authenticity_token"/&gt;
  &lt;meta name="csrf-token" content="CROTodz0FR1ZJpl+Lp4xL0fh6Dx8ydu6Ge5OBSV23g4="/&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="flash_notice" style="display:none"&gt;&lt;/div
  
  &lt;div id="customer_form"&gt;
  
  
  &lt;form accept-charset="UTF-8" action="/customers" class="new_customer" data-remote="true" id="new_customer" method="post"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token" type="hidden" value="CROTodz0FR1ZJpl+Lp4xL0fh6Dx8ydu6Ge5OBSV23g4=" /&gt;&lt;/div&gt;
  
    &lt;div id="customer_errors" style="display:none"&gt;&lt;/div&gt;
  
    &lt;div class="field"&gt;
  
      &lt;label for="customer_firstname"&gt;Firstname&lt;/label&gt;
      &lt;input id="customer_firstname" name="customer[firstname]" size="30" type="text" /&gt;
      &lt;label for="customer_Lastname"&gt;Lastname&lt;/label&gt;
      &lt;input id="customer_lastname" name="customer[lastname]" size="30" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="customer_email"&gt;Email&lt;/label&gt;
  
      &lt;input id="customer_email" name="customer[email]" size="30" type="text" /&gt;
      &lt;label for="customer_phone"&gt;Phone&lt;/label&gt;
      &lt;input id="customer_phone" name="customer[phone]" size="30" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="field"&gt;
      &lt;label for="customer_password"&gt;Password&lt;/label&gt;
      &lt;input id="customer_password" name="customer[password]" size="30" type="text" /&gt;
      &lt;label for="customer_address_id"&gt;Address&lt;/label&gt;
  
      &lt;input id="customer_address_id" name="customer[address_id]" size="30" type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;input id="customer_submit" name="commit" type="submit" value="Create Customer" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;&lt;/div&gt;
  &lt;div id="customers_list"&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;Firstname&lt;/th&gt;
  
      &lt;th&gt;Lastname&lt;/th&gt;
      &lt;th&gt;Email&lt;/th&gt;
      &lt;th&gt;Phone&lt;/th&gt;
      &lt;th&gt;Password&lt;/th&gt;
      &lt;th&gt;Address&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
  
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;Jonathan &lt;/td&gt;
      &lt;td&gt;McCarthy&lt;/td&gt;
      &lt;td&gt;jonathan.mccarthy@ncirl.ie&lt;/td&gt;
  
      &lt;td&gt;083 4342009&lt;/td&gt;
      &lt;td&gt;letmeinsoon&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/1/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/1" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;Joseph&lt;/td&gt;
      &lt;td&gt;McGouran&lt;/td&gt;
      &lt;td&gt;joe_mcgouran@yahoo.ie&lt;/td&gt;
      &lt;td&gt;086 2210662&lt;/td&gt;
      &lt;td&gt;accesssought&lt;/td&gt;
  
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/3/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/3" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Marie&lt;/td&gt;
      &lt;td&gt;McGouran&lt;/td&gt;
  
      &lt;td&gt;mariemcgouran@yahoo.co.uk&lt;/td&gt;
      &lt;td&gt;2988858&lt;/td&gt;
      &lt;td&gt;dontmesswithme&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/4/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/4" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Stephen &lt;/td&gt;
      &lt;td&gt;McGouran&lt;/td&gt;
      &lt;td&gt;stephenmcgouran@gmail.com&lt;/td&gt;
      &lt;td&gt;2988858&lt;/td&gt;
      &lt;td&gt;whogoesthere&lt;/td&gt;
  
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/7/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/7" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Cathy &lt;/td&gt;
      &lt;td&gt;McGouran&lt;/td&gt;
  
      &lt;td&gt;cathymcgouran@gmail.com&lt;/td&gt;
      &lt;td&gt;2988858&lt;/td&gt;
      &lt;td&gt;openthedoor&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/8/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/8" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Peter &lt;/td&gt;
      &lt;td&gt;McGouran&lt;/td&gt;
      &lt;td&gt;petermcgouran@gmail.com&lt;/td&gt;
      &lt;td&gt;74931548&lt;/td&gt;
      &lt;td&gt;open sesame&lt;/td&gt;
  
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/9/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/9" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Gary&lt;/td&gt;
      &lt;td&gt;McGouran&lt;/td&gt;
  
      &lt;td&gt;garymcgouran@gmail.com&lt;/td&gt;
      &lt;td&gt;5566779824&lt;/td&gt;
      &lt;td&gt;pilotgogo&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/11/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/11" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Matthew&lt;/td&gt;
      &lt;td&gt;Busby&lt;/td&gt;
      &lt;td&gt;mattbusby@gmail.com&lt;/td&gt;
      &lt;td&gt;76588888&lt;/td&gt;
      &lt;td&gt;babesteam&lt;/td&gt;
  
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/15/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/15" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;John &lt;/td&gt;
      &lt;td&gt;Beales&lt;/td&gt;
  
      &lt;td&gt;johnbeales@yahoo.com&lt;/td&gt;
      &lt;td&gt;9988664433&lt;/td&gt;
      &lt;td&gt;russiantripper&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/20/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/20" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Brian&lt;/td&gt;
      &lt;td&gt;Wade&lt;/td&gt;
      &lt;td&gt;bbwade@gmail.com&lt;/td&gt;
      &lt;td&gt;9999998888&lt;/td&gt;
      &lt;td&gt;wadeoff&lt;/td&gt;
  
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/30/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/30" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Yasser&lt;/td&gt;
      &lt;td&gt;Arafat&lt;/td&gt;
  
      &lt;td&gt;yasser@Gmail.com&lt;/td&gt;
      &lt;td&gt;9999999-999&lt;/td&gt;
      &lt;td&gt;speaksoftly my friend&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/31/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/31" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;MIchael &lt;/td&gt;
      &lt;td&gt;Sweeney&lt;/td&gt;
      &lt;td&gt;mick@ntma.com&lt;/td&gt;
      &lt;td&gt;456278&lt;/td&gt;
      &lt;td&gt;mickn&lt;/td&gt;
  
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/35/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/35" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;MIchael&lt;/td&gt;
      &lt;td&gt;Semple&lt;/td&gt;
  
      &lt;td&gt;mibksemp@gmail.com&lt;/td&gt;
      &lt;td&gt;0044897345&lt;/td&gt;
      &lt;td&gt;micko&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/36/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/36" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Harry&lt;/td&gt;
      &lt;td&gt;Potter&lt;/td&gt;
      &lt;td&gt;harrypot@gmail.com&lt;/td&gt;
      &lt;td&gt;086332123&lt;/td&gt;
      &lt;td&gt;wizard&lt;/td&gt;
  
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/39/edit" data-remote="true"&gt;Edit&lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;a href="/customers/39" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow"&gt;Destroy&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;/div&gt;
  
  
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html
  </code></pre>
  
  <p>The JS sent from the server for error messages is shown below. Nothing happens to the customer_errors div:</p>
  
  <pre><code>   /* Hide the Flash Notice div */
     /* Update the html of the div customer_errors with the new one */
     /* Show the div customer_errors */
  
     $("#flash_notice").hide(300);
     $("#customer_errors").html(
                              &lt;li&gt;Phone can\'t be blank&lt;/li&gt;
  
                              &lt;li&gt;Password can\'t be blank&lt;/li&gt;
  
                              &lt;li&gt;Address can\'t be blank&lt;/li&gt;
                              );
     $("#customer_errors").show(300);
  </code></pre>
  
  <p>The JS sent from the server for the edit action is as follows. Basically I cant seem to find out in firebug whether there is some sort of error in Div update string:</p>
  
  <pre><code>$("#customer_form").html("\n&lt;form accept-charset=\"UTF-8\" action=\"/customers/4\" class=\"edit_customer\" data-remote=\"true\" id=\"edit_customer_4\" method=\"post\"&gt;&lt;div style=\"margin:0;padding:0;display:inline\"&gt;&lt;input name=\"utf8\" type=\"hidden\" value=\"&amp;#x2713;\" /&gt;&lt;input name=\"_method\" type=\"hidden\" value=\"put\" /&gt;&lt;input name=\"authenticity_token\" type=\"hidden\" value=\"mOAikAY8A22vPmNYzLWWm64lPU22imzIA/jOcXQVhAw=\" /&gt;&lt;\/div&gt;\n\n  &lt;div id=\"customer_errors\" style=\"display:none\"&gt;&lt;\/div&gt;\n\n  &lt;div class=\"field\"&gt;\n    &lt;label for=\"customer_firstname\"&gt;Firstname&lt;\/label&gt;\n    &lt;input id=\"customer_firstname\" name=\"customer[firstname]\" size=\"30\" type=\"text\" value=\"Marie\" /&gt;\n    &lt;label for=\"customer_Lastname\"&gt;Lastname&lt;\/label&gt;\n    &lt;input id=\"customer_lastname\" name=\"customer[lastname]\" size=\"30\" type=\"text\" value=\"McGouran\" /&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"field\"&gt;\n    &lt;label for=\"customer_email\"&gt;Email&lt;\/label&gt;\n    &lt;input id=\"customer_email\" name=\"customer[email]\" size=\"30\" type=\"text\" value=\"mariemcgouran@yahoo.co.uk\" /&gt;\n    &lt;label for=\"customer_phone\"&gt;Phone&lt;\/label&gt;\n    &lt;input id=\"customer_phone\" name=\"customer[phone]\" size=\"30\" type=\"text\" value=\"2988858\" /&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"field\"&gt;\n    &lt;label for=\"customer_password\"&gt;Password&lt;\/label&gt;\n    &lt;input id=\"customer_password\" name=\"customer[password]\" size=\"30\" type=\"text\" value=\"dontmesswithme\" /&gt;\n    &lt;label for=\"customer_address_id\"&gt;Address&lt;\/label&gt;\n    &lt;input id=\"customer_address_id\" name=\"customer[address_id]\" size=\"30\" type=\"text\" value=\"1\" /&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"actions\"&gt;\n    &lt;input id=\"customer_submit\" name=\"commit\" type=\"submit\" value=\"Update Customer\" /&gt;\n  &lt;\/div&gt;\n&lt;\/form&gt;");
  </code></pre>
  
  <p>This is the JS generated after a successful new record. IT works :</p>
  
  <pre><code>   /* Hide the div customer_errors */
     /* Update the html of the div flash_notice with the new one */
     /* Clear the form */
     /* Replace the html of the div customers_list with the updated one */
  
     $("#customer_errors").hide(300);  
     $("#flash_notice").html("Customer Record Created.");   
     $("#flash_notice").show(300);   
     $(":input:not(input[type=submit])").val("");  
     $("#customers_list").html("\n&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Firstname&lt;\/th&gt;\n    &lt;th&gt;Lastname&lt;\/th&gt;\n    &lt;th&gt;Email&lt;\/th&gt;\n    &lt;th&gt;Phone&lt;\/th&gt;\n    &lt;th&gt;Password&lt;\/th&gt;\n    &lt;th&gt;Address&lt;\/th&gt;\n    &lt;th&gt;&lt;\/th&gt;\n    &lt;th&gt;&lt;\/th&gt;\n    &lt;th&gt;&lt;\/th&gt;\n  &lt;\/tr&gt;\n\n  &lt;tr&gt;\n    &lt;td&gt;Jonathan &lt;\/td&gt;\n    &lt;td&gt;McCarthy&lt;\/td&gt;\n    &lt;td&gt;jonathan.mccarthy@ncirl.ie&lt;\/td&gt;\n    &lt;td&gt;083 4342009&lt;\/td&gt;\n    &lt;td&gt;letmeinsoon&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/1/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/1\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Joseph&lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;joe_mcgouran@yahoo.ie&lt;\/td&gt;\n    &lt;td&gt;086 2210662&lt;\/td&gt;\n    &lt;td&gt;accesssought&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/3/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/3\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Marie&lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;mariemcgouran@yahoo.co.uk&lt;\/td&gt;\n    &lt;td&gt;2988858&lt;\/td&gt;\n    &lt;td&gt;dontmesswithme&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/4/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/4\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Stephen &lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;stephenmcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;2988858&lt;\/td&gt;\n    &lt;td&gt;whogoesthere&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/7/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/7\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Cathy &lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;cathymcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;2988858&lt;\/td&gt;\n    &lt;td&gt;openthedoor&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/8/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/8\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Peter &lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;petermcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;74931548&lt;\/td&gt;\n    &lt;td&gt;open sesame&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/9/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/9\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Gary&lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;garymcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;5566779824&lt;\/td&gt;\n    &lt;td&gt;pilotgogo&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/11/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/11\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;John &lt;\/td&gt;\n    &lt;td&gt;Beales&lt;\/td&gt;\n    &lt;td&gt;johnbeales@yahoo.com&lt;\/td&gt;\n    &lt;td&gt;9988664433&lt;\/td&gt;\n    &lt;td&gt;russiantripper&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/20/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/20\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;MIchael &lt;\/td&gt;\n    &lt;td&gt;Sweeney&lt;\/td&gt;\n    &lt;td&gt;mick@ntma.com&lt;\/td&gt;\n    &lt;td&gt;456278&lt;\/td&gt;\n    &lt;td&gt;mickn&lt;\/td&gt;\n    &lt;td&gt;2&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/35/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/35\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;bbbbbb&lt;\/td&gt;\n    &lt;td&gt;ddddddddd&lt;\/td&gt;\n    &lt;td&gt;gggggggg&lt;\/td&gt;\n    &lt;td&gt;9999999999&lt;\/td&gt;\n    &lt;td&gt;enterin&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/48/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/48\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n\n\n");
  </code></pre>
  
  <p>Here is the JS generated after a successful delete. It is similar to the action after a successful record creation.</p>
  
  <pre><code>/* hide customer_errors div */
  /* show flash notice */
  /* send script to update customers_list div with new customers list */
  
  $("#customer_errors").hide(300);
  $("#flash_notice").html("Customer Record Deleted");
  $("#flash_notice").show(300);
  $("#customers_list").html("\n&lt;table&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Firstname&lt;\/th&gt;\n    &lt;th&gt;Lastname&lt;\/th&gt;\n    &lt;th&gt;Email&lt;\/th&gt;\n    &lt;th&gt;Phone&lt;\/th&gt;\n    &lt;th&gt;Password&lt;\/th&gt;\n    &lt;th&gt;Address&lt;\/th&gt;\n    &lt;th&gt;&lt;\/th&gt;\n    &lt;th&gt;&lt;\/th&gt;\n    &lt;th&gt;&lt;\/th&gt;\n  &lt;\/tr&gt;\n\n  &lt;tr&gt;\n    &lt;td&gt;Jonathan &lt;\/td&gt;\n    &lt;td&gt;McCarthy&lt;\/td&gt;\n    &lt;td&gt;jonathan.mccarthy@ncirl.ie&lt;\/td&gt;\n    &lt;td&gt;083 4342009&lt;\/td&gt;\n    &lt;td&gt;letmeinsoon&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/1/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/1\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Joseph&lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;joe_mcgouran@yahoo.ie&lt;\/td&gt;\n    &lt;td&gt;086 2210662&lt;\/td&gt;\n    &lt;td&gt;accesssought&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/3/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/3\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Marie&lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;mariemcgouran@yahoo.co.uk&lt;\/td&gt;\n    &lt;td&gt;2988858&lt;\/td&gt;\n    &lt;td&gt;dontmesswithme&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/4/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/4\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Stephen &lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;stephenmcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;2988858&lt;\/td&gt;\n    &lt;td&gt;whogoesthere&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/7/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/7\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Cathy &lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;cathymcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;2988858&lt;\/td&gt;\n    &lt;td&gt;openthedoor&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/8/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/8\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Peter &lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;petermcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;74931548&lt;\/td&gt;\n    &lt;td&gt;open sesame&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/9/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/9\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Gary&lt;\/td&gt;\n    &lt;td&gt;McGouran&lt;\/td&gt;\n    &lt;td&gt;garymcgouran@gmail.com&lt;\/td&gt;\n    &lt;td&gt;5566779824&lt;\/td&gt;\n    &lt;td&gt;pilotgogo&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/11/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/11\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;John &lt;\/td&gt;\n    &lt;td&gt;Beales&lt;\/td&gt;\n    &lt;td&gt;johnbeales@yahoo.com&lt;\/td&gt;\n    &lt;td&gt;9988664433&lt;\/td&gt;\n    &lt;td&gt;russiantripper&lt;\/td&gt;\n    &lt;td&gt;1&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/20/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/20\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;MIchael &lt;\/td&gt;\n    &lt;td&gt;Sweeney&lt;\/td&gt;\n    &lt;td&gt;mick@ntma.com&lt;\/td&gt;\n    &lt;td&gt;456278&lt;\/td&gt;\n    &lt;td&gt;mickn&lt;\/td&gt;\n    &lt;td&gt;2&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/35/edit\" data-remote=\"true\"&gt;Edit&lt;\/a&gt;&lt;\/td&gt;\n    &lt;td&gt;&lt;a href=\"/customers/35\" data-confirm=\"Are you sure?\" data-method=\"delete\" data-remote=\"true\" rel=\"nofollow\"&gt;Destroy&lt;\/a&gt;&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;\n\n\n");
  </code></pre>
  
  <p>From above it is clear that the "customers_list" div is always updated with no problems, whereas the "customer_form" and "customer_errors" are not at all. </p>