2010-11-27 8 views
8

私は自分のレールアプリでインプレース検索をしたいと思っています。
button_to_remoteをプロトタイプで使用しましたが、今はJQueryを使用していますので、link_toに変更しました。
は、これは私のコードです:私は私のコントローラにアドレステキストフィールドを渡したいlink_toとjquery params in rails

<%= link_to "Search", {:action => "geocode", :with => "'address='+$('#{address_helper_id}').value"}, :method => :post, :remote => true %> 

が、出力は私が期待したものではありません。

/mycontroller/geocode?with=%27address%3D%27%2B%24%28%27record_location___address%27%29.value 

私の値を提出するにはどうすればよいですか?

答えて

15

あなたはもう少し控えめなものに近づいしようとする場合があります。

<%= link_to "Search", "#", :id => "search_geocode", :"data-href" => my_controller_geocode_path %> 

これは、それがユニークなID、およびまたdata-href属性のコントローラ/ジオコードパスが含まれていることを除いて、あなたがすでに持っているものと実質的に同じである:私のようなもので、あなたのlink_toコールを交換することをお勧めします。これは、あなたのルビーとjavascriptを少し離れた状態に保つのに役立ちます。あなたのapplication.js(またはどこか似た)で次に

$('#search_geocode').live('click', function(event){ 
    event.preventDefault(); 
    $.post($(this).attr('data-href') + "?address=" + $('#address').val(), function(data){}); 
}); 

URLまたはパスへのアドレスがdata-hrefで提供記事検索ボタンにclickイベントリスナーをバインドされてこれが効果的にやっていますあなたの検索リンクの属性。

あなたのコードでは、ルビーのソースアドレスのidを設定しています。このid属性を何らかの種類のページテンプレート条件に基づいて変更する必要がある場合は、別のdata-パラメータをリンクに追加することで、この例を拡張できます。たとえば、次のように

<%= link_to "Search", "#", :id => "search_geocode", :"data-href" => my_controller_geocode_path, :"data-address-id" => address_helper_id %> 

そして再び、の線に沿って何かを上記の置き換えapplication.jsに:

$('#search_geocode').live('click', function(event){ 
    event.preventDefault(); 
    $.post($(this).attr('data-href') + "?address=" + $($(this).attr('data-address-id')).val(), function(data){}); 
}); 
-1

これはあなたの質問に対する正確な直接的な回答ではありませんが、jrailsを調べましたか? jqueryに切り替える前に使用していたものと同じプロトタイプのjavascriptヘルパーを使用することができます。プロトタイプからjqueryへの私の移行をより簡単にしました。

2

あなたはこれを試すことができます:
<%= text_field_tag :address %>
<%= submit_tag "Search", :id => "search_button" %>

 

### Paste following code in your javascript 

$("#search_button").live("click", function(){ 
    $.ajax({ 
    complete:function(request){}, 
    data:'address='+ $('#address').val(), 
    dataType:'script', 
    type:'get', 
    url: '[ROUTE TO ACTION]' // in your case, may be '/[CONTROLLER NAME]/geocode' until you define route 
    }) 
}); 

 
3

最も簡単な方法は、使用して(通常の形で検索フィールドと送信ボタンを配置することですデフォルトのレールはヘルパーを表示します)。そして、フォームに:remote => :trueオプションを追加します。ドキュメントについては、form_for url helperを参照してください。

あなたは既にjquery固有のrails.jsファイルを追加しました。

このようにすると、自動的にフォームがajax経由で指定のアクションに送信されます。

その後、データを処理できるように 'ajax:success'イベントハンドラだけが必要です。

$('<id of the form').bind('ajax:success', function(event, data, status, xhr) { 
    ... process your data here ... 
}