страницы с другими id в одной странице

230

16 ноября 2017, 05:15

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

Answer 1

Вам нужен ajax. И скрипт на сервере, который отдаёт только данные или часть html для отрисовки нужного DOM.

function more(data) { 
  return fetch('//httpbin.org/get?data='+encodeURIComponent(data)) 
    .then(res => res.json()); 
} 
 
let i = 0; 
document.getElementById('more') 
  .addEventListener('click', () => { 
  ++i; 
  more(`<b>Динамический</b> контент ${i}`) 
    .then(content => { 
    let addition = document.createElement('div'); 
    addition.innerHTML = content.args.data; 
    document.getElementById('content') 
      .appendChild(addition); 
  }) 
})

<div id=content> 
  <div>Статический контент</div> 
</div> 
<button id=more>Ещё...</button>

Answer 2

Я бы предложил использовать pjax виджет yii2. Пример

use yii\widgets\Pjax;
<li><a href='/example'>Ссылка</a></li>
Pjax::begin(['id' => 'content']);
Pjax::end();
<script>
    $('body').on('click', 'a', function(){
        $.pjax({
            url        : $(this).attr('href'),
            container  : '#content',
            timeout    : 10000,
            push : false,
            raplace: false,
            scrollTo : false,
        })
    });
</script>

При нажатии на ссылку будет подгружаться содержимое страницы /example в блок с id = content. Более подробно можно посмотреть по ссылке http://www.yiiframework.com/doc-2.0/yii-widgets-pjax.html