使 Javascript 函数与 Ajax 一起工作

Question

一段时间以来，我一直在尝试解决问题，但不确定解决当前问题的最佳方法。首先，我会让你知道我想要做什么。用户在文本框中输入文本，然后被带到下一页，他们的输入被分成单词，每个单词都变成一个链接（链接将是一个搜索，但目前这无关紧要）。问题是我希望它可以与 ajax 一起使用。现在我有了带有文本框的页面，成功使用 ajax 转到“显示”页面，但我无法在线找到最佳实践来获取我的 Javascript，该 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

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

}

函数的第一部分之前我从堆栈溢出中的一个答案中得到关于如何让 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 给出的那个。

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