1

我的 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. 用于添加类的按钮（我使用的是 twitter 引导程序）

 <%= 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')) %>");
 });

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

 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”一点，但首先必须了解基础知识。

非常感谢。

4

1 回答 1

0

可能是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;
 });
于 2012-04-17T06:15:06.333 回答