1

RailsアプリでAJAXの設計に大きな問題があります。APPを理解するには、サインアップできるクラスのリストがあります。以前はすべてHTMLでしたが、書き直してAJAXを入れたいと思います。写真のように見えます：

アプリの画像

メインテーブルはクラスのリストです。青いボタンは「クラスにサインアップ」、赤は「サインアウト」、緑はAJAXリクエストの処理中を意味します。左上隅に検索フォームがあります。どうやらそれは機能しているようです（つまり、検索、つまりAJAX->クラスの更新を通じて機能させたいのです。左側のリストには、サインインしているすべてのクラスが表示されます。

デザインに大きな問題があります。すべてのajaxアクションを個別に実装する方法を知っているようですが、それらをすべて組み合わせようとすると、すべてが台無しになります。それを行う方法の包括的なチュートリアルはありませんね。私はjqueryを使って作業しようとしています。

コントローラーはwyklads、action 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条件付きstatemetnsを入れようとしました。

 $('.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」したいのですが、まずは基本を理解することが重要です。

どうもありがとうございます。

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 に答える