Указанный контент страницы повторяется при использовании Ajax только для перезагрузки раздела страницы

Question

Я разрабатываю приложение laravel с боковой панелью и не перезагружаю всю страницу, когда пользователь нажимает на ссылку. Я использовал этот скрипт .

<script>
    $('document').ready(function(){

      $('.nav-link').click(function (event) {
        // Avoid the link click from loading a new page
        event.preventDefault();

        // Load the content from the link's href attribute
        $('.container-fluid').load($(this).attr('href'));
    })

    });

 </script>

---

и это HTML

  <a class="nav-link" href="/test">
 <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">



      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

Это содержимое страницы, которое / test содержит

  this is for testing purposes only

Эта строка повторяется несколько раз.
Я искал много обходных путей и изучал рендеринг laravel, но я не мог сделать эту работу.

Answer 1

Вы используете неправильный селектор, поскольку container-fluid существует более одного раза в вашем макете.

Попробуйте вместо этого или добавьте атрибут id к вашему основному контенту div:

    $('.content .container-fluid').load($(this).attr('href'));

Или

<!-- Main content -->
<div class="content">
  <div id="my-content" class="container-fluid">
  </div><!-- /.container-fluid -->
</div>
<!-- /.content -->

С:

    $('#my-content').load($(this).attr('href'));

Answer 2

Существуют два container-fluid класса, которые являются проблемой.