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



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

#1 Ixman

Ixman
  • Пользователь PRO
  • 2 839 сообщений
  • Репутация: 702
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. Передача параметров в jQuery функцию
  2. Получение данных из блока (jquery)
  3. Оффлайн справочник по jQuery?
  4. Не понятная ошибка JS при оптимизации WP под PageSpeed Insights
  5. Вопрос по JS и jQuery - теория и практика

#2 ShowPrint

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

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

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

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

 

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

 

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


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

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


#3 ShowPrint

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

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

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

 

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


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

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


#4 Ixman

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

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

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

 

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

 

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

 

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


  • 0


#5 ShowPrint

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

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

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

 

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

 

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

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


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


#6 Ixman

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

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

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

 

 

 

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

 

 

да они на js

 

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


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

  • 0


#7 fedornabilkin

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

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

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


  • 0

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



#8 ShowPrint

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

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

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

 

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

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

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

 

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


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


#9 Ixman

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

Отправлено 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К   Количество загрузок: 5
  • Прикрепленный файл  comments.txt   4,04К   Количество загрузок: 5

  • 0


#10 fedornabilkin

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

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

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

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


  • 0

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



robot

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


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