Замена контейнера из панели навигации через ajax

Question

На главной странице есть множество контейнеров навигация по которым происходит через плавный скролл и имеется панель html панель навигации:

   <ul id="nav" class="nav">
    <li><a class="smoothscroll" href="#general">Главная</a></li>
    <li><a class="smoothscroll" href="news.php">Новости</a></li>
    <li><a class="smoothscroll" href="#about">О нас</a></li>
    <li><a class="smoothscroll" href="#contact">Контакт</a></li>
</ul>

Мне нужно, чтобы при нажатии на кнопку "Новости" у меня заменялся контейнер ajax'ом, для этого укралсворовалпохитил данный js код:

jQuery(document).ready(function($){
    $("a").click(function(event){
        link=$(this).attr("href");
        $.ajax({
            url: link,
        })
        .done(function(html){
            $("#body-container").empty().append(html)
        })
        .fail(function(){
            console.log("error");
        })
        .always(function(){
            console.log("complete");
        });
        return false;
    });
});

Но он никак не отзывается, в этой теме совсем новичок, заранее спасибо.

Полный код страницы:

<? include_once 'main.php';
include_once 'newsquery.php';

echo <<<_END

<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>

   <!--- basic page needs
   ================================================== -->
   <meta charset="utf-8">
    <title>Тестовый сайт</title>
    <meta name="description" content="">
    <meta name="author" content="">

   <!-- mobile specific metas
   ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
   ================================================== -->
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/vendor.min.css">
   <link rel="stylesheet" href="css/main.css">

   <!-- script
   ================================================== -->
    <script src="js/modernizr.js"></script>

   <!-- favicons
    ================================================== -->
    <link rel="shortcut icon" href="favicon.png" >

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
</head>

<body>
    <!-- header
   ================================================== -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <header id="main-header">

    <div class="row">

          <div class="logo">
             <a href="index.php">Тест</a>
          </div>

          <nav id="nav-wrap">

             <a class="mobile-btn" href="#nav-wrap" title="Show navigation">
                <span class="menu-icon">Меню</span>
             </a>
            <a class="mobile-btn" href="#" title="Hide navigation">
                <span class="menu-icon">Меню</span>
            </a>

             <ul id="nav" class="nav">
                <li><a class="smoothscroll" href="index.php">Главная</a></li>
                <li><a class="smoothscroll" href="news.php">Новости</a></li>
                <li><a class="smoothscroll" href="#about">О нас</a></li>
                <li><a class="smoothscroll" href="#contact">Контакт</a></li>
             </ul> <!-- end #nav -->

          </nav> <!-- end #nav-wrap -->

          <ul class="header-social">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
          </ul>

       </div>

   </header> <!-- end header -->


   <!-- homepage hero
   ================================================== -->

 <section id="hero">

 <div id="body-container"> 

        <div class="row hero-content">

            <div class="twelve columns hero-container">

               <!-- hero-slider start-->
               <div id="hero-slider" class="flexslider">

                   <ul class="slides">

                       <!-- slide -->
                       <li>
                           <div class="flex-caption">
                                <h1 class="">$news1
                                </h1>

                                <h3 class="">$description11</h3>
                                <br> <class="">$newsdate1

                            </div>
                       </li>

                       <!-- slide -->
                       <li>
                            <div class="flex-caption">
                                <h1 class="">$news2</h1>

                                <h3 class="">$description22</h3>
                                <br> <class="">$newsdate2

                            </div>
                       </li>

                   </ul>

               </div> <!-- end hero-slider -->

          </div> <!-- end twelve columns-->

        </div> <!-- end row -->



   </section> <!-- end homepage hero -->


   <!-- portfolio
   ================================================== -->
   <section id="portfolio">

      <div class="row section-head">

        <div class="twelve columns">

            <h1>Our Latest Projects<span>.</span></h1>

             <hr />

             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
             </p>

          </div>

      </div> <!-- end section-head -->

      </div>  <!-- end row -->

   </section> <!-- end portfolio -->

   <!-- contact
   ================================================== -->
   <section id="contact">

    <div class="row section-head">

        <div class="twelve columns">

             <h1>Обратная связь<span>.</span></h1>

             <hr />         

          </div>

      </div> <!-- end section-head -->

      <div class="row">

        <div id="contact-form" class="six columns tab-whole left">

            <!-- form -->
            <form name="contactForm" id="contactForm" method="post" action="mail.php"  >
                <fieldset>

                  <div class="group">
                           <input name="name" type="text" id="name" placeholder="Имя" value="" minLength="2" required />
                  </div>
                  <div>
                       <input name="email" type="email" id="email" placeholder="Эл. адрес" value="" required />
                   </div>

                  <div>
                        <textarea name="message"  id="message" placeholder="Сообщение" rows="10" cols="50" required ></textarea>
                   </div>

                    <div class="g-recaptcha" data-sitekey="6LepbOEUAAAAAIpvYsm-KELj1CksBS8YD1d7bsL5"></div><br>

                  <div>
                     <button name="enter" class="submitform">Отправить</button>
                     <div id="submit-loader">
                        <div class="text-loader">Sending...</div>                             
                          <div class="s-loader">
                                    <div class="bounce1"></div>
                                    <div class="bounce2"></div>
                                    <div class="bounce3"></div>
                                </div>
                            </div>
                  </div>

                </fieldset>
            </form> <!-- Form End -->

            <!-- contact-warning -->
            <div id="message-warning"></div>
            <!-- contact-success -->
            <div id="message-success">
               <i class="icon-ok"></i>Your message was sent, thank you!<br />
            </div>

         </div>


      </div> <!-- end row -->     

   </section>  <!-- end contact -->

