Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 01.05.2022, 05:41
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

рони,
В моём коде встретился вызов Ajax вида:
$("#consult").load("{:url('consult.html',['goods_id'=>$goods.goods_id])}", function(){
	// Membership card
	$(this).find('[dstype="mcard"]').membershipCard({type:'shop'});
	});

В вызываемом файле consult.html, есть
<a href="javascript:void(0)" target="_blank" data-param="{'id':{$buyer_id}}" dstype="mcard">{$buyer_name}</a>


Как с помощью вашего скрипта передать параметры в файл consult.html, при его вызове?
Ответить с цитированием
  #22 (permalink)  
Старый 01.05.2022, 07:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Vaska,
вместо $(div).load(url); будет
if(url.includes('consult.html'))  $(div).load("{:url('consult.html',['goods_id'=>$goods.goods_id])}", function(){
	// Membership card
	$(this).find('[dstype="mcard"]').membershipCard({type:'shop'});
	});
else $(div).load(url);
Ответить с цитированием
  #23 (permalink)  
Старый 01.05.2022, 08:04
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

У меня браузеры ругаются на кавычки в этой строке:
setTimeout(_=> div.style.backgroundImage = `url(${url})`, 600)//имитация грузим контент с сервера

Uncaught SyntaxError: `` literal not terminated before end of script
Ответить с цитированием
  #24 (permalink)  
Старый 01.05.2022, 08:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Vaska,
заменил кавычки на обычные
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
        header {
            background: cyan;
            min-height: 100px;
        }

        .content_container {

            background: rgba(255, 0, 0, 0.3);
            padding: 20px;

        }

        .inner-content {
            height: 400px;
            margin: 5px;
            background: red;
            overflow:  scroll;
            background-repeat: no-repeat;
             background-size: cover;
        }

        footer {
            background: cyan;
            min-height: 500px;
        }
  </style>
  <title></title>
</head>
<body>
  <header>
    <div>
      other content
    </div>
    <p>text two</p>
    <script>
        let r = 1;
        function addDiv()
        {
          document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', '<div class="inner-content" data-url="https://picsum.photos/300/100?' + (r++) +'"></div>');
        }
    </script>
    <input name="" type="button" value="addDiv"  onclick="addDiv()" >
  </header>
  <div id="haupt">
    <div id="acidhaupt" class="haupt-wrap background-color">
      <div class="content_container">

      </div>
    </div>
  </div>
  <footer>
    <p>footer content</p>
  </footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
        document.addEventListener('DOMContentLoaded', function() {
            const lazyShow = divs => {
                divs.forEach(e => {
                    if (e.intersectionRatio < .3) return;
                    let div = e.target,
                        url = div.dataset.url;
                    setTimeout(_=> div.style.backgroundImage = 'url('+url+')', 600)//имитация грузим контент с сервера

                    observer.unobserve(div);
                });
            };
            let observer = new IntersectionObserver(lazyShow, {
                rootMargin: "10px",
                threshold: [.3]
            });
            let parent = document.querySelector('#haupt');
            const add = () => parent.querySelectorAll('.inner-content:not(.load)').forEach(div => {
             observer.observe(div);
             div.classList.add('load');
            });
            add();
            let listObserver = new MutationObserver(add); //отслеживание появления новых блоков .inner-content в #haupt
            listObserver.observe(parent, {  childList: true, subtree: true});
        });
  </script>
</body>
</html>

Последний раз редактировалось рони, 01.05.2022 в 08:24.
Ответить с цитированием
  #25 (permalink)  
Старый 01.05.2022, 08:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Vaska,
тоже самое, обычный вариант без "сторожа-наблюдателя", добавили элемент, внесли элемент в очередь.
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        header {
            background: cyan;
            min-height: 100px;
        }

        .content_container {

            background: rgba(255, 0, 0, 0.3);
            padding: 20px;

        }

        .inner-content {
            height: 400px;
            margin: 5px;
            background: red;
            overflow: scroll;
            background-repeat: no-repeat;
            background-size: cover;
        }

        footer {
            background: cyan;
            min-height: 500px;
        }
    </style>
    <title></title>
</head>

