Question

我正在构建一个允许用户输入单词的表单，当他们选中时，我会查询字典（Wordnik.com）以检索定义，并将定义作为单选按钮选择添加到表单中。 javascript拾取单词，调用我的WordsController中的get_definition函数并查询字典API，但我似乎无法获得部分渲染（现在它只打印出“＆lt;％= escape_javascript ..... ％＆gt;“中）

PS：我也尝试用jquery直接查询api（所以我没有点击get_definitions函数）但是我无法收到发送请求，所以我现在坚持使用上面的方法。

words_controller：

def index
    @words = Word.where(user_id: current_user)
    @word = current_user.words.new
    @defs = Array.new
end

def get_definition
    @defs = Wordnik.word.get_definitions(params['word'])
    render nothing: true
end

的javascript：

$('input#word_name').blur(function(){
    var word = $('input#word_name').val();
    $.ajax({
            url: '/words/get_definition',
            data: 'word='+word
    })
    $('#addDefinitionContainer').html("<%= escape_javascript(render partial: 'words/definitions', locals: {f: f}) %>")
})

_definitions partial：

<% @defs.each do |definition| %>
   <div class="definition_choice">
   <%= f.label definition %>
   <%= f.radio_button :definition, "yes" %>
   </div>
<% end %>

Answer 1

问题是您无法在.js文件中使用ruby代码。即使您内联js代码，您仍然会遇到问题。

值得庆幸的是，Rails已经构建了库以帮助您使用ajax。看看这个：http://guides.rubyonrails.org/ajax_on_rails.html

Answer 2

我没有尝试在javascript中渲染ruby部分，而是决定在js中手动添加表单元素。在ajax调用我的ruby方法之后，我将以下方法称为回调：

function addDefsToForm(data){           
    $.each(data, function(index,item){
        var radio = $('<input />', { id: 'word_definition_'+index, name: 'word_definition', type: 'radio', value: item['text']});
        $('#addDefinitionContainer').append(radio);
        $('#addDefinitionContainer').append(item['text']+"<br />");
    });

};

这会为我收到的每个定义向页面添加一个单选按钮（带有相关文本）。但是，用户选择的单选按钮不会与POST请求中的单词一起发送。解决方案是在提交时调用表单上的jquery serialize（）函数：

$('form').submit(function(){
    $(this).serialize();
});

我想，由于这些添加的表单元素（单选按钮）在页面首次呈现时不在DOM中，因此在表单提交时不会查找它们。 serialize函数现在遍历表单并准备要发送的新字符串。

在Ajax调用之后添加表单元素

2 个答案: