Updating page content except one div using Ajax

Question

I am trying to make a website that loads all pages using AJAX. Here's a simple piece of JS that does that:

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

This obviously works and updates my current page content.

The problem is I want to keep one div unchanged (let's call it .player-wrapper). This div is actually an <audio> wrapper which I want to keep playing (and this is the reason I AJAXified the entire website). Is this possible?

Yes it's possible. Don't write over the entire document with the returned html. — gforce301, Jan 15 '20 at 23:21
Well you would need to remove `.player-wrapper` from the HTML before you write it. — EternalHour, Jan 15 '20 at 23:37

score 2 · Answer 1 · answered Jan 16 '20 at 01:20

Every time you render a page, you can initialize plugins/libraries like this:

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>

Wezelkrozum · Accepted Answer · 2020-01-15T23:47:54.147

0

If you want to keep the audio tag with the player-wrapper class let's take this html as our base:

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

Then with the following code you can place the html you received from the ajax request:

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

Just don't write the html to the document, but place it in an already existing element like the div with the page-content class in this example.

And when you need to execute script tags in the html you can use jQuery's append method (since you are already using jQuery)

$('.page-content').append(html);

edited Jan 15 '20 at 23:47

answered Jan 15 '20 at 23:26

Wezelkrozum

831
5
15

This is the first thing I tried (changing content inside ``). However, things like Gravity Forms (wordpress plugin for forms), recaptcha, etc will not be initialized when I get them. This is why now I am trying to get the entire page and simply keep this one `div` unchanged. – DimChtz Jan 15 '20 at 23:30
Ah, if that's your problem I can tell you that – Wezelkrozum Jan 15 '20 at 23:43
Another option (since you are already using jQuery) is to use the append function in JQuery. You can use this to execute the scripts in the html variable: $('.page-content').append(html); – Wezelkrozum Jan 15 '20 at 23:46

score 0 · Answer 3 · answered Jan 15 '20 at 23:46

One thing you can do is copy the .player-wrapper before you write.

$(".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>

Updating page content except one div using Ajax

3 Answers3