Jquery 暂时禁用rails远程链接

我有一个切换，当服务器向数据库发送真/假数据时，我需要禁用远程链接。然后我将重新启用

ajax:success

上的链接

我不能在rails远程链接上使用

e.preventDefault（）

我希望能够做到以下几点：

$('body').on('click', '.toggle_link', function(){
  //disable remote link
})

$('body').on('ajax:success', '.toggle_link', function(){
  //enable remote link
})

---

是否有实现这一目标的最佳实践

要禁用单击时的链接，您可以

将其jquery写入资产管道

。既然您不能使用

e.preventDefault（）

，为什么不干脆

将它的href改为35;

。使用data href属性，该属性将包含您的原始链接，以便再次启用它（如果您有很多链接，但不知道哪一个链接会转到哪里）。因此，在jquery文件中，您可以执行以下操作：

$('body').on('click', '.toggle_link', function(){
  $(this).prop("href", "#");
});

$('body').on('ajax:success', '.toggle_link', function(){
  var url = $(this).data("href");
  $(this).prop("href",url);
});

要再次启用它，您可以执行以下操作：

$('body').on('click', '.toggle_link', function(){
  $(this).prop("href", "#");
});

$('body').on('ajax:success', '.toggle_link', function(){
  var url = $(this).data("href");
  $(this).prop("href",url);
});

在rails

js.erb

文件中是ajax:success。因此，您可以在js中编写整个ajax:success代码，而不是将其写入js.erb文件，但您需要以某种方式将data href的值发送给控制器（以防您还不知道链接的url）。您可以按照以下步骤进行操作：

a。在routes.rb文件中为自定义操作创建一个

post

url

b。在js文件中编写ajax调用：

$('body').on('click', '.toggle_link', function(){
  var url_link = $(this).data("href");
  $(this).prop("href","#");
  $.ajax({
    type: "POST",
    url: url_link,
    data: { data-url: url_link}
   });
});

c。在自定义操作中，您可以通过

@url=params[：data url]

d。在js.erb文件中，您可以简单地编写

$("#some_id_of_link").prop("href",@url);

---

要禁用单击时的链接，您可以

将其jquery写入您的资产管道

。既然您不能使用

e.preventDefault（）

，为什么不干脆

将它的href改为35;

。使用data href属性，该属性将包含您的原始链接，以便再次启用它（如果您有很多链接，但不知道哪一个链接会转到哪里）。因此，在jquery文件中，您可以执行以下操作：

$('body').on('click', '.toggle_link', function(){
  $(this).prop("href", "#");
});

$('body').on('ajax:success', '.toggle_link', function(){
  var url = $(this).data("href");
  $(this).prop("href",url);
});

要再次启用它，您可以执行以下操作：

$('body').on('click', '.toggle_link', function(){
  $(this).prop("href", "#");
});

$('body').on('ajax:success', '.toggle_link', function(){
  var url = $(this).data("href");
  $(this).prop("href",url);
});

在rails

js.erb

文件中是ajax:success。因此，您可以在js中编写整个ajax:success代码，而不是将其写入js.erb文件，但您需要以某种方式将data href的值发送给控制器（以防您还不知道链接的url）。您可以按照以下步骤进行操作：

a。在routes.rb文件中为自定义操作创建一个

post

url

b。在js文件中编写ajax调用：

$('body').on('click', '.toggle_link', function(){
  var url_link = $(this).data("href");
  $(this).prop("href","#");
  $.ajax({
    type: "POST",
    url: url_link,
    data: { data-url: url_link}
   });
});

c。在自定义操作中，您可以通过

@url=params[：data url]

d。在js.erb文件中，您可以简单地编写

$("#some_id_of_link").prop("href",@url);

---

最终对我起作用的是使用了user2675613的部分答案，然后还删除了

data remote=“true”

和

data method=“put”

属性

//to disable
var url_link = $(this).attr('href');
$(this).attr('data-href', url_link);
$(this).attr('href', "#");
$(this).removeAttr('data-remote');
$(this).removeAttr('data-method');

//to enable 
var url_link = $(this).attr('data-href');
$(this).attr("href", url_link);
$(this).attr("data-remote", "true");
$(this).attr("data-method", "put");

---

这是一个更新操作，因此根据您的操作，您可以存储数据方法。

最终对我有效的方法是使用user2675613的部分答案，然后还删除了

data remote=“true”

和

data method=“put”

属性

//to disable
var url_link = $(this).attr('href');
$(this).attr('data-href', url_link);
$(this).attr('href', "#");
$(this).removeAttr('data-remote');
$(this).removeAttr('data-method');

//to enable 
var url_link = $(this).attr('data-href');
$(this).attr("href", url_link);
$(this).attr("data-remote", "true");
$(this).attr("data-method", "put");

---

这是一个更新操作，因此根据您的操作，您可以存储数据方法。

这将禁用远程链接

$('#remote_link').removeAttr('data-remote').removeAttr('href')

---

要重新启用它，您可以将目标url存储在一些

数据

属性（

数据目标

或smth）中，并将

href

重新打开

ajax:success

这应该禁用远程链接

$('#remote_link').removeAttr('data-remote').removeAttr('href')

---

要重新启用它，您可以将目标url存储在一些

数据

属性（

数据目标

或smth）中，并将

href

重新打开

ajax:success

，您还可以连接到ujs中的

ajax:beforeSend

事件中

  $(document).on('ajax:beforeSend', 'a[data-remote=true]', function(event, xhr, status, error) {
    // stash the link
    // remove the href
  });

当数据远程链接的css类为“disabled”时，我使用了不同的方法来阻止它们运行

  $(document).on('ajax:beforeSend', 'a.disabled[data-remote=true]', function(event, xhr, status, error) {
    event.preventDefault();
    event.stopImmediatePropagation();
    return false;
  });

---

您还可以连接到ujs中的

ajax:beforeSend

事件

  $(document).on('ajax:beforeSend', 'a[data-remote=true]', function(event, xhr, status, error) {
    // stash the link
    // remove the href
  });

当数据远程链接的css类为“disabled”时，我使用了不同的方法来阻止它们运行

  $(document).on('ajax:beforeSend', 'a.disabled[data-remote=true]', function(event, xhr, status, error) {
    event.preventDefault();
    event.stopImmediatePropagation();
    return false;
  });

---

这用于在添加禁用属性时禁用

link_to

上的

remote:true

的行为。因此，您可以以更干净的方式处理这种情况

$('a[data-remote]').on('ajax:beforeSend', function(event, xhr, settings) {
  if($(this).attr('disabled') == 'true' || $(this).attr('disabled') == 'disabled') {
    return false;
  }
});

---

这用于在添加禁用属性时禁用

link_to

上的

remote:true

的行为。因此，您可以以更干净的方式处理这种情况

$('a[data-remote]').on('ajax:beforeSend', function(event, xhr, settings) {
  if($(this).attr('disabled') == 'true' || $(this).attr('disabled') == 'disabled') {
    return false;
  }
});

---

为什么要删除远程数据和数据方法？这没有意义，如果你的href已经是

#

，那么你为什么要删除这两个呢？@user2675613链接仍然发送一个空请求，我宁愿完全禁用链接。你为什么要删除数据远程和数据方法？这没有意义，如果你的href已经是

#

，那么你为什么要删除这两个呢？@user2675613链接仍然发送一个空请求，我宁愿完全禁用链接。