Как переделать данный скрипт?

Question

[luckyjenro0]

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

сама статья https://intop24.ru/article_15_lesson_5.php

И еще: почему когда я вывожу элемент через echo php то например у него есть класс определенный, по клику на элемент с этим классом выполняется js функция, но не работает через echo, если просто то все нормально, вообщем "если вывожу через echo на страницу элементы то они как будто не видят js"

Answer 1

[overlord1337]

ajax

Comments

[Anton]

Все верно, там даже пример есть https://intop24.ru/article_19.php

Только хотел бы обратить внимание, что код в примерах достаточно устаревший, поните об этом.

При поиске в гугле например, старайтесь указывать в расширенных настройках "Результаты за последний год" что бы изучать более современные примеры, но для обучения и эти ок

Answer 2

[Олег]

По основному вопросу: jquery.page2page.ru/index.php5/Ajax-%D0%B7%D0%B0%D...

По побочному: "если вывожу через echo на страницу элементы то они как будто не видят js"

1.Это значит, что в тот момент, когда ваш JS скрипт попытался обратиться к элементу - этот элемент ещё не отразился на странице, как элемент DOM.
2.Или js скрипт не подключили.
3.Или js скрипт у вас срабатывает один раз при загрузке страницы, а вот после AJAX событий - не навешивает обработчики. - скорее всего третье.

// если нужен поиск кликабельных элементов, которые вы догружаете через AJAX
 let custom_box = document.querySelector('body'); // запоминаем тэг body или другой контейнер, в рамках которого отслеживаем нажатие ЛКМ
 custom_box.addEventListener('click', function(e) { // навешиваем прослушиватель события нажатия ЛКМ наш блок
   if(e.target.getAttribute("class").search(/mybutton_class/)!=-1){
    // e.target - нажатый объект
    // .getAttribute("class") - получаем содержимое аттрибута class=""
    // .search(/mybutton_class/) - ищем в содержимом аттрибута строку с искомым названием класса
    
   // выполняем какие то инструкции с кнопкой
   }

// если нужно отследить, догрузился ли конкретный элемент на страницу, чтобы с ним работать, то либо нужно использовать callback внутри вашей AJAX функции или таймер
// таймер
    var timer=setInterval(my_function(),100); // с переменной timer связываем js таймер, выполняющий функцию my_function каждые 100мс 
    function my_function() {
        if(document.querySelector('.ajax-photo')!=null){
            // проверяем наличие на странице блока с классом ajax-photo

            // ваши инструкции

            clearInterval(timer); // этой командой отключаем таймер из переменной timer - можете не выключать, тогда инструкция будет постоянно выполняться
        };
    }

Comments

[luckyjenro0]

по поводу ajax - не совсем понимаю как именно реализовтать это с использованием ajax

[Олег]

luckyjenro0,
в js-функцию, которая обрабатывает ajax-запрос можно передавать параметры, в частности callback для обработки. На том ресурсе, на который я ссылался, смотрите самый первый пример в блоке Обработчики событий

$.ajax({
  url: 'ajax/test.html',
  success: function(){
    alert('Load was performed.');
  }
});

Вот вместо этого alert('Load was performed.'); вам нужно дописывать свои инструкции, что делать с полученным контентом и навешивать обработчики событий на ваши элементы.

Если не пользуетесь jquery и у вас кастомная функция, то добавьте в список аргументов дополнительный параметр callback
В конце выполнения функции, вызовите его конструкцией callback();
А значением аргумента callback, которое передадите в функцию будет конструкция

function(){ //и ваши инструкции по обработке данных, полученных ajax-запросом }

[luckyjenro0]

Олег, спасибо, и еще не подскажите какой параметр в запросе ajax отвечает за вывод текста во время загрузки запроса, например "загрузка". Типо onload

[Олег]

luckyjenro0, параметр beforeSend(jqXHR, settings)

Это поле содержит функцию, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Такая функция может быть полезна для модификации jqXHR-объекта (в ранних версиях библиотеки (до 1.5), вместо jqXHR используется XMLHttpRequest). Например, можно изменить/указать нужные заголовки (headers) и.т.д. Объект-jqXHR будет передан в функцию первым аргументом. Вторым аргументом передаются настройки запроса.

beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.

Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.