Наверх

JS-скрипты

Для работы модуля часто нужен отдельный JavaScript-сценарий. Есть два пути их подключения:

Автоматическое подключение

Файл modules/модуль/js/модуль.js подключается автоматически к странице с прикрепленным модулем. Файл modules/модуль/js/модуль.шаблон.js подключается автоматически к шаблону модуля.

Пример:

К шаблону modules/shop/views/shop.view.buy_form.php автоматически подгрузиться файл modules/shop/js/shop.buy_form.js.

Файл modules/shop/js/shop.js подгрузиться на всех страницах модуля (если модуль подключен к странице сайта), но не подгрузиться к шаблонным тегам модуля.

Файлы не дублируются. Например, файл modules/shop/js/shop.buy_form.js подключится один раз, даже если кнопка «Купить» будет выведена несколько раз.

Ручное подключение.

Можно указать непосредственно скрипт, который нужно подключить. Сделать это можно в любом месте: в шаблоне или в моделе модуля.

Пример:

// внутренняя ссылка
$this->diafan->_site->js_view[] = 'modules/search/js/search.show_search.js';
// внешняя ссылка
$this->diafan->_site->js_view[] = 'http://www.google.com/recaptcha/api/js/recaptcha_ajax.js';

Все JS-файлы модулей собираются пока генерируются страница и выводятся шаблонным тегом show_js. Все локальные файлы сжимаются, некоторые файлы подгружаются асинхронно. Важно, чтобы шаблонный тег <insert name="show_js">, подключающий JS-файлы, был в конце HTML-документа. Перед закрывающим тегом </body>.

Стандартная обработка Ajax-запросов

В DIAFAN.CMS предусмотрена отправка данных формы Ajax-запросом, если у формы есть атрибут class="ajax". Ответ принимаются данные в формате JSON, которые всегда одинаково обрабатывается. Стандартно обработаются следующие данные (задается в modules/модуль/модуль.action.php).

Пример:

// произойдет редирект на главную
$this->result["redirect"] = '/';

// сообщения подставляются в специальные поля
// общее сообщение добавиться в контейнер <div class="error"></div> обычно под кнопкой <input type="submit">
$this->result["errors"][0] = 'Общее сообщение для всей формы';
// сообщение для конретного поля добавиться в контейнер <div class="error_name"></div>
$this->result["errors"]["name"] = 'Введите имя';

$this->result["data"] = array(
    
// "данные" подставятся в блок <div class="target"></div>
    
".taget" => "данные",
    
// "data" подставятся в блок <div id="target2"></div>
    
"#target2" => "data",
    
// "текст вместо формы" заменит форму
    
"form" => "текст вместо формы",
    
// блок <div class="target3"></div> будет скрыт
    
".target3" => false,
);

// обновиться капча
$this->result["captcha"] = 'код капчи';

// очистит форму
$this->result["result"] = "success";

// добавит данные в конец блока `<div class="значение_атрибута_id_формы"></div>`
$this->result["add"] = "данные";

// подгрузить загруженные файлы
$this->result["attachments"] = "блок загруженных файлов";

// подгрузить загруженные изображения
$this->result["images"] = "блок загруженных изображений";

// обновит идентификационный хэш пользователя
$this->result["hash"] = "новый хэш";

В JS-файле модуля можно дописать свою обработку для действия перед отправкой формы и при получении результатов. Эти действия дополнят стандартную обработку, если функция вернула true, или заменят её, если функция вернула false. Формат:

diafan_ajax.before['метка_формы'] = function(form){}

diafan_ajax.success['метка_формы'] = function(form, response){}

Метка формы состоит из названия модуля и действия формы. То есть из содержимого полей формы:

<input name="module">
<input name="action">

Пример:

// перед отправкой формы поиска объявления функция смотрит есть ли на странице контейнер <div class="ab_list"></div>
// если есть, то данные отправляются Ajax-запросом
diafan_ajax.before['ab_search'] = function(form){
    if(! $(
".ab_list").length)
    {
        $(
form).removeClass('ajax').submit();
        return
false;
    }
    $(
form).attr('method', 'POST');
}

// когда ответ пришел, то данные помещаются в контейнер <div class="ab_list"></div>
// и отменяется стандартная обработка
diafan_ajax.success['ab_search'] = function(form, response){
    var
k = 0;
    $(
".ab_list").text('');
    $(
".ab_list").first().html(response.data).focus();
    return
false;
}

Ваши комментарии и дополнения

А если несколько ajax форм на одной страничке они конфликтуют из-за одинаковых методов вида diafan_ajax.before['feedback_add']
Или в action нужно добавить add2 чтобы можно было писать diafan_ajax.before['feedback_add2'] ?
Опять таки об этом нигде ни слова не сказано.
Документация хилая код комментариями не покрыт.
=========================================================
Нашёл самый лаконичный вариант это добавить свой case в файл feedback.php
add2 например и соответственно в форму тоже в <input name=action value="add2">
Если требуются лишь поверхностные изменения: без доработки модели, то легче сделать следующим образом:
нужным формам в шаблоне прописать отличный класс или айди, а в функциях diafan_afax.before[success] тупо проверять является ли наша форма нужной:
Код

if( $(form).is('.form1') ) {
...
return;
}

А как можно передать значение переменной из php в скрипт js?
Используй js внутри php, создай переменную в js и помести туда <?php $myVar ?>
Цитата
Используй js внутри php, создай переменную в js и помести туда <?php $myVar ?>

Вот так делать нельзя! Как говорит один мой знакомый, работать так конечно будет, но есть вероятность, что вам оторвут руки. В JS скриптах не должно быть никакого php кода! Если человек так пишет, возникает подозрение, что он не понимает разницы между серверными и клиентскими языками.

Как надо делать: Допустим мы хотим хранить в базе таймаут анимации галереи, и чтоб наш JS работал с этим таймаутом. Для этого:
Вытаскиваем из базы значение таймаута вместе со всеми остальными данными нашей галереи(не важно каким образом вы это делаете, через айпи cms-и или прямым SQL запросом), и помещаем их в массив вместе с другими данными, например в $result['settings']['timeout'].
Теперь печатаем эту переменную в div обёртки нашей галереи (спецификация HTML5 позволяет так делать):
<div class="gallery_wrapper" timeout="<? print($result['settings']['timeout'] ?>">
<!--всё содержимое галереи-->
</div>
Так во врайпер галереи можно печатать хоть 10 её параметров. Ну а в JS остаётся его вытащить:
timeout = $('div.gallery_wrapper').attr('timeout');
Цитата
Вот так делать нельзя! Как говорит один мой знакомый, работать так конечно будет, но есть вероятность, что вам оторвут руки. В JS скриптах не должно быть никакого php кода! Если человек так пишет, возникает подозрение, что он не понимает разницы между серверными и клиентскими языками.


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

Если есть четкое понимание зачем так делать, то абсолютно ничего плохого в этом нет, не нужно дезинформировать начинающих программистов. Руки оторвут только если это делается в большом проекте, где код нужно постоянно поддерживать и развивать.
Зарегистрируйтесь или авторизируйтесь для того, чтобы оставить комментарий.