Rails 3.1 和 AJAX - 如何实现它？

Question

我的 Rails 应用程序存在大量 AJAX 设计问题。要了解 APP - 您有一个可以注册的课程列表。它以前都是 HTML，但我想重写它并在其中放入一些 AJAX。它看起来和图片中的非常相似：

主表是一个类列表。蓝色按钮表示“注册上课”，红色表示“退出”，绿色表示正在处理 AJAX 请求。在左上角有一个搜索表格。显然它可以工作（我的意思是搜索，我希望它通过 AJAX -> 刷新类工作。左侧列表显示您登录的所有类。

我有一个很大的设计问题。似乎我知道如何分别实现所有 ajax 操作，但是当我尝试将它们全部组合起来时，一切都搞砸了。没有关于如何做到这一点的全面教程，不是吗？我尝试使用 jquery。

控制器名为wyklads，动作wyklady 所以这就是我所拥有的：

0。布局

<div class="span3">
    <div class="row-fluid">

        <div class="well wyszukiwarka">
            <%= render 'search'%> #search form
        </div>

        <div class="well usuwanie">
            <%= render 'usuwanie' %> #left list of my classes
        </div>
    </div>
</div>

<div class="span9">
       <%= render 'wyklady' %> #table of classes
    </div>

1.搜索

 application.js
 $('div.wyszukiwarka form input.btn').submit(function() {
    $.get($this.action, $(this).serialize(), null, "script");
    return false;
 });

 the table with classes is refreshed because of wyklady.js.erb that loads automatically
 $('div.tab-przedmioty').html("<%= escape_javascript(render('wyklady')) %>");

2。控制器

 def wyklady
  if params[:search]
   @wyklads = Wyklad.where(:pozstudiow => poziom, :typo => 1).search(params[:search])
   @labs = Lab.where(:pozstudiow => poziom, :typo => 1).search(params[:search])
  else
   @wyklads = Wyklad.where(:pozstudiow => poziom, :typo => 1)
   @labs = Lab.where(:pozstudiow => poziom, :typo => 1)
  end
 end

3。 BUTTONS 用于添加类（我正在使用 twitter bootstrap）

 <%= button_to 'Dodaj do planu', {:controller => :plans, :action => :create, :przedmiot_id => wyklad.id, :typ => 0}, :method => :post, :remote => true, :class => 'btn btn-small btn-primary addprzedmiot-btn', :style => 'padding: 2px 5px; margin: 0; width: 90px;', :"data-toggle" => 'button', :"data-loading-text" => 'Dodano' %>

起初我尝试从 jquery 中放入 wyklady.js.erb 条件语句：

 $('.addprzedmiot-btn').click(function() {
   $('div.tab-przedmioty').html("<%= escape_javascript(render('wyklady')) %>");
 });

然后我试图从 Plans 控制器执行 js（当你注册一个类时，你会创建一个新的 Plan）：

 in Plans controller

 def create
 ...
  if @plan.save
  respond_to do |format|
    format.js
  end
 end

 and plans/create.js.erb

 $('div.usuwanie').html("<%= escape_javascript(render('wyklads/usuwanie')) %>");

但它说它没有在左侧呈现列表，在日志中说它缺少来自 Wyklads 控制器的一些对象（nil 类）。

唯一可行的解​​决方案是每次调用后都通过 ajax 刷新所有内容，这是非常无效的。我想避免它，因为类表很长，并且需要大量时间来填充它。

我希望这一切都像这样： 1.类表只在你提交搜索时刷新， 2. 当您注册课程时，蓝色按钮变为绿色（表示按下的按钮由引导程序处理得很好），左侧列表刷新但右侧表格不再填充它一次。刷新整个页面后，绿色按钮变为红色。

所以这个问题有点宽泛。如果有人能如此耐心地解释解决方案以及解释混合多个 ajax 事件和处理它们的一些关键概念（或给出一些建议、教程），我将非常感激。纯代码不如概念重要。之后我想再“ajaxify”一点，但首先必须了解基础知识。

非常感谢。

Answer 1

可能是ajax调用的问题，

在 application.js 中

 $('div.wyszukiwarka form input.btn').submit(function() {
    $.get($this.action, $(this).serialize(), null, "script"); // what is $this? $(this) is button instead of form
    return false;
 });

试试这个

 $('div.wyszukiwarka form').submit(function() {
    $this = $(this)
    $.get($this.action, $this.serialize(), null, "script");
    return false;
 });