рони,
В моём коде встретился вызов 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, при его вызове? |
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);
|
У меня браузеры ругаются на кавычки в этой строке:
setTimeout(_=> div.style.backgroundImage = `url(${url})`, 600)//имитация грузим контент с сервера
Uncaught SyntaxError: `` literal not terminated before end of script |
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>
|
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>
|
рони,
сейчас получаю такую ошибку (это предпоследний вариант вашего кода)  Я этот кусок скрипта разместил в теле страницы, закомментировал <div id="consulting_demo" class="dss-loading"></div> Див вообще ненужно размещать? |
Скорее всего я что-то не так делаю, но мне скрипт нужен, чтобы по размеченным на странице дивам, тянуть Ajax'ом контент.
А последние версии вашего кода куда-то не туда пошли. И я запутался. У меня нет кнопок, чтобы на них жмакать и так подгружать контент, это не нужно. |
Цитата:
load("{:url('consult.html',['goods_id'=>$goods.goods_id])}",
|
Цитата:
|
Цитата:
Заполнил адрес и получилось так:
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);
В итоге, получаю ошибку на скриншоте. |
| Часовой пояс GMT +3, время: 08:05. |