AJAX Publish/Unpublish элемента в списке

  • 0 Ответов
  • 335 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

zaboich

Изменить статус элемента в режиме списка - одна из простейших функций встроенных в фреймворк CMS
Добавляется эта возможность в код примерно так:

Код
echo JHtml::_('jgrid.published', ...)
Но по какой-то причине, до сих пор, метод JHtmlGrid::published() вешает на элемент обработчик onclick, который делает синхронный запрос на сервер. Т.е. для такой небольшой операции происходит перезагрузка страницы.

Небольшой скриптик позволяет поменять обработчик и сделать асинхронный запрос, меняя статусы элементов без перезагрузки страницы.
(Скриптик писался только под статусы publish/unpublish. Кому нужны большее количество статусов легко сможет переписать)
Код
/** асинхронная обработка publish/unpublish **/
jQuery(function () {
// поиск кнопок на странице - это A кнопки с вложенными элементами несущими иконки
$btn = jQuery('a.btn.btn-micro:has(.icon-publish), a.btn.btn-micro:has(.icon-unpublish)');
$btn.each(function () {
var $this = jQuery(this);
// ищем значение task в обработчике onclick
var command = /'(\w+)\.(\w+)'/.exec($this.attr('onclick'));
// если task успешно найдена, меняем обработчик
if (command !== undefined) {
var controller = command[1];
var act = command[2];
// удаляем обработчик onclick и сохраняем данные в элемент
$this.attr('onclick', false).data('controller', controller).data('act', act);
// вешаем новый обработчик click
$this.click(function (e) {
e.preventDefault();
//сбрасываем все установленные check
jQuery('input[type=checkbox]', '#adminForm').attr('checked', false);
// устанавливаем чекбокс на выбранной строке
jQuery('input[type=checkbox]', $this.closest('tr')).attr('checked', true);
// task  определяется по установленной иконке
var controller = $this.data('controller');
var act = $this.data('act');
var task = controller + '.' + act;

// элемент который несет иконку publish
var $icon = jQuery('[class^=icon]', $this);

var $form = $this.closest('form');

jQuery('input[name=task]', $form).val(task);
// может не работать на старых браузерах
var formData = new FormData($form.get(0));

jQuery.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
contentType: false,
processData: false,
data: formData,
//dataType: 'json',
success: function () {
$icon.toggleClass('icon-publish').toggleClass('icon-unpublish');
if (act === 'unpublish') {
$this.data('act', 'publish');
} else {
$this.data('act', 'unpublish');
}
jQuery('input[type=checkbox]', $this.closest('tr')).attr('checked', false);
}
});
});
}
});
});
У меня работает корректно даже при частых кликах
« Последнее редактирование: 19.10.2015, 17:00:00 от zaboich »