使用AJAX资源维护重置操作类型

时间:2011-12-26 23:05:18

标签: javascript jquery ruby-on-rails-3

我开发了一个维护资源的Rails 3程序,即。它创建,更新,列出和删除没有屏幕刷新请求的记录。它使用AJAX请求与服务器通信。每个请求由控制器处理,然后具有用于更新DOM的JavaScript代码的js.erb文件从服务器传输以供浏览器执行。从用户的角度来看,该程序的工作原理如下:

屏幕的顶部包含一个输入表单,用于插入和编辑/更新资源记录。屏幕的底部列出了所有资源记录,其中包含在每条记录行末尾进行编辑和销毁的操作。

所有操作在单独执行时都能正常工作,因为操作(创建,编辑/更新,销毁)发生并且资源列表在屏幕上更新而没有屏幕刷新请求。

问题是在编辑/更新操作集结束时,屏幕上的操作类型在更新模式下“卡住”,我无法再次切换到创建模式。

同样,当我执行销毁操作时,屏幕操作将保持“创建”或“更新” - 具体取决于之前执行的操作。

在编辑/更新和销毁案例中,我想将下一个操作设置为创建模式。

关于如何解决这个问题的任何想法。

我尝试使用JQuery attr()函数来设置下一个操作而没有任何成功。

代码的某些部分如下所示。

Controller code :

class CustomersController < 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 => @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 => @book 

  end 

end

edit.js.erb file:

editform = "";
editform = editform + '<%= escape_javascript( render('form') ) %>';
alert(" unEscaped editform : " + editform);
$("#customer_form").html(editform);



Update.js.erb file:




 <% if @customer.errors.any? -%> 

   /* Hide the Flash Notice div */
   /* Create an Errors List */
   /* Update the html of the customer_errors div with the Errors List */
   /* Show the customer_errors div */

   $("#flash_notice").hide(300);

   var errlst = "";
   errlst = errlst + "<ul>";
   <% @customer.errors.full_messages.each do |msg| %>
     errlst = errlst + "<li><%= escape_javascript(msg) %></li>";
   <% end %>
   errlst = errlst + "</ul>";

   alert("Errors List : " + errlst);

   $("#customer_errors").html(errlst);
   $("#customer_errors").show(300);

<% else -%>

   /* Hide the customer_errors div */
   /* Update the html of the flash_notice div with the Flash contents */
   /* Clear the form */
   /* Set form for Create Customer mode */
   /* Replace the html of the customers_list div with the updated Customers List */

   $("#customer_errors").hide(300);
   $("#flash_notice").html("<%= flash[:notice] %>");

   $(":input:not(input[type=submit])").val("");
   $(":submit").attr("value", "Create Customer");
   $("form").attr({id:"new_customer", action:"/customers"});

   $("#customers_list").html("<%= escape_javascript render('customers') %>");

<% end %>



Index.html file:


<div id="customer_form"><%= render 'form' %></div>
<div id="customers_list"><%= render 'customers' %></div>


_form.html partial :


<%= form_for(@customer, :remote => true ) do |f| %>

  <div id="customer_errors" style="display:none"></div>

  <div class="field">
    <%= f.label :firstname %>
    <%= f.text_field :firstname %>
    <%= f.label :lastname %>
    <%= f.text_field :lastname %>
  </div>
  <div class="field">
    <%= f.label :email %>
    <%= f.text_field :email %>
    <%= f.label :phone %>
    <%= f.text_field :phone %>
  </div>
  <div class="field">
    <%= f.label :password %>
    <%= f.text_field :password %>
    <%= f.label :address_id %>
    <%= f.text_field :address_id %>
  </div>

  <div id="next_action", class="actions">
    <%= f.submit %>
  </div>
<% end %>



_customers.html partial :


<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    <th>Phone</th>
    <th>Password</th>
    <th>Address</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @customers.each do |customer| %>
  <tr>
    <td><%= customer.firstname %></td>
    <td><%= customer.lastname %></td>
    <td><%= customer.email %></td>
    <td><%= customer.phone %></td>
    <td><%= customer.password %></td>
    <td><%= customer.address_id %></td>
    <td><%= link_to 'Edit', edit_customer_path(customer), :remote => true %></td>
    <td><%= link_to 'Destroy', customer, :remote => true, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>
</table>

编辑:在JQuery中使用attr()函数解决了问题 - 请参阅上面的update.js.erb代码。最后一部分是使用“:submit”元素将提交按钮值重置为Create Customer。谢谢大家。

0 个答案:

没有答案