Question

i am currently working on my music streaming site and to prevent jplayer from stopping when pages reloaded or when someone clicks on other pages links i decided to load my pages with ajax but its really messed up my home page by duplicating my footer and jplayer div and starting creating two jplayer instances. below is the ajax function that i used.

 <script type="text/javascript">
// handles the click event, sends the query
function getindex_page() {
$.ajax({
    url:'/index.php',
    complete: function (response) {
        $('#main-container').html(response.responseText);
    },
    error: function () {
        $('#main-container').html('Bummer: there was an error!');
    },
});
return false;
}
// handles the click event, sends the query
function gettop_albums() {
$.ajax({
    url:'/Top-albums/top_albums_default.php',
    complete: function (response) {
        $('#main-container').html(response.responseText);
    },
    error: function () {
        $('#main-container').html('Bummer: there was an error!');
    },
});
return false;
}
</script>

and this is my navigation menu that contains the pages that i loaded with ajax.

<!--php function for active menu current state-->
<?php 
$index="menu-items";
$top_albums_default="menu-items";
$top_artists_default="menu-items";
$top_lists_default="menu-items";
$Charts="menu-items";
$menuLinkid=basename($_SERVER['PHP_SELF'],".php");
if($menuLinkid=="index"){
$index='active';
}else if ($menuLinkid=="top_albums_default"){
$top_albums_default='active';
}else if ($menuLinkid=="top_artists_default"){
$top_artists_default='active';
}else if ($menuLinkid=="top_lists_default"){
$top_lists_default='active';
}else if ($menuLinkid=="Charts_default"){
$Charts_default='active';
}
?>
<!--start vertical menu-->
<div id="vertical-menu">
         <!--<h2 class="logo">LOGO</h2>-->
         <img class="logo" src="../Graphics/icons/logo.png" alt="LOGO"/>
         <h6 class="logo-desc">Arcade Music Repository</h6>
                <ul class="menu-items">
                    <li>
                        <a class="<?php echo $index; ?>" href="/index.php" onclick="return getindex_page();"><i class="arcd-archive" ></i></br>Browse</a>                             
                    </li>
                    <li>
                        <a id="page1" class="<?php echo $top_albums_default; ?>" href="../Top-albums/top_albums_default.php" onclick="return gettop_albums();"><i class="arcd-music97"></i></br>Top albums</a>                            
                    </li>
                    <li>
                        <a class="<?php echo $top_artists_default; ?>" href="../Top-artists/top_artists_default.php" ><i class="arcd-microphone52"></i></br>Top artists</a>                            
                    </li>
                    <li>
                        <a class="<?php echo $top_lists_default; ?>" href="../Top-lists/top_lists_default.php"><i class="arcd-numbered8"></i></br>Top lists</a>
                    </li>
                    <li>
                        <a class="<?php echo $Charts_default; ?>" href="../Charts/Charts_default.php"><i class="arcd-rising9"></i></br>Charts</a>
                    </li>                        
                </ul>

</div>   
<!--ends vertical menu-->

and finally this is my home page "index.php"

<!--include stylesheets-->
<?php require_once ("includes/stylesheets_fonts_js.php"); ?>
<title>AMR | Arcade Music Repository</title>
<!-- include menu-->
<?php include_once ("includes/vertical_menu.php"); ?>
<body>
<div id="wrapper">      
<!--main contents (generes-moods )-->
<div id="main-container">
    <div id="heading-subheading">
      <h1 class="homepage-heading">Browse</h1>
      <h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
      <ul id="all-generes-moods">
          <li style="padding-left: 15px; padding-top: 15px;">
              <a class="acoustic-click" href="#">
                <div class="acoustic">Acoustic</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>  
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="ambient-click" href="#">
                <div class="ambient">Ambient</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="blues-click" href="#">
                <div class="blues">Blues</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="classicall-click" href="#">
                <div class="classical">Classical</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="country-click" href="#">
                <div class="country">Country</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="emo-click" href="#">
                <div class="emo">EMO</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 15px; padding-top: 15px;">
              <a class="folk-click" href="#">
                <div class="folk">Folk</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="hiphop-click" href="#">
                <div class="hiphop">Hip Hop</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="indie-click" href="#">
                <div class="indie">Indie</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="jazz-click" href="#">
                <div class="jazz">Jazz</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="pop-click" href="#">
                <div class="pop">Pop</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px;">
              <a class="punk-click" href="#">
                <div class="punk">Punk</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 15px; padding-top: 15px; padding-bottom: 15px;">
              <a class="reggae-click" href="#">
                <div class="reggae">Reggae</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px; padding-bottom: 15px;">
              <a class="rock-click" href="#">
                <div class="rock">Rock</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px; padding-bottom: 15px;">
              <a class="rnb-click" href="#">
                <div class="rnb">R&B</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px; padding-bottom: 15px;">
              <a class="soul-click" href="#">
                <div class="soul">Soul</div>
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px; padding-bottom: 15px;">
              <a class="evt-click" href="#">
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
          <li style="padding-left: 17.6px; padding-top: 15px; padding-bottom: 15px;">
              <a class="evt-click" href="#">
                <img width="184" height="174" class="picture" src="#" >
              </a>
          </li>
      </ul>
    </div>
        </div>
<!--include footer-->
<?php include   ("includes/footer.php"); ?> 
<!--include jplayer interface-->            
<?php include_once ("includes/jplayer_interface_audio.php"); ?>     
</div>

any help would be really appreciated with my deep heart.

Answer 1

您正在将index.php - 完成页脚和jPlayer - 插入已经具有该页眉和页脚的页面上的单个div（#main-container）中。创建一个新模板，只包含您想要动态插入的元素，以及AJAX那个。

contents duplicated when load pages by using jquery-ajax

1 个答案: