Перейти к содержимому


Фотография
* * * * * 2 Голосов

AJAX фильтр

рецепт фильтр ajax

Сообщений в теме: 69

#1 Cheren-dow

Cheren-dow

Отправлено 26 November 2013 - 10:43

*
Популярное сообщение!

Модификация модуля mod_jbzoo_search. Отправка данных с формы фильтра и подгрузка материалов без перезагрузки страницы.

 

Есть в модуле фильтра опция авто-отправки формы

aa633d_200x0.png
 
Все хорошо, НО при каждом действии перезагружается(отправляются данные) страница, а мне этого не надо было. Вот и решил я немного изменить скрипт авто-отправки и сделать это на AJAX.

 

-= 1. Создаем маленький jQuery плагин =-

Переходим в папку

сайт\modules\mod_jbzoo_search

Создадим папку js, а в ней файл default.js

091c23_200x0.png

 

В default.js добавляем следующий код

jQuery(function($){
    $.fn.JBZooAjaxUpdateContent = function(options){

        var settings = $.extend( {
            'url'    : '',
            'params' : '',
            'formId' : '',
            'updateBlock' : '#yoo-zoo'
        }, options);

        $('body').append( "<div id='fancybox-loading'><div></div></div>");
        $.ajax({
            url : settings.url + settings.params + '&tmpl=raw',
            type: 'get',
            dataType: 'html',
            success: function(data){
                $('#fancybox-loading').remove();
                $(settings.updateBlock).html($(data).html());
            }
        });

    };
}); 

 
-= 2. Подключаем наш jQuery плагин =-

В файле шаблона

сайт\modules\mod_jbzoo_search\tmpl\default.php 

находим строку

$zoo = App::getInstance('zoo');

после нее вставляем(подключаем js который мы создали) следующий код

$zoo->document->addScript('mod_jbzoo_search:js/default.js');

-= 3. Инициализация плагина =-

Ниже находим следующий код и меняем его

<?php if ((int)$params->get('autosubmit', 0)) : ?>
    <script type="text/javascript">
        jQuery(function ($) {
            $('#<?php echo $formId;?> select, #<?php echo $formId;?> input[type=radio], #<?php echo $formId;?> input[type=checkbox]').change(function () {
                $(this).closest("form").submit();
            });
        });
    </script>
<?php endif; ?>

на

<?php if ((int)$params->get('autosubmit', 0)) : ?>
    <script type="text/javascript">
        jQuery(function ($) {
            $('#<?php echo $formId;?> select, #<?php echo $formId;?> input[type=radio], #<?php echo $formId;?> input[type=checkbox]').change(function () {
                $.fn.JBZooAjaxUpdateContent({
                    'url'   : '<?php echo JRoute::_('index.php?Itemid=' . $params->get('menuitem', JRequest::getVar('Itemid'))); ?>?',
                    'params': $('#<?php echo $formId;?>').serialize(),
                    'formId': '<?php echo $formId;?>'
                });
            });
        });
    </script>
<?php endif; ?>

И радуемся. Форма отправляется через AJAX, пока сервер думает мы любуемся анимацией, а как данные пришли в указанный блок(в примере это корневой блок контента ZOO) подгружаются найденные материалы.

 

Что нового?

1. По большому счету изменения не такие уж и большие js код переделан в маленький jQuery плагин и теперь находится в отдельном файле.

 

2. Выглядит красиво и не занимает теперь много место в шаблоне модуля

 

3. Подгрузка контента происходит теперь быстрее, за счет того что не подгружается лишний контент с сайта.

 

По умолчанию обновляется блок с id yoo-zoo

6d3bab_200x0.png

Если у кого то по каким то причинам его нет вы можете указать сами какой блок обновлять, добавив дополнительный параметр плагина

8e8495_200x0.png

Теперь будет искаться и производиться загрузка контента в блок с id yoo-zoo-my-block

 

Подводные камни?

Наверно самый большой камень - это то что ни какие кнопки(добавить в корзину,избранное,сравнение , то же самое касается кнопок удаления и увеличения картинок FancyBox) на которые повешены JS скрипты работать внутри подгруженного контента не будут.

 

 

 

Измененные и добавленные файлы:

сайт\modules\mod_jbzoo_search\tmpl\default.php // изменен
сайт\modules\mod_jbzoo_search\js\default.js    // добавлен

Для тех кто ленится что то сделать руками сделал патч:

Прикрепленный файл  mod_jbzoo_search_patch_for_v2.1.2.pro.zip   3.57К   60 Количество загрузок:

 

 

 

ВНИМАНИЕ!!!

  • Будьте внимательны при замене файлов.
  • Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
  • Это решение(модификация) тестировалось на 
    Joomla: 3.1.5
    JBZoo: 2.1.2 Pro
    Zoo: 3.0.13,

    подойдут так же ранние версии начиная с v 2.0.X.
  • Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
  • При появлении проблем Тех.Поддержка ответственности не несет. 

Изменено: 02.05.2014


Сообщение отредактировал SmetDenis: 05 February 2014 - 19:59

  • 18
Изображение
 

#2 i001

i001

Отправлено 28 November 2013 - 11:53

круто!


  • 0

#3 kuzmahan

kuzmahan

Отправлено 28 November 2013 - 12:02

это пять!


  • 0

#4 Na_uM

Na_uM

Отправлено 28 November 2013 - 13:22

анимацией то любуемся, но вот что то не видно что пришло обратно


  • 0

#5 Cheren-dow

Cheren-dow

Отправлено 28 November 2013 - 13:36

анимацией то любуемся, но вот что то не видно что пришло обратно

 

Значит какие то у вас проблемы. Код полностью рабочий. Смотрите и проверяйте по внимательнее.


  • 0
Изображение
 

#6 Артём

Артём

Отправлено 28 November 2013 - 14:57

Очень хотелось бы видеть такие вещи в стандартной сборке с возможностью активации/дезактивации из админки. Спасибо за рецепт.


  • 0
в ЛС не писать | коплю карму

#7 Cheren-dow

Cheren-dow

Отправлено 28 November 2013 - 15:02

Так его можно вкл или вкл в настройках (Автоотправка формы). Я думаю он в сборке не нужен. Тут ни чего сложного нет что бы самому это дело прикрутить.


  • 0
Изображение
 

#8 Артём

Артём

Отправлено 28 November 2013 - 15:55

Про автоотправку я в курсе, и даже если бы не был, по скриншоту в первом посте это почти понятно ;) я про опцию "без перезагрузки страницы".   Может кому-то и не сложно, но мне в голову вообще идея не приходила облагородить автоотправку, сейчас смотрю и понимаю, что вот так реально удобней и можно применить на своём сайте.


  • 1
в ЛС не писать | коплю карму

#9 dimkarc

dimkarc

Отправлено 27 December 2013 - 23:20

Значит какие то у вас проблемы. Код полностью рабочий. Смотрите и проверяйте по внимательнее.

 

а что проверять? все скопирована и сделано по вашему примеру.

 

но анимация есть фильтр не срабатывает  


  • 0

#10 Cheren-dow

Cheren-dow

Отправлено 27 December 2013 - 23:53

Можете дать ссылку на сайт?


  • 0
Изображение
 





Темы с аналогичным тегами рецепт, фильтр, ajax

Click to return to top of page in style!