Ответы пользователя по тегу JavaScript
  • Как делаются нестандартные элементы форм доступными, кроссбраузерными?

    @alexalexes
    В идеале, в шапке страницы сайта должен быть переключатель версии дизайна для слабовидящих (по значимости такой же как RUS/ENG).
    Тут есть рекомендации, как сделать версию сайта для слабовидящих. В том числе, обозначен совет, как сделать так, чтобы скринридеры читали заголовки полей формы, но сами заголовки визуально не отображать.
    Если лейбл нужно скрыть, расположите его перед полем, используйте привязку атрибута for и специальный класс для вспомогательных технологий:

    .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    }
    Этот класс скрывает лейбл визуально, но его прочтут скринридеры. Обратите внимание, что скринридеры и другие вспомогательные технологии, как и браузеры, скрывают элементы с использованием display: none и visibility: hidden.
    Ответ написан
    4 комментария
  • Как принудительно установить Cookie на своем сайте?

    @alexalexes
    Поставили тег Javascript, а сами пример показываете с подключением CSS, хотя он и рядом не стоял.
    В общем, это предмет целой статьи, изучайте.

    PS: Есть подозрение, что вам нужно настроить на стороне сервера какой-то особый отклик на GET-параметр "wmc-currency=EUR", но вы должны понять, нужно ли вам это, потому что есть другие решения для установки кук и они работают в JS.
    Ответ написан
    3 комментария
  • Как отправить mp3 файл на сервер?

    @alexalexes
    1) Можно традиционным образом. В форме использовать тег input с типом file с выставленным ограничением принимать только *.mp3. Форма отправляется по кнопке с типом submit.
    2) Продвинутым способом. В форме также используется тег input с типом file с выставленным ограничением принимать только *.mp3. Отличие в том, что вам нужно поля формы отправить непременно только через ajax-запрос. В этом случае поле с файлом вычитывается с помощью объекта FileReader (старые браузеры его не имеют, например, IE 10-, так что для них не катит способ), формируется особым образом бинарный пакет запроса и этот пакет в виде base64 передается аяксом на сервер.
    PS: какой бы способ отправки вы бы не выбрали, файл в любом случае можно прицепить к форме только по инициативе пользователя, не зависит от того, используете вы простую отправку формы или пытаетесь забрать файл из input-а FileReader-ом.
    Ответ написан
    Комментировать
  • Отправка двух форм по нажатию одной кнопки?

    @alexalexes
    У вас при первом отображении $_SESSION["a"] и $_SESSION["b"] не заполнены, соответственно, при выводе второй формы будет вот так.
    <input type="hidden" id = "nserver" name="nserver" value="">
          <input type="hidden" id = "registrar" name="registrar" value="">

    Придумайте, как обработать состояние, когда поля nserver === '' и registrar === '' или как забить $_SESSION["a"] и $_SESSION["b"] дефолтными значениями, и будет работать.
    Ответ написан
  • Как делается drag and drop на странице?

    @alexalexes
    Может быть реализовано на нативном JavaScript путем навешивания обработчиков событий onmousedown, onmousemove, onmouseup на манипулируемый элемент (событие onmousedown), а также на заполняющий всю площадь страницы контейнер (события onmousemove, onmouseup). Естественно, механику взаимодействия элементов и отслеживания фазы drag and drop вам придется реализовать самостоятельно.
    PS: При реализации drag and drop не забудьте про пользователей с сенсорным экраном. У них другая группа событий: ontouchstart, ontouchmove, ontouchend, и число точек касаний у них может быть больше чем одна.
    Ответ написан
    Комментировать
  • Почему всегда выводит Not Include после refreshData()?

    @alexalexes
    Вместо этого условия, посмотрите, что у вас формируется в переменной pageAvailable при помощи точки останова или выведите непосредственно ее в лог.
    if (pageAvailable == false) {
                                        console.log("Not Include");
                                    } else{
                                        console.log("Include");
                                    }

    Тогда поймете, что у вас возникнет одна из двух ситуаций:
    - либо сравнение нужно до типа данных использовать: вместо == на ===.
    - либо вот это Object.values(response['data']).some(n => n.name === 'ArmPaper Idea'); не вылавливает из объекта response['data'], то что вы хотите выловить.
    Ответ написан
    Комментировать
  • Как распарсить данные с json?

    @alexalexes
    Соответствующей функцией:
    https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Ответ написан
    Комментировать
  • Не приходят формы с сайта на почту?

    @alexalexes
    У вас что клиентский, что серверный скрипт не имеют функционала оповещать пользователя о возникшей ошибке.
    php-скрипт должен отдавать хоть малюсенькое текстовое сообщение, что удалось отправить почту.
    ....
    $send_result = mail($admin_email, adopt($form_subject), $message, $headers );
    echo $send_result ? 'success' : 'fail';

    Клиентский скрипт должен иметь возможность в коллбэк функции done словить это сообщение:
    ...
    ).done(function(e)
    {
        var resp = e.responseText;
        alert(resp === 'success' ? 'Сообщение отправлено!' : 'Ошибка отправки сообщения');
    ....
    }

    Для аякса хорошо бы еще добавить функцию fail(), когда серверный скрипт вообще не отвечает.
    $.ajax({
          type: "POST",
          url: "../js/mail.php", //Change
          data: th.serialize()
        }).done(function(e) {
         .......
        }).fail(function()
        {
          alert('Фатальная ошибка отправки!');
        });

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

    @alexalexes
    А что мешает плюсануть текст в нужном месте?

    ......('span').html( '<i class="new"></i>' + $('#form-uploa......


    PS: правда для вывода текста в тег использовать не метод text(), а html().
    Ответ написан
  • Как выполнить нужные условия до и после определенной даты JS?

    @alexalexes
    var now = new Date(); // Текущая дата
           var event_date = new Date ("Jul 17 2018 11:30:00 GMT+0300"); // дата события (+ часовой пояс, крайне обязательно)
           var dif_time = now.getTime() - event_date.getTime(); // разность в милисикундах по UTC (время приведено в один часовой пояс, крайне удачно)
           var duration = 60 * 60 * 1000; // время длительности вебинара в милисекундах
           switch(true)
           {
               case dif_time < 0:
                // действия до события
                break;
              case dif_time >= 0 && dif_time < duration:
                // действия во время события до окончания, (dif_time / 1000) - куда перематывать
                break;
              case dif_time >= duration:
                // действия после окончания события
                break;
           }
    Ответ написан
    4 комментария
  • Почему на MacOS криво работает кнопка наверх?

    @alexalexes
    У вас очень тяжелый файл www.annalev.ru/static/bundle/js/bundle.min.js, в котором лежит функция скроллинга, пока он не загрузиться на клиенте полностью, скроллинг не будет работать.
    Решить проблему можно несколькими путями:
    1) Все легковесные функции, которые не зависят от библиотек поместить в отдельный файл, который будет подключаться выше списком, чем тяжеловесные js.
    2) Написать код легковестных функций прямо в документе (или в общем шаблоне страниц, где описывается head или footer, в случае если у вас CMS);
    3) Написать обработчик скроллинга непосредственно в атрибуте onclick.
    PS: Дополнительно, посмотреть, какой функционал можно "выбросить" в подключенных библиотеках.
    Например, на JQuery можно опционально отключать некоторые возможности и скачивать js-файл значительно меньших размеров, чем в полной комплектации.
    Ответ написан
    4 комментария
  • Почему некорректно скачивается pdf в firefox?

    @alexalexes
    Приведенный код напрямую не связан с технологией ajax. Он всего лишь подставляет в элемент с id-шником lp-download-pdf свойства href (по наличию этого свойства можно догадаться, что это элемент-ссылка) и download, затем, принудительно программно запускает событие клика, словно по элементу нажал пользователь.
    Как браузер отреагирует на двойное "роботизированное" нажатие на ссылку с одним и тем же href можно только догадываться. Можно попытаться сделать ссылку при каждом нажатии уникальной.
    Подставьте на этом этапе какой-нибудь рандомный параметр к ссылке:
    .attr('href', string.trim() + "?random_param=" + Math.round(Math.random() * 1000))
    Ответ написан
    Комментировать
  • Почему не срабатывает аякс запрос?

    @alexalexes
    $("#form")
    У вас на странице формы имеют атрибут id="form" или id="form1"?
    Нет.
    А на что будут вешаться обработчики submit в этом случае? Ни на что.
    Решение:
    Для отладки JS-кода в любом непонятном месте, пока вы новичок, проверяйте, что вылавливает JQuery селектор:
    var form_elem = $("#form"); // тут должны словить DOM-объект формы в JQuery обертке
    form_elem.submit(function(.......... // а тут цепляем обработчик.

    Чтобы приведенный выше код поставил обработчики submit, на странице должны существовать элементы с такими атрибутами:
    <form id="form"></from>
    или такой:
    <form id="form1"></from>
    Атрибуты action и method, конечно, должен быть определены.
    Ответ написан
  • Почему параметр функции undefined?

    @alexalexes
    Проследите за тем, что значит this, там где работает функция.
    Контекст this теряется, если функция вызвана обработчиком какого-нибудь события.
    PS: если нужно обратиться с собственному классу, то обычно обращаются либо к глобальному экземпляру объекта, либо делают обвязку функции с помощью передачи this через переменную замыкания.
    Ответ написан
    Комментировать
  • Как избавиться от бага на IOS?

    @alexalexes
    Скорее всего нужен svg формат для гарнитуры шрифта.
    PS: по стопам вопроса Как подключить шрифт для iOS?
    Ответ написан
  • Js и Pdf как что и почему?

    @alexalexes
    Если вам нужно сделать таблицу с автозаполнением полей для печати, то в случае веб-реализации вам нужно не начальные, а уверенные знания JavaScript.
    Вот примерно так можно это сделать.
    <html>
      <head>
        <meta http-equiv="Content-Type" content='text/html; charset=utf-8'>
      </head>
      <body>
        <style>
          html, body
          {
            margin: 0;
            padding: 0;
          }
          table
          {
            border-collapse: collapse;
            background-color: #fff;
          }
          table,
          table td,
          table th
          {
            border: 1px solid #333;
          }
        </style>
        <table id="job_briefing">
          <tr><th>Работник</th><th>Должность</th><th>Дата инструктажа</th><th>Инструкция</th><th>Подпись</th></tr>
        </table>
        <script>
          (function()
          {
            var row_count = 30; // количество строк таблицы
            var inctruct_info = '№18 от 01.07.2015'; // номер инструкции, которая будет заполнятся автоматически
            // справочник работников
            var workers =
            [
              {                   
                name: 'Иванов И.А.',
                post: 'Водитель'
              },
              {
                name: 'Петров И.А.',
                post: 'Техник'
              },
              {
                name: 'Сидоров И.А.',
                post: 'Инженер'
              },
            ];
            var job_briefing_table = document.getElementById('job_briefing'); // получаем DOM-элемент со страницы
            for(var i = 0; i < row_count; i++)
              job_briefing_table.appendChild(create_table_row()); // наполняем строками
            
            // функция создания строки
            function create_table_row()
            {
              var tr_elem = document.createElement('tr'); // создаем элемент tr
              var td_elem = document.createElement('td'); // создаем элемент td
              td_elem.appendChild(create_select(workers)); // создаем элемент select и вставялем его в td
              tr_elem.appendChild(td_elem); // вставляем td в tr
              for(var i = 0; i < 4; i++) // создаем и вставляем остальные td
              {
                td_elem = document.createElement('td');
                tr_elem.appendChild(td_elem);
              }
              return tr_elem;
            }
            // функция создания выпадающего списка с работниками
            function create_select(workers /* - список работников*/)
            {
              var select_elem = document.createElement('select'); // содаем элемент select
              var worker_count = workers.length; // определяем кол-во работников в списке
              var option_elem = document.createElement('option'); // создаем элемент option
              option_elem.setAttribute('value', -1); // добавляем в option атрибут value для пустого элемента
              select_elem.appendChild(option_elem); // вставляем option в select
              for(var i = 0; i < worker_count; i++) // перебираем список работников
              {
                var worker = workers[i]; // текущий элемент списка работников
                option_elem = document.createElement('option');
                option_elem.setAttribute('value', i); // добавляем в option атрибут value = порядковый номер работника в списке 
                option_elem.innerHTML = worker.name; // имя работника в option
                select_elem.appendChild(option_elem); // вставляем option в select
              }
              select_elem.onchange = worker_select_onchange; // добавляем обработчик события выбора элемента в выпадающем списке работников
              return select_elem; // возвращаем готовый элемент выпадающего списка
            }
            // обработчик события выбора элемента в выпадающем списке работников
            function worker_select_onchange(e)
            {
              var target = e.target; // получаем то элемент select, на котором произошло событие выбора работника
              var select_value = target.value; // получаем выбранное value - порядковый номер работника
              var tr_elem = target.parentNode.parentNode; // получаем строку, на котором располагается select (второй родительский элемент)
              var td_elems = tr_elem.getElementsByTagName('td'); // получаем все ячейки этой строки
              td_elems[1].innerHTML = select_value == -1 ? '' : workers[select_value].post; // задаем должность для 2-ой ячейки
              td_elems[2].innerHTML = select_value == -1 ? '' : get_current_date(); // задаем текущую дату для 3-ей ячейки
              td_elems[3].innerHTML = select_value == -1 ? '' : inctruct_info; // задаем сведения об инструкции для 4-ой строки
            }
            // функция получения текущей даты по формату DD.MM.YYYY
            function get_current_date()
            {
              var date = new Date();
              var day = date.getDate();
              var month = date.getMonth() + 1;   
              return  (day < 10 ? '0' : '') + day + '.'  + (month < 10 ? '0' : '') + month + '.' + date.getFullYear();
            }
          })();
        </script>
      </body>
    </html>
    Ответ написан
    1 комментарий
  • Как вывести текстовое содержимое элемента в консоль браузера?

    @alexalexes
    Чтобы получить решение, изучите материал:
    1. Вывод в консоль;
    2. Поиск элементов в документе;
    3. Получение содержимого элемента.
    Ответ написан
    Комментировать
  • Как называется данная адаптация?

    @alexalexes
    font-size тоже проценты принимает, но вы ужаснетесь, как он будет тупо все масштабировать.
    Вам все-равно придется корректировать частные случаи медиазапросами.
    Ответ написан
    Комментировать
  • Почему у ajax при foreach функция в success срабатывает только после проработки всего массива?

    @alexalexes
    alert стопорит выполнение последующих инструкций, пока пользователь не ответит на всплывающиее окно, поэтому вот это будет выполнено после ответа пользователя.
    document.getElementById('product_image_files').style.display = 'none';

    PS:
    for (l = 0; l < obj.length; l++)
    Вы в курсе, что l в таком описании всегда будет создаваться в глобальном объекте window, а не локально, если цикл описан в какой-нибудь функции?
    Если цикл работает по принципу "отработал и забыл, что было в счетчике", то никогда не забывайте писать var.
    for (var l = 0; l < obj.length; l++)
    Ответ написан
    6 комментариев
  • Как удалить невалидные загружаемые файлы из формы на стороне клиента?

    @alexalexes
    1. Используйте FileReader для полного контроля содержимого предоставляемых файлов;
    2. Предупреждайте об невалидности файлов пользователя в процессе включения их в форму;
    3. Не включайте из FileReader невалидные файлы в выборку данных для отправки по ajax.
    Ответ написан
    Комментировать