Как обновить атрибут данных на Ajax complete
Я использую October CMS, и в рамках я могу сделать вызов AJAX, используя следующий элемент HTML:
<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>
Всякий раз, когда по этой ссылке нажимают на избранную кнопку, запускается обновление контроллера "onSavedeal". Обновление базы отлично работает с первого клика. Однако после обновления значение атрибута "data-request-data" не обновляется, поэтому кнопка не работает для последующих нажатий.
Мне нужно изменить ссылку так, чтобы "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", который выполняет функцию (или код) javascript для успешного завершения вызова AJAX. Как я могу сделать функцию с именем "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>
2 ответа
Если вы можете безопасно определить это a
элемент за атрибутом data-request
имеющий значение onSavedeal
Вы бы написали 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);
}
Внесите изменения в свой тег привязки таким образом
<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'"));
}