使 Javascript 函數與 Ajax 一起工作

Question

一段時間以來，我一直在嘗試解決問題，但不確定解決當前問題的最佳方法。 首先，我會讓你知道我想做什么。 用戶在文本框中輸入文本，然后被帶到下一頁，在那里他們的輸入被分成單詞，每個單詞變成一個鏈接（鏈接將是一個搜索，但目前並不重要）。 問題是我希望它與 ajax 一起工作。 現在我有了帶有文本框的頁面，成功地使用 ajax 轉到“顯示”頁面，但我無法在線找到最佳實踐來獲取我的 Javascript 拆分要與“顯示”的 ajax 渲染調用一起執行的單詞。 這是我當前的代碼。

創建表單：

<%= 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

創建.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_reader_text”div 的 Javascript 函數，我目前在 icelandic_readers.js.erb 中有它：

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;
    }

}

在 else 之前，函數的第一部分是我從堆棧溢出中的一個答案中得到的，關於如何讓 ajax 使用它，但它沒有用。 我開始認為我必須以不同於使用window.onload的方式來實現。 我是 Ruby 的新手，所以我想知道我是否應該使用不同的思維方式來解決這個問題。 我也在使用 rails 3.2.6。

Answer 1

您可以像這樣將事件監聽器附加到表單（使用 jQuery）：

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

我認為我示例中的表單 ID 是錯誤的，請使用 rails 給出的表單 ID。

Answer 2

可能是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)
    }