Question posted in
You can find the official documentation here.

Jquery ajax – Updating page content except one div using Ajax

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?

Tags:

3

Answers


  1. 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);
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search