javascript - 如何使选择器 ":checked"也与 "link_to"一起工作？

Question

当用户点击此按钮时，我们如何自动重新加载页面？

<%= link_to '<span class="glyphicon glyphicon-remove"></span>'.html_safe, habit_level_days_missed_index_path({ habit_id: habit, level_id: habit.current_habit_level.id }), remote: true, method: 'post', data: { confirm: 'You missed a committed day?' }, class: 'habit-check', id: 'remove_check' %>

habit-check 触发这个:

$(document).ready(function () {
  $(".habit-check").change(function () {
    var submitUrl = $(this).parents("p").data("submit-url");
    var deleteUrl = $(this).parents("p").data("delete-url");

    if ($(this).is(":checked")) { // We'd need to fix this line?
       $.ajax({ url: submitUrl, method: "POST" }).done(location.reload)
    } else {
       $.ajax({ url: deleteUrl, method: "DELETE" }).done(location.reload)
    }
  })
})

但这被设计为在单击复选框时起作用。当单击 link_to 按钮时，我们如何才能让它也起作用？

我设想了类似这样的东西 if($(this).is(":checked && :clicked"))，但我对 javascript 几乎一无所知，但我希望你明白想法:]

更新

我尝试了此页面中的所有选择器 https://api.jquery.com/category/selectors/但它们不起作用，所以我要么做错了，要么解决方案不仅仅是修一条线。

更新AMIT

$(document).ready(function() {
  $('.remove-check').on('ajax:success', function() { location.reload() })
  $(".habit-check").change(function() {
    var submitUrl = $(this).parents("p").data("submit-url");
    var deleteUrl = $(this).parents("p").data("delete-url");

    if($(this).is(":checked"))
    {
       $.ajax(
       {
         url: submitUrl,
         method: "POST"
       })
       .done(function () {
         location.reload();
       });
    }
    else
    {
       $.ajax(
       {
         url: deleteUrl,
         method: "DELETE"
       })
       .done(function () {
         location.reload();
       });
    }
  });
})

Answer 1

似乎 .habit-check 不再是复选框，因此处理更改事件的旧代码将无法工作。

所以我假设您想使用复选框的链接而不是来完成这项工作。我还假设您正在使用 Rails jquery-ujs(带有 jQ​​uery 的不显眼的 javascript)，这是现在的默认设置。

当您在链接或表单上指定 remote: true 时，您无需使用 jQuery 手动触发 Ajax 请求。 ujs 框架会为你做这件事。因此，如果在 link_to 中正确定义了路径(这是您的情况)，则不需要像 data("submit-url") ).这又是 ujs 框架的责任。

因此，当用户单击链接或提交具有remote: true 的表单时，ujs 框架将与服务器通信，您可以简单地在javascript 中处理其中一个Ajax 事件在这里定义: https://github.com/rails/jquery-ujs/wiki/ajax

所以在你的情况下，这样做应该可行:

$(document).ready(function() {
  $('.habit-check').on('ajax:success', function() { location.reload() })
})

或者这个(如果您的 .habit-check 链接有可能由 Javascript 呈现，例如作为对 Ajax 调用的响应):

$(document).ready(function() {
  $('body').on('ajax:success', '.habit-check', function() { location.reload() })
})

注意:如果您想使用 ajax:success 事件，请确保您的 Controller 返回状态 200。无论出于何种原因，如果 Controller 确实 render text: 'hi' ，这是行不通的，因此返回一个 JSON 或简单地 render nothing: true。

更新 - 带有复选框

您似乎想根据复选框状态调用不同的 Controller 操作。如果是这种情况，您可以像以前一样在 javascript 中执行此操作，或者按照我在下面“不同 Controller 操作”下的建议进行操作。如果您可以将复选框状态发送到一个 Controller 操作并让 Controller 处理“if checked then..”，代码会更简单:

在再培训局:

<%= form_for @habit, remote: true, class: 'habit-form' do |f| %>
  <%= f.check_box :check, class: 'habit-check' %>
<% end %>

在 Javascript 中:

$('.habit-check').on('change', function() { $('.habit-form').submit() })
$('.habit-form').on('ajax:success', function() { location.reload() })

在 Controller 中:

def update
  habit = Habit.find(params[:id])
  if params[:habit][:check] == '1'
    # Do one thing
  else
    # Do another thing
  end
  render nothing: true
end

请注意，上面的代码做了以下假设:

• 你有一个名为 Habit 的类，它有一个名为 check 的属性。如果您不想将此复选框属性作为数据库列，只需在 Habit 类定义中使用 attr_accessor :check 添加它，以便 f .check_box :check 行有效。

• ERB 模板接收数据库中已存在的 Habit 类的 @habit 对象。换句话说，@habit.new_record? 返回 false。这将使表单与 Controller 中的 update 操作进行通信。

不同的 Controller 操作

如果您想根据复选框状态调用不同的 Controller 操作，同时避免 $.ajax 调用(我个人认为这更简洁)，您可以呈现两种不同的形式并使用 javascript选择要提交的内容。

在再培训局:

<%= form_for @habit, url: destroy_habit_path, method: :delete, remote: true, class: 'destroy-form redirect-after-success' %>
<%= form_for Habit.new, url: habits_path, method: :post remote: true, class: 'create-form redirect-after-success' %>

在 JavaScript 中:

$('.habit-check').on('change', function() { 
  var isChecked = $(this).is(':checked');
  var formClass = isChecked ? '.create-form' : '.destroy-form';
  $(formClass).submit() 
});
$('.redirect-after-success').on('ajax:success', function() { location.reload() });

请注意，您还可以将 redirect-after-success 类添加到您的 .remove-check 链接中，这样上面的 javascript 代码将支持您的来 self 们最初讨论的链接。