Rails 中带有 jquery params 的 link_to

发布于 2024-10-04 21:52:32 字数 461 浏览 9 评论 0原文

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

我如何提交我的价值？

原文

I want to make an in-place search in my rails app.
I used button_to_remote with prototype, but now I'm using JQuery, so I changed to link_to.
This is my code:

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

I want to pass the address textfield to my controller, but the output is not what I expected.

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

How do I submit my value?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落花浅忆 2024-10-11 21:52:32

您可能想尝试以更低调的方式处理事情。我建议将您的 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 事件侦听器绑定到您的搜索按钮，该按钮将地址发布到 url 或搜索链接的 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){} );
});

You might want to try approaching things a little more unobtrusively. I would recommend replacing your link_to call with something like:

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

This is virtually identical to what you already have, except that it includes a unique id, and also the controller/geocode path in an data-href attribute. This will help allow you to keep your ruby and javascript a bit more separated.

Then in your application.js (or somewhere similar):

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

What this is effectively doing is binding a click event listener to your search button, which posts the address to the url or path provided in the data-href attribute of your search link.

I also notice that in your code, you're setting the id of the source address in ruby. If this id attribute needs to change based on some sort of page template conditions, you could expand on my example by adding another data- parameter to your link. For example:

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

And again, in application.js replacing above with something along the lines of:

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

回复收藏 0 原文

梨涡 2024-10-11 21:52:32

最简单的方法是将搜索字段和提交按钮放在普通表单中（使用默认的 Rails 视图助手）。然后添加 :remote =>; :true 表单选项。有关文档，请参阅 form_for url 帮助程序。

我猜你已经添加了 jquery 特定的rails.js 文件。

这样做会自动通过 ajax 将表单发布到给定的操作。

之后，您只需要一个“ajax:success”事件处理程序即可处理数据。

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

The easiest way is to put the search field and the submit button in a normal form (using the default rails view helpers). And you add the :remote => :true option to the form. See form_for url helper for the docs.

I gueuss you already added the jquery specific rails.js file.

Doing it like this will automatically post the form via ajax to the given action.

After that, you only need a 'ajax:success' event handler so that you can handle the data.

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

回复收藏 0 原文

说谎友 2024-10-11 21:52:32

你可以试试这个：
<代码>
<%= text_field_tag :地址 %>
<%= Submit_tag "搜索", :id => “搜索按钮”%>


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

You can try this:
<%= 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
  })
});

回复收藏 0 原文