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ファイル内にrubyコードを含めることができないことです。jsコードをインライン化しても、問題が発生します。

ありがたいことに、Railsにはajaxの使用に役立つライブラリが組み込まれています。これを見てください：http：//guides.rubyonrails.org/ajax_on_rails.html

于 2012-08-30T03:21:26.013 に答える
0

javascriptでrubyを部分的にレンダリングしようとする代わりに、jsでフォーム要素を手動で追加することにしました。rubyメソッドへのajax呼び出しの後、コールバックとして次のメソッドを呼び出します。

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にないため、フォームの送信時に検索されないと思います。シリアル化関数は、現在のフォームを調べて、送信する新しい文字列を準備します。

于 2012-09-01T02:35:46.773 に答える