link_to与rails中的jquery params

时间:2010-11-27 16:02:10

标签: jquery ruby-on-rails search link-to in-place

我想在我的rails应用程序中进行就地搜索 我使用了button_to_remote和原型,但现在我正在使用JQuery,所以我改为link_to 这是我的代码:

<%= 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

如何提交我的价值?

4 个答案:

答案 0 :(得分:15)

您可能想尝试更不引人注意地接近事物。我建议您使用以下内容替换link_to电话:

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

这几乎与您已有的相同,只是它包含唯一的ID,以及data-href属性中的控制器/地理编码路径。这将有助于您保持ruby和javascript更加分离。

然后在你的application.js(或类似的地方):

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

这实际上是将click事件监听器绑定到您的搜索按钮,该按钮会将地址发布到搜索链接的data-href属性中提供的网址或路径。

我还注意到在您的代码中,您在ruby中设置了源地址的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 :(得分:3)

最简单的方法是将搜索字段和提交按钮放在普通表单中(使用默认的rails视图帮助程序)。然后将: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 ...
} 

答案 2 :(得分: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 :(得分:-1)

这不是您问题的直接答案,但您是否考虑过jrails?它允许您在切换到jquery之前使用您使用的相同原型javascript助手。它使我从原型转换到jquery 很多更容易。