</div>

   <!-- Footer
   ================================================== -->
   <footer>

      <div class="row">

        <div class="twelve columns content group">

                <ul class="social-links">
               <li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
               <li><a href="#"><i class="fa fa-twitter-square"></i></a></li>
               <li><a href="#"><i class="fa fa-google-plus-square"></i></a></li>
               <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
               <li><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
               <li><a href="#"><i class="fa fa-flickr"></i></a></li>
               <li><a href="#"><i class="fa fa-skype"></i></a></li>
            </ul>

            <hr />

            <div class="info">

                <div class="footer-logo"></div>

                <p>Футер тестового сайта.
                </p>

             </div>

        </div>

         <ul class="copyright">
            <li>Какой то текст.</li>
         </ul>

        <!-- <div id="go-top">
            <a class="smoothscroll" title="Back to Top" href="#hero">Вверх<i class="fa fa-angle-up"></i></a>
         </div>-->

      </div> <!-- end row -->

   </footer> <!-- end footer -->

 <!--  <div id="preloader">
        <div id="loader"></div>
   </div> -->

   <!-- Java Script
   ================================================== -->
   <script src="js/jquery-1.11.3.min.js"></script>
   <script src="js/jquery-migrate-1.2.1.min.js"></script>
   <script src="js/jquery.flexslider-min.js"></script>
   <script src="js/jquery.waypoints.min.js"></script>
   <script src="js/jquery.validate.min.js"></script>
   <script src="js/jquery.fittext.js"></script>
   <script src="js/jquery.placeholder.min.js"></script>
   <script src="js/jquery.magnific-popup.min.js"></script>
   <script src="js/main.js"></script>
   <script src="news2.js"></script>
   <script src="mail.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>


</body>

</html>
_END;
?>

Answer 1

Вам нет необходимости использовать ajax в данном случае.
Вот пример подгрузки данных - добавил комментариев для понимания кода:

    window.onload = function () { // При загрузке страницы
        let parent = document.getElementById('nav'); //Ищем элемент по id nav (Навигационная панель)
        let a = parent.getElementsByTagName('a'); // Из этого элемента ищем элементы с тегом а. (Ищем именно в parent, чтобы не попали туда другие ссылки)

        for(let i=0;i<a.length;i++){ // Перебираем все элементы
            a[i].addEventListener('click', function () { // При нажатии на кнопку
                event.preventDefault(); // Убираем стандартное действие (Переход по ссылке)
                let href = a[i].href; // Получаем аттрибут href элемента
                $("#body-container").empty().load(href); // Очищаем элемент и подгружаем нужный файл.
            })
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="nav" class="nav">
    <li><a class="smoothscroll" href="#general">Главная</a></li>
    <li><a class="smoothscroll" href="news.php">Новости</a></li>
    <li><a class="smoothscroll" href="#about">О нас</a></li>
    <li><a class="smoothscroll" href="#contact">Контакт</a></li>
</ul>

<div id="body-container">Начальные данные</div>

Второй файл php, с названием news.php (Лежит в этой же директории):

<?php
?>

<style>
    .text{
        background-color: #003eff;
    }
</style>
<div class="text">Данные из news</div>

При данной реализации у Вас будут подгружаться файлы, указанные в href каждой ссылки в контейнер без перезагрузки страницы.

БЛОГ НА HUSL

Замена контейнера из панели навигации через ajax

Ответы (1 шт):