Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

skype: J-pandora
Стрелка Кривая загрузка 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 Кб, 0 просмотров)

Последний раз редактировалось Jleksern; 30.11.2018 в 07:16.
Jleksern вне форума   Ответить с цитированием
Старый 30.11.2018, 09:13   #2
ADSoft
Профессионал
 
Регистрация: 25.02.2007
Адрес: Татарстан
Сообщений: 3,338
Репутация: 914

icq: 303-206-418
skype: ad-soft.info
По умолчанию

суть в том, что после подгрузки чего либо динамически -обновляется dom дерево, а скрипты были настроены на старое....
и перестают - работать слайдеры, отслеживаться клики и прочее
если это JQuery то решается через ON
Код:

было: $(a).click(function(){}) -> делаем $(body).on(a,'click',function(){})

и для всего остального, если у объекта нет такого переключателя - то в коде, который отдается по аякс в конце - заново ре-инициализируйте скрипт,
типа
Код:

<script>$(a).slider();</script>

P.S если app.js один - то он скомпилирован из исходников - возможно нужно будет перекомпилировать
ADSoft вне форума   Ответить с цитированием
Старый 30.11.2018, 11:03   #3
Jleksern
Форумчанин
 
Аватар для Jleksern
 
Регистрация: 14.10.2011
Адрес: Живу в интернете
Сообщений: 137
Репутация: 10

skype: J-pandora
По умолчанию

Вы дали пищу для того чтоб зацепиться, немного покопавшись, потанцевав, разобрался и обнаружил код для инициализации в самом 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, 11:56   #4
ADSoft
Профессионал
 
Регистрация: 25.02.2007
Адрес: Татарстан
Сообщений: 3,338
Репутация: 914

icq: 303-206-418
skype: ad-soft.info
По умолчанию

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

skype: J-pandora
По умолчанию

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

Код:

var indicator = ".lightSlider", method = "lightSlider";
$(indicator).method({});

indicator видит, а вот method уже траблы.
Код:

TypeError: $(...).method is not a function

Вероятно в такой ситуации другая конструкция должна быть, пока не знаю какая, но ищу информацию.
Jleksern вне форума   Ответить с цитированием
Старый 30.11.2018, 16:34   #6
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,761
Репутация: 2322
По умолчанию

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

Код:

var indicator = ".lightSlider", method = "lightSlider";
$(indicator).method({});

indicator видит, а вот method уже траблы.
Код:

TypeError: $(...).method is not a function

Вероятно в такой ситуации другая конструкция должна быть, пока не знаю какая, но ищу информацию.
Код:

$(indicator)[method]({});

__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


05:42.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru