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



Вопрос по коду jQuery

#1 Ixman

Ixman
  • Пользователь PRO
  • 2 851 сообщений
  • Репутация: 714
0

Отправлено 11 Январь 2018 - 19:19

Может кто из опытных разжуёт мне в чём принципиальное отличие двух кусочков кода, так как визуально они делают одно и то же.

$('#comments').fadeOut('fast', function() {
    $(this).append(data).fadeIn('slow');
});

от

$('#comments').hide().html(data).fadeIn('slow');

Собственно клик подгружает на страницу форму и пару скриптов. Плагин валидации форм и правила валидации полей формы. Так вот при первом варианте кода правила валидации формы вообще никак не реагируют, а вот при втором работают. Причём, даже если итак сделать

$('#comments').fadeOut('fast', function() {
    $('#comments').html(data).fadeIn('slow');
});

то разницы никакой. Валидация не работает.


 

 

  • 0


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Ajax запрос - как передать в функцию id?
  2. Добавить class="active" в меню, выводимое с помощью цикла
  3. Как получить сервером содержимое javascript по url со стороны клиента
  4. Не понятная ошибка JS при оптимизации WP под PageSpeed Insights
  5. Вопрос по JS и jQuery - теория и практика

#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 955 сообщений
  • Репутация: 781

Отправлено 11 Январь 2018 - 20:31

@Ixmanполучается что вопрос сводится к "в чём разница между append и html"? Так что-ли?

Вопрос снимается как дурацкий после внимательного прочтения стартпоста  :)

 

В качестве data у тебя что?

 

Не может быть это проблемой аналогичной моей "с областью видимости переменных"?


Сообщение отредактировал ShowPrint: 11 Январь 2018 - 20:36

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 955 сообщений
  • Репутация: 781

Отправлено 11 Январь 2018 - 20:49

Сижу, смотрю, туплю...

 

Первый вывод который напрашивается - правила валидации могут быть не видны за пределами функции их загрузившей, т.е. fadeOut('fast', function() {


Сообщение отредактировал ShowPrint: 11 Январь 2018 - 20:50

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 Ixman

Ixman
    Topic Starter
  • Пользователь PRO
  • 2 851 сообщений
  • Репутация: 714

Отправлено 11 Январь 2018 - 20:50

В качестве data у тебя что?

 

data содержит html код, который получен через ajax запрос

 

Не может быть это проблемой аналогичной моей "с областью видимости переменных"?
 

 

не думаю что это, но чем чёрт не шутит. Да и сами правила валидации я прописывал в код страницы по разному. Сработало только тогда, когда прописал их прямо в код шаблона формы. Но меня такой вариант не устраивает, так как js код в теле страницы не хорошо.


  • 0


#5 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 955 сообщений
  • Репутация: 781

Отправлено 11 Январь 2018 - 21:07

data содержит html код, который получен через ajax запрос
В том числе и правила валидации? Я так понял что они у тебя на js, нэ?

 

По приведенному коду и условию что в data содержится html код, то ты его просто добавляешь к комментам. Не сильно понимаю как (куда/когда) грузятся правила валидации...

 

Иван, если это не сильно большой секрет, то кинь в ЛС не сильно большой, но понятный кусок кода и пример data (просто в виде строки).

Сейчас ужо убегаю, а завтра после работы могу попробовать включить моск и подумать.


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 Ixman

Ixman
    Topic Starter
  • Пользователь PRO
  • 2 851 сообщений
  • Репутация: 714

Отправлено 11 Январь 2018 - 21:23

@ShowPrint, ноутбук на работе остался. Сейчас не могу кинуть код. Если только завтра вечером.

 

 

 

В том числе и правила валидации? Я так понял что они у тебя на js, нэ?

 

 

да они на js

 

Завтра выложу более подробный код, будет понятнее


Сообщение отредактировал Ixman: 11 Январь 2018 - 21:24

  • 0


#7 fedornabilkin

fedornabilkin
  • Модератор
  • 1 114 сообщений
  • Репутация: 180

Отправлено 11 Январь 2018 - 22:26

Кидай код сюда, я тоже по возможности гляну завтра. Очень уж заинтересовал код. Непонятно для чего скрывать и сразу же открывать.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#8 ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 955 сообщений
  • Репутация: 781

Отправлено 11 Январь 2018 - 23:42

да они на js
Вполне возможно что JS остаётся внутри функции.

 

Можно проверить - вернуть внутри скрипта переменную/функцию и посмотреть существует ли она:

а) внутри функции (сразу после загрузки);

б) за функцией (сразу после её закрытия).

 

Забрасывай код, Федор точно причину найдёт ;)  


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#9 Ixman

Ixman
    Topic Starter
  • Пользователь PRO
  • 2 851 сообщений
  • Репутация: 714

Отправлено 13 Январь 2018 - 11:36

Итак собственно  код

 

Загружаем форму и скрипты по клику

                $(document).on('click', '.load-comments', function(e) {
                    urls = ['https://www.google.com/recaptcha/api.js', '/js/plugins/validate/comments.js?v=1.30', '/js/plugins/validate/additional-methods.min.js', '/js/plugins/upload/jquery.form.min.js'];
                    e.preventDefault();
                    $.ajax({
                        type: 'GET',
                        cache: false,
                        data: {
                            id: <?=$data['id'];?>
                        },
                        url: '/comments',
                        success: function(data) {
                            loadJavaScript(urls);
                            $('#comments').hide().html(data).fadeIn('slow');
                        }
                    });
                });

в коде есть функция подгружающая по клику необходимые скрипты, для большей ясности сама функция прилагается

function loadJavaScript(urls) {
    urls.forEach(function(url, i) {
        var script = document.createElement('script');
        script.src = url;
        script.setAttribute('data-load', 'ajax');
        script.setAttribute('async', '');
        script.setAttribute('defer', '');
        document.body.append(script);
    });
}

Файл comments.js прикрепил к посту в виде txt. Он не конечен и часть кода буде от туда убрана. Но проблема именно в нём. Не работала именно эта часть кода

$('#commentsForm').validate({
    errorClass: 'error',
    validClass: 'success',
    errorPlacement: function(error, element) {
        element.closest('p').after(error);
    },  
    ignore: '.ignore',
    rules: {
        c_author: {
            required: true,
            rangelength: [2, 20],
            checknames: true
        },
        c_email: {
            required: true,
            checkEmail: true
        },
        c_message: {
            required: true,
            rangelength: [10, 1000]
        }
    },
    messages: {
        c_author: {
            required: 'Пожалуйста представьтесь',
            rangelength: 'Имя от 2 до 20 символов',
            checknames: 'Только рус. и анг. буквы'
        },
        c_email: {
            required: 'Укажите ваш email',
            checkEmail: 'Введите корректный email адрес'
        },
        c_message: {
            required: 'Введите сообщение',
            rangelength: 'Сообщение от 10 до 1000 символов'
        }
    },
    invalidHandler: function(form) {
        grecaptcha.reset();
    },
    submitHandler: function(form) {
        grecaptcha.execute();
    }
});

Ещё прикрепил шаблон формы, но он по сути не важен здесь.

 

 

Это код 

$('#comments').hide().html(data).fadeIn('slow');

понятно можно упростить до

$('#comments').html(data).fadeIn('slow');

если блоку #comments задать свойство display:none чтобы он плавно появлялся


Какие ещё данные нужны для полной картины происходящего, хотя суть вопроса не в этом.

Прикрепленные файлы

  • Прикрепленный файл  comments.tpl.txt   4,56К   Количество загрузок: 12
  • Прикрепленный файл  comments.txt   4,04К   Количество загрузок: 7

  • 0


#10 fedornabilkin

fedornabilkin
  • Модератор
  • 1 114 сообщений
  • Репутация: 180

Отправлено 13 Январь 2018 - 17:01

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

Я не нашел то место, где происходит вызов валидации формы. $('#commentsForm').validate({ насколько я понял, это только установка конфигурации.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85

Оформление форума – IPBSkins.ru