Rails 4 中的 Link_to 和 ajax 请求

Question

我有以下几点：

<%= link_to "Some_link", some_path, class: "btn btn-success btn-xs", id: "contact", "data-sid" => item.id %>

在我的 application.js 我有：

$('#contact').click(function (e) {
    e.preventDefault();

    var item_id = $(this).data('sid');

    $.ajax({
      type: 'GET',
      url: '/somepath'+ item_id,
      success: function(data) {
       $("#edit-project-modal").find("input[name='id']").val(data.id);
       $("#edit-project-modal").find("input[name='name']").val(data.name);

     },

      error: function() {
       window.alert('Error Loading Item!!');
      }
   });
});

路径“some_path”将有一个表格供用户填写。话虽如此，我真正想要实现的是当用户单击链接“Some_link”时，该链接可以将用户重定向到“some_path”，但在此之前我想执行 ajax 请求以将数据加载到表单中。我不知道在这种情况下是否可以使用 :remote=>"true" 。现在发生的事情是，当我单击链接时，ajax 工作但它没有将我发送到页面。

我做错了什么？有什么建议么。 先感谢您。

Answer 1

好的，现在我更了解您的要求，我觉得我更有能力帮助您。你有很多过于复杂的事情，而你试图解决这个问题的方法是行不通的。

目前$('#contact').click(function (e) 的方式是捕获点击事件，然后尝试执行 AJAX 查询 - 我假设您正在从控制器发回数据，而不是从中进行任何渲染。您收到数据，然后尝试填充表单字段，但这些表单字段当然不存在......您还没有导航到该页面 - 此时您的 jquery 很可能正在静默失败。

现在，由于您已吞下该事件并阻止了默认行为，因此您的链接的原始路径不被遵循。即使您允许事件传播，它也不会像上一段中突出显示的那样工作。

好吧，不知道你的进一步要求是什么，在我看来你需要做的就是

1. 删除所有的 jquery。

2. 允许 link_to 像普通 HTTP GET 一样点击您的操作。

   <%= link_to edit_item_path(item), class: "btn btn-success btn-xs", id: "contact" %>

   ** 假设您有一个带有编辑操作的 ItemController 并且路由设置为

   edit_item GET /items/:id/edit(.:format) items#edit

3. 将数据设置为控制器中的实例变量

   @item = Item.find(params[:id])

4. 使用实例变量将表单呈现为 html.erb -

例如，

<%= form_for @item, url: item_path do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>
  <input type='submit'/>
<% end %>

只是一个简单的导航到一个表单。

Answer 2

假设你想：

1. 点击“一些链接”（通过 AJAX）
2. 然后，联系表单出现在“某些链接”下方

您可以使用以下内容：

<%= link_to "Some_link", some_path, class: "btn btn-success btn-xs", id: "contact", "data-sid" => item.id %>
<section id='contact-form'></section>

$('#contact').click(function (e) {
  e.preventDefault();

  var item_id = $(this).data('sid');

  $('#contact-form').load('/somepath'+ item_id, function(response, status, xhr){
    if (status === "error") {
      window.alert('Error Loading Form!!');
    }
    else {
      window.alert('Success Loading Form!!');
    }
  })
);