Question

我一直试图解决一些问题并且不确定解决当前问题的最佳方法。首先，我会告诉你我想做什么。用户将文本输入到文本框中，然后进入下一页，其中输入被分成单词，每个单词变为链接（链接将是搜索，但此刻无关紧要）。问题是我希望这与ajax一起使用。现在我使用ajax成功地使用文本框进入“显示”页面，但我无法在线找到最佳实践，以便将我的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 %>

在控制器中创建：

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

最后是javascript函数我要填写“icelandic_reader_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;
    }

}

函数的第一部分之前我从堆栈溢出的答案得到了如何让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

如果可以，请在布局中加载的某个文件中定义pageChecker()，以便随时启动。

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

Ruby on Rails - 使javascript函数与ajax一起工作

2 个答案: