1

我一直试图找出一些东西，但不确定解决当前问题的最佳方法。首先，我会让你知道我想要做什么。用户在文本框中输入文本，然后被带到下一页，他们的输入被分成单词，每个单词都变成一个链接（链接将是一个搜索，但目前这无关紧要）。问题是我希望它可以与 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

创建.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 中拥有该 div：

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。

4

2 回答 2

0

您可以像这样将事件侦听器附加到表单（使用 jQuery）：

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

我认为我的示例中的表单 id 是错误的，请使用 rails 给出的那个。

于 2012-12-07T19:37:36.850 回答
0

它可能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)
    }
于 2012-12-09T07:14:16.373 回答