CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
arcade
arcade

Reputation: 213

contents duplicated when load pages by using jquery-ajax

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.

Upvotes: 0

Views: 173

Answers (1)

j-da
j-da

Reputation: 188

You're inserting index.php - complete with footer and jPlayer - into a single div (#main-container) on a page which already has that header and footer. Create a new template with just the elements you want to dynamically insert, and AJAX that.

Upvotes: 1

Related Questions