<body>
    <header>
        <div>
            other content
        </div>
        <p>text two</p>
        <input name="" type="button" value="addDiv" onclick="addDiv()">
    </header>
    <div id="haupt">
        <div id="acidhaupt" class="haupt-wrap background-color">
            <div class="content_container">
            </div>
        </div>
    </div>
    <footer>
        <p>footer content</p>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const lazyShow = divs => {
                divs.forEach(e => {
                    if (e.intersectionRatio < .3) return;
                    let div = e.target,
                        url = div.dataset.url;
                    setTimeout(_ => div.style.backgroundImage = 'url(' + url + ')', 600) //имитация грузим контент с сервера

                    observer.unobserve(div);
                });
            };
            let observer = new IntersectionObserver(lazyShow, {
                rootMargin: "10px",
                threshold: [.3]
            });
            let parent = document.querySelector('#haupt');
            const add = () => parent.querySelectorAll('.inner-content:not(.load)').forEach(div => {
                observer.observe(div);
                div.classList.add('load');
            });
            add();
            /*let listObserver = new MutationObserver(add); //отслеживание появления новых блоков .inner-content в #haupt
            listObserver.observe(parent, {  childList: true, subtree: true});*/
            let r = 1;
            document.querySelector('[value="addDiv"]').addEventListener('click', function() {
                document.querySelector('#haupt .content_container').insertAdjacentHTML('beforeend', '<div class="inner-content" data-url="https://picsum.photos/300/100?' + (r++) + '"></div>');
                add();
            })
        });
    </script>
</body>

</html>
Ответить с цитированием
  #26 (permalink)  
Старый 01.05.2022, 09:02
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

рони,
сейчас получаю такую ошибку (это предпоследний вариант вашего кода)

Я этот кусок скрипта разместил в теле страницы, закомментировал <div id="consulting_demo" class="dss-loading"></div>
Див вообще ненужно размещать?
Ответить с цитированием
  #27 (permalink)  
Старый 01.05.2022, 09:23
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

Скорее всего я что-то не так делаю, но мне скрипт нужен, чтобы по размеченным на странице дивам, тянуть Ajax'ом контент.
А последние версии вашего кода куда-то не туда пошли.
И я запутался.
У меня нет кнопок, чтобы на них жмакать и так подгружать контент, это не нужно.
Ответить с цитированием
  #28 (permalink)  
Старый 01.05.2022, 10:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Сообщение от Vaska
сейчас получаю такую ошибку (это предпоследний вариант вашего кода)
я не знаю что это за синтаксис и откуда эти переменные.
load("{:url('consult.html',['goods_id'=>$goods.goods_id])}",
Ответить с цитированием
  #29 (permalink)  
Старый 01.05.2022, 10:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,192

Сообщение от Vaska
о мне скрипт нужен, чтобы по размеченным на странице дивам, тянуть Ajax'ом контент.
пост #6
Ответить с цитированием
  #30 (permalink)  
Старый 01.05.2022, 11:26
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 163

Сообщение от рони Посмотреть сообщение
я не знаю что это за синтаксис и откуда эти переменные.
load("{:url('consult.html',['goods_id'=>$goods.goods_id])}",
Я взял код из этого поста https://javascript.ru/forum/545103-post22.html
Заполнил адрес и получилось так:
if(url.includes('/home/Goods/consulting.html'))
 $(div).load("/home/Goods/consulting.html?goods_id=2&store_id=1", function(){
  // Membership card
  $(this).find('[dstype="mcard"]').membershipCard({type:'shop'});
 });
else
$(div).load(url);

В итоге, получаю ошибку на скриншоте.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Загрузка контента из файла по ID в зависимости от ID нажатой кнопки oldeuboi Элементы интерфейса 3 16.11.2018 06:33
Скрипт смены контента в Div keystation Events/DOM/Window 23 11.03.2016 15:17
Загрузка ajax'ом в определенный div Daniel93 AJAX и COMET 12 23.02.2015 00:06
Загрузка в DIV Алллексей Элементы интерфейса 2 02.08.2013 14:54
Не получается загрузить баннер в раздел DIV методами Javascript через iframe ((( autobuh Общие вопросы Javascript 3 24.07.2009 18:24