1

私はしばらくの間何かを理解しようとしてきましたが、現在の問題を解決する最善の方法がわかりません。まず、私がやろうとしていることをお知らせします。ユーザーがテキスト ボックスにテキストを入力すると、次のページに移動し、そこで入力内容が単語に分割され、各単語がリンクに変換されます (リンクは検索になりますが、現時点では問題ありません)。問題は、これを ajax で動作させたいということです。今、私は ajax を使用して「表示」ページに移動するテキストボックスを含むページを正常に作成しましたが、「表示」の ajax レンダリング呼び出しと一緒に実行される単語を分割する Javascript を取得するためのベストプラクティスをオンラインで見つけることができません。これが私の現在のコードです。

作成フォーム:

<%= form_for @icelandic_reader, :remote => true, :html => { :class => 'form-     horizontal' } do |f| %>
   <div class="control-group">
     <div class="controls">
       <%= f.text_area :text, :class => 'text_area' %>
     </div>
   </div>

   <div class="form-actions">
     <%= button_to 'Submit', icelandic_readers_path(@icelandic_reader.id), :class => 'btn btn-primary' %>
     <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
            icelandic_readers_path, :class => 'btn' %>
   </div>
<% end %>

コントローラーで作成します。

def create
  @icelandic_reader = IcelandicReader.new(params[:icelandic_reader])

  respond_to do |format|
    if @icelandic_reader.save
      format.html { redirect_to @icelandic_reader, notice: 'Icelandic reader was successfully created.' }
      format.js
      format.json { render json: @icelandic_reader, status: :created, location: @icelandic_reader }
  else
    format.html { render action: "new" }
    format.json { render json: @icelandic_reader.errors, status: :unprocessable_entity }
  end
 end
end

create.js.erb:

 $('.icelandic_reader').html ("<%=j render :partial => 'show' %>");

ショーのパーシャルで：

<div id="icelandic_reader_text">

</div>

コントローラに表示:

def show
  @icelandic_reader = IcelandicReader.find(params[:id])
  gon.icelandicText = @icelandic_reader.text

  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @icelandic_reader }
  end
end

そして最後に、現在icelandic_readers.js.erbにある「icelandic_reader_text」divに入力したいJavascript関数:

window.onload = pageChecker;
function pageChecker() {
    var testElement = document.getElementById('icelandic_reader_text');

    if ( !testElement ){
        setTimeout(pageChecker, 50);
    }
    else {
        var myText = gon.icelandicText;
        console.log("test1");
        var words = myText.split(/[\s]+/);
        console.log("test2");
        var numWords = words.length;
        var textToInsert;

        for (var i = 0; i < numWords; i++) {
            console.log("inside for loop");
            textToInsert += "<a href=#>" + words[i] + "</a>" + " ";
        }

    document.getElementById('icelandic_reader_text').innerHTML = textToInsert;
    }

}

それ以外の前の関数の最初の部分は、スタックオーバーフローで ajax を使用する方法についての回答から得ましたが、機能しませんでした。を使用するのとは別の方法で実装する必要があると考え始めていますwindow.onload。私はRubyに慣れていないので、この問題に使用すべき別の考え方があるかどうかを知りたい. また、レール 3.2.6 を使用しています。

4

2 に答える 2

0

window.onloadまったくトリガーされていないか、レンダリングされる前にトリガーさshowれているため、要素が見つからない可能性があります#icelandic_reader_text

  1. pageChecker()可能であれば、レイアウトにロードするファイルを定義して、すぐに起動できるようにします。

  2. create.js.erbでこれを試してください:

    $('.icelandic_reader').html("<%=j render :partial => 'show' %>").each(pageChecker);
//By chaining the actions with jquery, things should happen in the correct order.

を書き換えることもできpageChecker()ます$(this)。$('.icelandic_reader')

    function pageChecker() {

        var myText = gon.icelandicText;
        console.log("test1");
        var words = myText.split(/[\s]+/);
        console.log("test2");
        var numWords = words.length;
        var textToInsert;

        for (var i = 0; i < numWords; i++) {
            console.log("inside for loop");
            textToInsert += "<a href=#>" + words[i] + "</a>" + " ";
        }

        $(this).find('#icelandic_reader_text').append(textToInsert)
    }
于 2012-12-09T07:14:16.373 に答える
0

次のようにイベント リスナーをフォームにアタッチできます (jQuery を使用)。

$(document).ready(function() {
  $("#icelandic_reader_form").bind('ajax:success', function(data, status, xhr) {
      // code to execute after form successfully submitted
  });
}

私の例のフォーム ID が間違っていると思います。Rails で指定されたものを使用してください。

于 2012-12-07T19:37:36.850 に答える