skip to Main Content

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?

3

Answers


  1. 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. 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. 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