0

我正在构建一个允许用户输入单词的表单，当他们关闭时，我查询字典（Wordnik.com）以检索定义，并将定义作为单选按钮选择添加到表单中。javascript 拿起这个词，在我的 WordsController 中调用 get_definition 函数并查询字典 API，但我似乎无法得到要渲染的部分（现在它只是打印出 "<%= escape_javascript.....% >")

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 部分：

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

2 回答 2

0

我决定在 js 中手动添加表单元素，而不是尝试在 javascript 中呈现 ruby​​ 部分。在 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 函数按照现在的形式遍历表单并准备一个要发送的新字符串。

于 2012-09-01T02:35:46.773 回答
0

问题是您不能在 .js 文件中包含 ruby​​ 代码。即使你内联了 js 代码，你仍然会遇到问题。

值得庆幸的是，Rails 内置了库来帮助您使用 ajax。看看这个： http: //guides.rubyonrails.org/ajax_on_rails.html

于 2012-08-30T03:21:26.013 回答