Обновление содержимого страницы, кроме одного раздела, используя Ajax - PullRequest
Новая
       1

Обновление содержимого страницы, кроме одного раздела, используя Ajax

0 голосов
/ 16 января 2020

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

$.ajax({
  url: url,
  type: 'GET',
  success: function(html) {
    document.open();
    document.write(html);
    document.close();
  }
});

Это, очевидно, работает и обновляет содержимое моей текущей страницы.

Проблема в том, что я хочу оставить один div без изменений ( давайте назовем это .player-wrapper). Этот div на самом деле является <audio> оберткой, которую я хочу продолжать играть (и именно поэтому я AJAXified весь сайт). Это возможно?

Ответы [ 3 ]

2 голосов
/ 16 января 2020

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

const App = function() {
    return {
        init: function() {
            // Do all your JS stuff here
            
            console.log('App initialized.');
        },
        render: function(url) {
            $.get(url, data => {
                $('main').html(data);
            }, 'html').done(() => {
                this.init();
            });
        }
    };
}();

$(function() {
    App.init();
    
    $(document).on('click', '[data-page="ajax"]', function (e) {
        e.preventDefault();
        
        const url = $(this).attr('href');
        
        App.render(url);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<audio class="player-wrapper" src="https://www.free-stock-music.com/music/alexander-nakarada-wintersong.mp3" controls autoplay></audio>

<main>
    <h1>Initial page.</h1>
</main>

<nav>
    <a href="https://reqres.in/api/unknown/2" data-page="ajax">Go to dummy page</a>
</nav>
0 голосов
/ 16 января 2020

Одна вещь, которую вы можете сделать, это скопировать .player-обертку перед тем, как писать. 

$(".overridebutton").on("click", function () {
var html = '<div class="override">Im a new div overriding everything except player-wrapper</div>';
var exception = $(".player-wrapper").html();
console.log(exception);
document.write(html + exception);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="everything">
  <div class="sub-1">
  Hello Im sub-1
  </div>
  <div class="sub-2">
  Hello Im sub-2
  </div>
  <div class="sub-3">
  Hello Im sub-3
  </div>
  <div class="player-wrapper">
  I am player wrapper
  </div>
</div>
<button class="overridebutton">Override</button>
0 голосов
/ 16 января 2020

Если вы хотите сохранить аудио-тег с классом player-wrapper, давайте возьмем html в качестве нашей базы: 

<body>
  <audio class="player-wrapper"></audio>
  <div class="page-content"></div>
</body>

Затем, используя следующий код, вы можете поместить полученный вами html из запроса ajax: 

document.querySelector('.page-content').innerHTML = html;

Просто не пишите html в документ, а поместите его в уже существующий элемент, например, div с классом page-content в этом примере.

И когда вам нужно выполнить теги сценария в html, вы можете использовать метод добавления jQuery (поскольку вы уже используете jQuery) 

$('.page-content').append(html);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...