Подскажите пожалуйста, как правильно привязать несколько событий к одному клику, чтобы при нажатии на элемент, мог получить данные из нескольких вкладок(табов), передать их на сервер и вернуть данные в раздельные (разные) блоки в свои же вкладки. Или подскажите где можно ознакомится с данным материалом работы с событиями и возвращением с сервера и раздельный вывод данных.
Если нужно несколько событий, то element.AddEventListener() в помощь. Но учтите, что обработчики выполняются асинхронно и без гарантии, что порядок вызова будет тот же, что порядок объявления. Если нужно несколько действий по клику совершить, то просто опишите их в рамках одного обработчика.
Код (Javascript): $('#item').on('click', function(){ // получаем 1 // отправляем 1 // получаем 2 // отправляем 2 // ... });
А без подключения жиквери ради того, чтобы навесить обработчик события, слабо? Код (Javascript): document.getElementById("item").addEventListener('click', function(){ // получаем 1 // отправляем 1 // получаем 2 // отправляем 2 // ... });
Не понятно, что именно вам нужно клик (click) - это уже событие. Если у вас есть несколько обработчиков разных событий и вам нужно, чтобы по клику они выполнились, то это можно сделать программно: Код (Javascript): // от простого вызова, который будет работать далеко не со всеми событиями myElement.click(); // до триггерования var evt = document.createEvent("Events"); evt.initEvent('click', true, true); myElement.dispatchEvent(evt); // или даже использования кастомных событий var evt = new CustomEvent('click', {bubbles: true, cancelable: true}); myElement.dispatchEvent(evt); Формируете на сервере ассоциативный массив и по его ключам ориентируетесь - что и в какой блок нужно выводить.
пока что, я им пользуюсь не только для навешивания событий, но потихоньку, всё больше юзаю нативный JS внутри функций. опять ты за своё) сколько лет ты в программировании в целом и в ВЕБе в частности?
У меня идет страница продукта, где имеется несколько вкладок(табов), в главной(активной) вкладке идет изображения продукта, название, краткое описание,цена и выбор цвета. при выборе другого цвета у меня меняется всё содержимое в первой вкладке подставляется в зависимости от выбранного цвета, теперь необходимо мне реализовать чтобы при данном клике менялись данные на других вкладках(характеристики, сертификаты) так как у продукта разного цвета есть небольшие различия. P. S. js я только начал изучать, так что знаю совсем малую часть основы.
В программировании что-то около 13, в Вебе - что-то около 4-5, наверное. --- Добавлено --- 1)Посылаем запрос на сервер, получаем пачку данных сразу для всех вкладок. 2)Собираем вкладки в массив и в цикле обновляем. 3) ... 4) PROFIT!!1 Куча однотипных действий всегда может быть представлена как одно циклическое
Звучит легко))) с моим опытом в js по времени займет намного больше. --- Добавлено --- отображу код, но он немного не правильный, с рекурсией проблемы, а также беру только один массив данных с первой вкладки, остальные массивы в других вкладках не передаю тут, а надо бы.
А главное, что и реализуется так же. С массивами на PHP вы уже умеете работать. Остаётся самая малость - Объекты в JS. Думаю, что часа хватаит с головой, чтобы понять основы.
вот такой код в js у меня: Код (Javascript): <script> $(document).on('click','.individOnClick', function(event){ event.preventDefault(); var idClick; idClick = $(this).attr('id'); // id другого цвета var obj = {json_encode($jsonZ)}; // многомерный ассоц.массив в smarty (содержит ключи в значении которых-массив с img другого цвета и др.парамметров) var url = {$url};// номер категории var idd = {$itemId}; // ид. продукта function find(obj, value) {// в функции перебираю многомерный массив, нахожу значение ключа идентичного с idClick и беру весь его родительский массив с данными for (var i in obj) for (var j in obj[i]) if (obj[i][j] == value) return [obj[i], obj[i][j]]; return false; } var mass = find(obj, idClick); var massString = JSON.stringify(mass[0]); $.ajax({ async: false, type: "POST", url: "ProductController.php?category="+url+"&controller=product&id="+idd+"&lang=ru", {literal}data: {mass : massString}, {/literal} dataType: 'text', success: function(data) { console.log('Данные успешно отправлены.'); var description = document.getElementById("indivRemoveJs"); description.remove();// удаляю родительский блок на странице $('.individAppendJs').html(data); // полученные данные с сервера сформированные на другой странице .tpl вывожу в блок с классом- individAppendJs name_of_my_function(); } }); }); function name_of_my_function(){ $(".individOnClick").off('click').click(function(event){ event.preventDefault(); var idClick; idClick = $(this).attr('id'); // id другого цвета var obj = {json_encode($jsonZ)}; // многомерный ассоц.массив в smarty (содержит ключи в значении которых-массив с img другого цвета и др.парамметров) var url = {$url}; // номер категории var idd = {$itemId}; // ид. продукта function find(obj, value) {// в функции перебираю многомерный массив, нахожу значение ключа идентичного с idClick и беру весь его родительский массив с данными for (var i in obj) for (var j in obj[i]) if (obj[i][j] == value) return [obj[i], obj[i][j]]; return false; } var mass = find(obj, idClick); var massString = JSON.stringify(mass[0]); $.ajax({ async: false, type: "POST", url: "ProductController.php?category="+url+"&controller=product&id="+idd+"&lang=ru", {literal}data: {mass : massString}, {/literal} dataType: 'text', success: function(data) { console.log('Данные успешно отправлены.'); var description = document.getElementById("indivRemoveJs"); description.remove(); $('.individAppendJs').html(data); name_of_my_function(); } }); }); } </script> на стороне сервера: PHP: if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Если к нам идёт Ajax запрос, то ловим его $arr = json_decode($_POST['mass'], true); $smarty->assign('arr', $arr); $template_output = $smarty->fetch("supportListProd.tpl"); echo $template_output; return false; } Правда после отправки с сервера, на новом контенте не срабатывают сторонние скрипты и при первых переключениях цветов контент дергается несколько раз, потом сменяется нормально. С рекурсией не разобрался до конца. --добавлено При переключении несколько раз одного и того же цвета, переставало выводить новый контент, пришлось прибегнуть к рекурсии.
в js массив уже идет объектом как я понимаю. Т.е. в js я беру массив с первой вкладки присваиваю ему переменной, с других вкладок беру другие массивы, присваиваю им переменные; Создаю новый объект, помещаю туда все переменные в значении которых массивы; В ajax через data: я передаю этот объект строкой серверу; На стороне сервера я его разбираю, Создаю другие страницы с таким же DOM только уже с новыми данными; И возвращаю в success, где уже необходимо будет вернуть каждый массив в свою вкладку?
а на стороне сервера как правильно обработать и вернуть данные в success чтобы каждый массив ушел в свой блок?
Способы зависят от вашей фантазии. Например: PHP: // tab_1, tab_2 - могут быть конретными селекторами табов, напр. ID, // а 'a' и 'b' - классами $data = [ 'tab_1' => [ 'a' => 'Text A for Tab 1', 'b' => 'Text B for Tab 1', /* ... */ ], 'tab_2' => [ 'a' => 'Text A for Tab 2', 'b' => 'Text B for Tab 2', /* ... */ ] ]; exit(json_encode($data)); На клиенте что-то в этом роде Код (Javascript): // Объект, который получили в ответе const myObj = { tab_1: { a: 'Text A for Tab 1', b: 'Text B for Tab 1', }, tab_2: { a: 'Text A for Tab 2', b: 'Text B for Tab 2', }, }; // Раскидываем данные в нужные места for (let [id, data] of Object.entries(myObj)) { let tab = document.getElementById(id); for (let [cls, txt] of Object.entries(data)) { tab.querySelector('.' + cls).textContent = txt; } } --- Добавлено --- P.S. Не забудьте, что если пишем без jQuery, то json-строку в ответе нужно сначала распарсить - JSON.parse(); Если всё-таки jQuery, то указываем тип ожидаемых данных явно - dataType: 'json' и в success сразу получаем готовый объект.
Сделал все, извиняюсь что раньше не отписал, в общем реализовал все без ajax, используя js и цикл for({section}) в шаблонизаторе, элементы одни скрываю, другие отображаю, все работает, знание js+ajax необходимы, так что буду изучать потихоньку, благодарю ВСЕХ за помощь!
@AlexsaiL ajax понять очень просто. Смысл в том, что js, точно так же как браузер, обращается к серверу по определенной ссылке и возвращает тебе в переменную всё, что вернул сервер. Это может быть уже готовый html, который ты просто вставишь, куда тебе надо, или JSON строка, которую ты превратишь в объект/массив/массив объектов и сам на клиенте соберешь нужный тебе html и вставишь куда надо или JSON с массивом html, который ты разберешь... короче дай волю фантазии))
я когда начал учить программирование (год назад), сначала изучил на курсах циклы, а потом конструкцию ifelse, была какая то задача, не как не мог решить (не важно какая), потом прихожу на лекцию, говорю парням - "а как это сделать", они говорят "так ты в цикл запихни проверку if", я говорю "а что так можно?"
Мне наверное повезло больше я в 9 классе уже так делал) только в QBasic или TurboPaskal - помню) --- Добавлено --- помню как мы на первых пеньках в QBasic использовали пустой цикл от 1 до 5000 в качестве задержки для перемещения точки на экране нас так учила училка
Помню, как две трети игр времен MS-DOS вместо таймеров использовали такой "хак". А потом, когда на компе более мощном игру запускаешь, она начинает работать в N раз быстрее, кратно повышению мощности машины. В итоге, в DOSbox-е даже вбили костыль, ограничивающий количество "тиков" для приложений, чтобы они работали так, как было задумано, а не так, как позволяет железка.
Да мне надо побольше почитать+ (попрактиковать) про ajax+json+js, а то когда передавал данные на сервер и потом возвращал готовый html(tpl) то у меня переставали работать скрипты на подгруженном контенте, был лимит на переключение, делал рекурсию чтобы лимита небыло на переключение, но как-то криво получилось. В общем пошел другим путем. А в школе у нас на информатики ничего нормального не рассказывали херню несли и все рубились в игры, вот приходится наверстывать самому те знания о которых никто никогда не рассказывал)).