AJAX partial loading page inside div problem

I am developing a website which plays music. As the music needs to play continuously when navigating through out the website so I am using AJAX to load the content inside a div and keeping the player in an another div. Whenever someone plays any music then player page loads in the player div and the contents are being showed in the content div. Now when someone navigates from one page to another in the website then the content div is loaded with the new content of the other page and the player div remains same unless new music is needed to play. But sometimes, not always during navigating to other page the player becomes unavailable but the music still keeps playing in background and also after that if I try to make a new request for playing music then both the previous one and the new audio keeps playing. But there was no problem when I did the same using iFrame instead of AJAX. I am not able to figure out why these problems are occuring as I am completely new to AJAX.

This is the code for navigating to another page

   function nextpage(id,type) //this is call when someone clicks a link 
   {

    var URL = "list.php?id="+id+"&t="+type;

      $.ajax({
        url: URL
        }).done(function(data) { 
        $('#content').html(data);
        });
      history.pushState(null,null,URL);
      }

This is the function to call the player when someone clicks on any music on any page

     function play(index,type)
      {

       var URL = "player.php?i="+index+"&t="+type;
       $.ajax({
       url: URL
       }).done(function(data) { 
       $('#player').html(data);
       });
     }

This is the body for all of my pages, every page has a content div and player div and the contains of every page lies inside the content div

    //Suppose page1.php
   <div id="content">
     //codes of page1
   </div>
   <div id="player">
   </div>


   //Suppose page2.php
   <div id="content">
     //codes of page2
   </div>
   <div id="player">
   </div>


   //Suppose page3.php
   <div id="content">
     //codes of page3
   </div>
   <div id="player">
   </div>

Could it be the problem for placing content and player div on every page? Could anyone please help me to fix it, as I am trying AJAX for the first time.

Solution

as far as i understand your case, you are getting confuse

1st you need to have a template, this should be default, and when you click on any link, it should update content

<html> <!--sample-->
  <body>
    <header>
      <!--menu links page1, page2 , page3, pae 4 ...-->
    </header>
    <div id="content"></div>
    <div id="player"></div>
  </body>
</html>

your header and player div will remain unchanged, only content div will be updated/changed when link is clicked. 2nd your js

// ajax to change content
   function nextpage(id,type) //this is call when someone clicks a link 
   {
       // ajax
       $.ajax({
        url: URL
       }).done(function(data) { 
          $('#content').html(data);
          // js code if you have some specific page related, for example
          $('#list').select2();
       });
   }

3rd your content, pages, your pages should not have id#content div, your pages will be the content(music list, artist list etc) you wanted to display in content div. consider content div as a Page, and all your pages are content or data you want to display/load in page.

for more understanding, just consider stackoverflow, you have one column on left and rght and content div in the middle, and when you open any question middle div changes with the new content.