Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 30.11.2018, 06:07   #1
Jleksern
Форумчанин
 
Аватар для Jleksern
 
Регистрация: 14.10.2011
Сообщений: 137
Стрелка Кривая загрузка Html верстки аяксом

Доброго времени суток.

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

PHP код:
<script type="text/javascript" >
    $(
window).on('load', function () {
            var 
ajax "account/profile";
             $.
ajax({
                 
type"POST",
                 
url'/ajax/'+ajax,
                 
data: {ajax},
                 
success: function(response){
                 $(
'#content').html(response);
               }
        });
    });
</script> 
В див #content возвращается верстка (это слайдер).
Код HTML:
<div class="card my-3">
   <div class="card-header white">
      <h6>  Друзья</h6>
   </div>
   <div class="card-body">
      <div class="lightSlider masonry-container" data-item="5" data-item-md="2"
         data-item-sm="1" data-auto="true" data-loop="true">
         <div>
            <a href="/user/test">
               <div class="text-center">
                  <img class="rounded-circle img-100 img-border" src="tpl/_room1/assets/img/dummy/u4.png"
                     alt="">
                  <h5>test</h5>
                  <i class="icon-circle text-primary blink"></i> Online
               </div>
            </a>
         </div>
         <div>
            <div class="text-center">
               <img class="rounded-circle img-100 img-border" src="tpl/_room1/assets/img/dummy/u5.png"
                  alt="">
               <h5>Desc</h5>
            </div>
         </div>
      </div>
   </div>
</div>
Верстка подгружается, но не функционирует как слайдер!
Если я не использую Ajax загрузку и вставлен код с слайдером сразу в htm тогда слайдер работает корректно.

Единственная библиотека JS библиотека которая имеется app.js (прикрепил к теме).

Хочу сказать что если при вызове ajax'а указать на подключением js библиотеки ( которая в верстке указана выше ),
PHP код:
$.getScript("/sites/all/themes/mytheme/js/ready.js"); 
тогда слайдер загружается нормально, но перестает работать другие объекты типо меню...
В консоли ошибок нет.
Помогите пожалуйста решить эту проблему.
Вложения
Тип файла: 7z app.7z (670.0 Кб, 8 просмотров)

Последний раз редактировалось Jleksern; 30.11.2018 в 06:16.
Jleksern вне форума Ответить с цитированием
Старый 30.11.2018, 08:13   #2
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

суть в том, что после подгрузки чего либо динамически -обновляется dom дерево, а скрипты были настроены на старое....
и перестают - работать слайдеры, отслеживаться клики и прочее
если это JQuery то решается через ON
Код:
было: $(a).click(function(){}) -> делаем $(body).on(a,'click',function(){})
и для всего остального, если у объекта нет такого переключателя - то в коде, который отдается по аякс в конце - заново ре-инициализируйте скрипт,
типа
Код:
<script>$(a).slider();</script>
P.S если app.js один - то он скомпилирован из исходников - возможно нужно будет перекомпилировать
ADSoft вне форума Ответить с цитированием
Старый 30.11.2018, 10:03   #3
Jleksern
Форумчанин
 
Аватар для Jleksern
 
Регистрация: 14.10.2011
Сообщений: 137
По умолчанию

Вы дали пищу для того чтоб зацепиться, немного покопавшись, потанцевав, разобрался и обнаружил код для инициализации в самом app.js
Код:
$(".lightSlider").lightSlider({});
Тогда у меня назревает вполне закономерный вопрос.
Страниц много которые возвращаются и где надо будет производить инициализацию типо как сейчас.
PHP код:
success: function(response){
   $(
'#content').html(response);
   $(
".lightSlider").lightSlider({});

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

На вскидку приходит идея возвращать в json несколько параметров.
1. Разметка.
2. Название идентификатора/класса
3. Название класса/пакета
И производить вызов примерно так (не знаю как на js синтаксисе написать, по этому сумбур с PHP)
PHP код:
success: function(response){
   $(
'#content').html(response);
   $(
"$cssClassName").$classPacket({});
}
где $cssClassName '.lightSlider';
и $classPacket 'lightSlider'
Как-то так можно реализовать или как правильно такое сделать?

P.S. Надеюсь был правильно понят))
Jleksern вне форума Ответить с цитированием
Старый 30.11.2018, 10:56   #4
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

сам не делал, точно не скажу... но вроде можно выполнять получаемый результат в eval() обернуть, можно наверное тогда будет разделить - контент через html() отрисовали, js инициализации через eval() выполнили ...
а насчет универсальной инициализации ...имхо - ведь не все так инициализируются... + а вдруг параметры надо передать какие будет
ADSoft вне форума Ответить с цитированием
Старый 30.11.2018, 11:25   #5
Jleksern
Форумчанин
 
Аватар для Jleksern
 
Регистрация: 14.10.2011
Сообщений: 137
По умолчанию

Гуглижом тоже вышел на eval, люди пишут что eval использовать нужно тогда когда без него обойтись невозможно. К сожалению, не уточняют когда именно такой случай!
В данном случае я не рассматриваю варианты с передачей параметров.

Код:
var indicator = ".lightSlider", method = "lightSlider";
$(indicator).method({});
indicator видит, а вот method уже траблы.
Код:
TypeError: $(...).method is not a function
Вероятно в такой ситуации другая конструкция должна быть, пока не знаю какая, но ищу информацию.
Jleksern вне форума Ответить с цитированием
Старый 30.11.2018, 15:34   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Jleksern Посмотреть сообщение
Гуглижом тоже вышел на eval, люди пишут что eval использовать нужно тогда когда без него обойтись невозможно. К сожалению, не уточняют когда именно такой случай!
В данном случае я не рассматриваю варианты с передачей параметров.

Код:
var indicator = ".lightSlider", method = "lightSlider";
$(indicator).method({});
indicator видит, а вот method уже траблы.
Код:
TypeError: $(...).method is not a function
Вероятно в такой ситуации другая конструкция должна быть, пока не знаю какая, но ищу информацию.
Код:
$(indicator)[method]({});
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подгрузить переменную аяксом? Parallelogram PHP 9 22.02.2015 19:48
загрузка HTML-кода Alex54 C/C++ Сетевое программирование 4 03.06.2011 23:19
Загрузка html страницы DinamoBrynsk Работа с сетью в Delphi 6 13.12.2010 14:16