在rails中带有jquery参数的link_to

Posted 2023-02-23

【中文标题】在rails中带有jquery参数的link_to

【英文标题】：link_to with jquery params in rails

【发布时间】：2011-05-16 14:29:59

【问题描述】：

我想在我的 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

我如何提交我的价值？

【参考方案1】：

最简单的方法是将搜索字段和提交按钮放在一个普通的表单中（使用默认的 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】：

您可能想尝试更不引人注目地处理事情。我建议将您的 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 属性中提供的url 或路径。

我还注意到，在您的代码中，您在 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) );
);

【讨论】：

注意：我认为 .live 已被弃用。往下看。 $( 选择器 ).live( 事件、数据、处理程序 ); // jQuery 1.3+ $( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+ $( document ).on( events, selector, data, handler ); // jQuery 1.7+ 在这个链接中：api.jquery.com/live

【参考方案3】：

你可以试试这个： <%= text_field_tag :address %>&lt;%= submit_tag "Search", :id =&gt; "search_button" %&gt;

### 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 ) );

【参考方案4】：

这并不完全是您问题的直接答案，但您是否查看过jrails？它允许您使用在切换到 jquery 之前使用的相同原型 javascript 助手。它使我从原型过渡到 jquery 更加更容易。