AJAX частичная загрузка страницы внутри проблемы с div - PullRequest
0 голосов
/ 19 января 2020

Я занимаюсь разработкой сайта, на котором играет музыка c. Поскольку musi c должен постоянно играть при навигации по сайту, поэтому я использую AJAX для загрузки содержимого внутри div и удержания игрока в другом div. Всякий раз, когда кто-либо играет какую-либо музыку c, страница проигрывателя загружается в div проигрывателя, и содержимое отображается в div контента. Теперь, когда кто-то переходит с одной страницы на другую на веб-сайте, в div содержимого загружается новое содержимое другой страницы, и div player остается прежним, если для воспроизведения не требуется новый musi c. Но иногда, не всегда при переходе на другую страницу, игрок становится недоступным, но musi c продолжает играть в фоновом режиме, а также после этого, если я пытаюсь сделать новый запрос на воспроизведение musi c, то и предыдущий, и новое аудио продолжает играть. Но не было никаких проблем, когда я делал то же самое, используя iFrame вместо AJAX. Я не могу понять, почему возникают эти проблемы, поскольку я совершенно новичок в AJAX.

Это код для перехода на другую страницу

   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);
      }

Это функция для вызова плеера, когда кто-то нажимает на любую музыку c на любой странице

     function play(index,type)
      {

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

Это тело для всех моих страниц, каждая страница имеет содержимое div и player, а содержимое каждой страницы находится внутри содержимого 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>

Может ли быть проблема с размещением контента? а плеер div на каждой странице? Может ли кто-нибудь помочь мне исправить это, так как я пытаюсь AJAX в первый раз.

1 Ответ

1 голос
/ 19 января 2020

насколько я понимаю ваш случай, вы заблуждаетесь

1-й, вам нужен шаблон, это должен быть шаблон по умолчанию, и когда вы нажимаете на любую ссылку, он должен обновлять контент

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

ваш заголовок и div игрока останутся без изменений, только контент div будет обновляться / изменяться при нажатии на ссылку. 2-й твой 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();
       });
   }

3-й твой контент, страницы, твои страницы не должны иметь id # content div, твои страницы будут содержанием (список musi c, список исполнителей и т. Д. c) Вы хотели отобразить в содержании div. Рассматривайте содержимое div как Страницу, и все ваши страницы - это содержимое или данные, которые вы хотите отобразить / загрузить на странице.

для большего понимания, просто рассмотрите stackoverflow, у вас есть один столбец слева и справа и div содержимого в середина, и когда вы открываете любой вопрос, средний div меняется с новым содержанием.

...