如何在 Ajax 完成时更新数据属性

Question

我正在使用 October CMS，在框架中我可以使用以下 HTML 元素进行 AJAX 调用：

<a href="#" class="sbutton" data-request="onSavedeal" 
     data-request-data="deal_ID:'14779255',type:'local',active:'0'">
    <i class="material-icons pink-text listfavorite">favorite</i>                      
</a>

每当在收藏夹按钮上单击此 link 时，都会触发对控制器 "onSavedeal" 的更新。更新数据库在第一次点击时工作正常。但是，更新后，"data-request-data" 属性的值不会更新，因此该按钮对后续点击不起作用。

我需要更改 link，以便 "active:'0'" 变为 "active:'1'"。生成的完整元素将是

<a href="#" class="sbutton" data-request="onSavedeal" 
     data-request-data="deal_ID:'14779255',type:'local',active:'1'">
    <i class="material-icons pink-text listfavorite">favorite</i>                      
</a>

在框架中，我可以添加另一个名为 "data-request-success" 的属性，它在成功完成 AJAX 调用后执行 javascript 函数（或代码）。我如何制作一个名为 "updateactive()" 的函数，它会在 0 和 1 之间切换活动值。最终元素应如下所示：

<a href="#" class="sbutton" data-request="onSavedeal" 
     data-request-data="deal_ID:'14779255',type:'local',active:'0'"
     data-reuqest-success="updateactive();">
    <i class="material-icons pink-text listfavorite">favorite</i>                      
</a>

Answer 1

如果您可以通过具有值 onSavedeal 的属性 data-request 安全地识别此 a 元素，您将按如下方式编写 updateactive 函数：

function updateactive() {
    var newAttrValue = "deal_ID:'14779255',type:'local',active:'1'";
    $('[data-request="onSavedeal"]').attr('data-request-data', newAttrValue);
 }

别忘了将 data-reuqest-success 更正为 data-request-success。

更新如果页面上有很多 a 元素，您可以像下面这样重用相同的函数。检查演示 - Fiddle .

function updateactive() {
    var clickedA = event.currentTarget,
        newAttrValue = $(clickedA).attr('data-request-data').replace("active:'0'", "active:'1'");

    $(clickedA).attr('data-request-data', newAttrValue);
}

Answer 2

以这种方式更改您的锚标记

<a href="#" class="sbutton" data-request="onSavedeal" 
 data-request-data="deal_ID:'14779255',type:'local',active:'0'"
 data-reuqest-success="updateactive(this);">
<i class="material-icons pink-text listfavorite">favorite</i>

注意变化 updateactive(this);

然后在你的jquery中你可以这样定义函数。

 function updateactive(element) {        
    $(element).attr('data-request-data', $(element).attr('data-request-data').replace("active:'0'", "active:'1'"));
}

如何在 Ajax 完成时更新数据属性

How to update data attribute on Ajax complete

javascript

ajax

jquery

octobercms