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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 81 0 тем, 54 сообщения, 1 балл репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 63 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 51 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #4

    Ixman (o5cat.ru)
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

  • Фотография WGN
    #6

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 30 2 темы, 14 сообщений, 1 балл репутации

  • Фотография алексс
    #8

    алексс
    Очков активности: 25.5 2 темы, 11 сообщений, 1 балл репутации

  • Фотография Mariko
    #9

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография RosenRot
    #10

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 15.11.2018
Топ 5 участников по репутации


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

#1 Ixman

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

Отправлено 11 January 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


#2 ShowPrint

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

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

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

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

 

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

 

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


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

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


#3 ShowPrint

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

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

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

 

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


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

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


#4 Ixman

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

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

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

 

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

 

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

 

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


  • 0


#5 ShowPrint

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

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

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

 

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

 

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

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


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


#6 Ixman

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

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

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

 

 

 

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

 

 

да они на js

 

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


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

  • 0


#7 fedornabilkin

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

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

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


  • 0

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



#8 ShowPrint

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

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

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

 

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

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

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

 

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


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


#9 Ixman

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

Отправлено 13 January 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К   Количество загрузок: 16
  • Прикрепленный файл  comments.txt   4.04К   Количество загрузок: 12

  • 0


#10 fedornabilkin

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

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

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

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


  • 0

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



#11 Ixman

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

Отправлено 13 January 2018 - 17:04

@fedornabilkin, плагин подключен к сайту постоянно https://jqueryvalidation.org/

 

По сути это как бутсрап. Недостатки есть, но те задачи, которые решаются данным плагином, без разработки собственного кода, являются жирным плюсом, экономящим время.


  • 0


#12 fedornabilkin

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

Отправлено 13 January 2018 - 18:07

Могу предположить, что валидация не срабатывает потому что не находит объект валидирования. Плагин инициализируется при загрузке страницы, а формы в DOM еще нету.


  • 0

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



#13 Ixman

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

Отправлено 13 January 2018 - 18:21

@fedornabilkin, вопрос то был, почему такой вариант не работает

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

по отношению к такому

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

Всего скорее правильно предположил Михаил, внутри функции не видно объект валидирования.

 

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

 

Но думаю правильнее переложить скрытие элемента на css, а не делать это средствами js.


  • 0


#14 fedornabilkin

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

Отправлено 13 January 2018 - 23:17

Стилями всегда лучше. А js только нужный класс добавил/убрал и все. Можно и анимацию прикрутить на CSS.


  • 1

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



#15 Ixman

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

Отправлено 14 January 2018 - 10:08

@fedornabilkin, на счёт анимации на CSS да это сегодня уже норма. Браузеры сменились почти повсеместно, да и ОС уже тоже.


  • 0


#16 ShowPrint

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

Отправлено 15 January 2018 - 14:03

внутри функции не видно объект валидирования

А не пробовал добавить какую-то тестовую переменную/объект и в разных местах кода посмотреть её видимость, например через typeof или банальный alert?


Сообщение отредактировал ShowPrint: 15 January 2018 - 14:03

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


#17 Ixman

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

Отправлено 15 January 2018 - 19:02

@ShowPrint, я забил на эту проблему и разбор почему,  так как сделал код короче. Пока не до этого


Сообщение отредактировал Ixman: 15 January 2018 - 19:03

  • 0


robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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