Ruby on Rails - 製作一個javascript函數與ajax一起工作

Question

我一直在嘗試弄清楚一段時間，並不確定最好的方式去解決我目前的問題。首先，我會讓你知道我正在嘗試做什麼。用戶在文本框中輸入文本，然後進入下一頁，在那裏他們的輸入被分成單詞並且每個單詞都變成鏈接（鏈接將是搜索，但此時不重要）。事情是，我希望這與阿賈克斯一起工作。現在我有了成功使用ajax進入「顯示」頁面的文本框的頁面，但是我無法找到最佳實踐在線獲取我的javascript，將字面分割爲ajax render調用「show」。這是我目前的代碼。

的創建形式：

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

<div id="icelandic_reader_text"> 

</div> 

：

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

在顯示部分

顯示控制器：

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 

最後的javascript函數我要填寫「icelandic_reader_text」分區，這是我目前在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; 
    } 

} 

第一在函數的一部分之前，我從堆棧溢出的答案中得到了關於如何讓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是錯誤的，使用由軌給出的一個。

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