使用Ajax实现Javascript函数

一段时间以来，我一直在想办法，但不确定解决当前问题的最佳方法。首先，我会让你知道我想做什么。用户在文本框中输入文本，然后进入下一页，在下一页中，他们的输入被拆分为单词，每个单词都被转换为一个链接。链接将是一个搜索，但目前这并不重要。问题是，我想让它与ajax一起工作。现在，我已经成功地使用ajax打开了带有文本框的页面，以转到show页面，但是我找不到在线获取Javascript的最佳实践，该Javascript将单词拆分为show的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 %>

create.js.erb：

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

最后是我想填写的Javascript函数icelandic_readers_text div，我目前在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;
    }

}

---

函数的第一部分之前，我在stack overflow中得到了一个关于如何让ajax使用它的答案，但它不起作用。我开始认为我必须以不同于使用window.onload的方式实现。我对Ruby有点陌生，所以我只想知道，对于这个问题，我是否应该使用不同的思维方式。我也在使用rails 3.2.6

您可以使用jQuery将事件侦听器附加到如下表单：

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

我认为我的示例中的表单id是错误的，请使用rails提供的id。

可能是window.onload根本没有触发，或者它在显示之前触发，因此找不到元素icelandic\u reader\u text

如果可以，请在加载到布局中的某个文件中定义pageChecker，以便随时启动。 在create.js.erb中尝试以下操作：

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

---

这对我不起作用。在函数变量中输入“ajax:success”之后，我应该准确地输入您输入的数据、状态、xhr还是这些只是我应该输入的内容的指南？另外，我很确定你把它放在哪个javascript文件中并不重要，因为从我收集的信息来看，ruby把它全部放在了一个javascript文件中，但我尝试将它放在create.js.erb和icelandic_readers.js.erb中。我把表格的id改成了正确的。还有其他建议吗？这两个建议都不管用：我已经试了两天了，只是有一些小的变化，但我什么也找不到。当我用这个做你的第二个建议时，它甚至不会在正常加载的非ajax页面上显示文本。我真的不知道该怎么做才能让这一切顺利进行。

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

}

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

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

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