[решено] Слетает стилизация форм

Аватар пользователя shevgeny shevgeny 29 июля 2015 в 13:19

Решил формы чуть-чуть посимпатичней сделать. Нашел скрипт — http://dimox.name/jquery-form-styler/ и применил его привычным образом:

(function($) {
        Drupal.behaviors.StyleForms = {
                attach: function (context, settings) {

                        $('input,select').styler();
                        $('input[type="text"],textarea,input[type="submit"],input[type="password"]').addClass('styler');

                        if (typeof WebFont != 'undefined') {
                                WebFontConfig = {
                                        custom: {
                                                families: ['Roboto','Roboto Condensed']
                                        },
                                        active: function() {
                                                $('select,:checkbox,:radio').trigger('refresh');
                                        }
                                };
                                WebFont.load(WebFontConfig);
                        }
     
                }
        };
})(jQuery);

Вроде всё применяется. Но при подгрузке таких полей, как «файл» или «изображение», а также при нажатии на «загрузить» в них — стилизация слетает. Для наглядности, видео-демонстрация — http://youtu.be/PSlvhlQpVpk

[решено] Был конфликт с модулем Form_Placeholder

Комментарии

Аватар пользователя sas@drupal.org sas@drupal.org 29 июля 2015 в 17:03

Попробуйте к селекторам добавить context

$('input,select', context) ...

Если не прокатит, то надо отслеживать событие измения элементов на которые вешаетесь.

Аватар пользователя shevgeny shevgeny 29 июля 2015 в 18:12

<a href="mailto:sas@drupal.org">sas@drupal.org</a> wrote:
Попробуйте к селекторам добавить context

$('input,select', context) ...

Если не прокатит, то надо отслеживать событие измения элементов на которые вешаетесь.


Спасибо за ответ. К сожалению, ваше предложение никак не повлияло. Но я обнаружил интересную особенность: такая ситуация только с полями «файл» и «изображение». Однако другие поля, подгружаемые динамически (те же https://www.drupal.org/project/hierarchical_select) подхватывают скрипт без проблем.

Аватар пользователя sas@drupal.org sas@drupal.org 30 июля 2015 в 8:18

Дело в том, что Framework ajax рассчитан на то что attach применяется к новому context DOM автоматически, проверьте какие теги возвращают нужные Вам «файл» и «изображение» - возможно в них уже селекторы которые Ваш js - не учитывает?!

Аватар пользователя shevgeny shevgeny 30 июля 2015 в 9:16

<a href="mailto:sas@drupal.org">sas@drupal.org</a> wrote:
Дело в том, что Framework ajax рассчитан на то что attach применяется к новому context DOM автоматически, проверьте какие теги возвращают нужные Вам «файл» и «изображение» - возможно в них уже селекторы которые Ваш js - не учитывает?!

не совсем понял. Что вы имеете ввиду, говоря о возвращаемых тегах? Вроде всё то же, что и до применения скрипта и нажатия на кнопку.

Аватар пользователя shevgeny shevgeny 30 июля 2015 в 13:09

<a href="mailto:sas@drupal.org">sas@drupal.org</a> wrote:
console молчит ?

хм… вы о console.log()? не знаю, как этим пользоваться, в js знаком только с элементарными задачами.
Но вот что увидел в файербаге — http://youtu.be/X1ER3VUSPwc
Правда, причем здесь placeholder вообще не понимаю

Аватар пользователя shevgeny shevgeny 30 июля 2015 в 13:12

<a href="mailto:sas@drupal.org">sas@drupal.org</a> wrote:
console молчит ?

однако, отключив модуль «form_placeholder» — реально всё заработало нормально Smile

Аватар пользователя sas@drupal.org sas@drupal.org 30 июля 2015 в 21:37

Console = F12 например в Chrome. Вы отловили ошибку js в FF - то же самое. Значит таки скрипты подрались Smile