Ajax.load 向我发送链接，而不是将 html 加载到 div 中

Question

So I've recently started a new laravel project and am in the user profile page, this page will have a sidebar (with links like Portfolio, Account Settings, etc..).
The thing I'm trying to do, is to load each pages into a div when a link in the sidebar is clicked and instead of loading the pages, it just acts as a normal link <a> , It redirects me to the link provided in the href. (I've already prevented default)
Here's the code:

@extends('layouts.app')

@section('content')

<!-- The sidebar -->
<div id="sideCont" class="sidebar">
    <a class="active" href="#home">Profile</a>
    <a href="{{ asset('page1.html') }}">News</a>
    <a href="#contact">Portfolio</a>
    <a href="#about">About</a>
  </div>

  <!-- Page content -->
  <div id="contentCont" class="content1">

    @if (\Session::has('success'))
        <div class="alert success">
          <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>  
          <p>{{\Session::get('success')}}</p>
        </div>
        @elseif (count($errors) > 0)
        <div class="alert">
          <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>  
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{$error}}</li>
            @endforeach
          </ul>
        </div>   
        @endif

        <h3>Contributor details</h3>
            <table class="table table-borderless">
              <tbody>
                  <tr>
                    <th>ID</th>
                      <td>{{$contributor->id}}</td>
                      <td></td>
                  </tr>
                  <tr>
                    <th>Display Name</th>
                      <td>{{$contributor->display_name}}</td>
                      <td><span id='clickableAwesomeFont'><i class="fas fa-user-edit" onclick="openForm_DisplayName()"></i></span></td>
                  </tr>

                  <tr>
                    <th>Email</th>  
                      <td>{{Auth::user()->email}}</td>
                      <td><span id='clickableAwesomeFont'><i class="fas fa-user-edit" onclick="openForm_Email()"></i></span></td>
                  </tr>
              </tbody>
          </table>
  </div>


@endsection

and here is the js:

<script>
  $(function () {
        $('#sideCont a').on('click', function (e) {
            e.preventDefault();
            var page = $(this).attr('href');
            $('#contentCont').load(page);
        });
    });
</script>

The script I included:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> --Ajax purpose--

I tried a lot of things, and iam still stuck so if you could help me it would be awesome thanks.

Answer 1

I imagine it's because your href's aren't real links - they are only location hashes, which are not passed to the destination server. If your nav was like so:

<div>
  <a id='home' href="#home">Profile</a>
  <a id='about' href="/about">About</a>
</div>

Based on your click handler code, if you press 'Home' you will eventually be effectively calling

$('#contentCont').load('');

But on About, it would be

$('#contentCont').load('/about');

So, changing your hashes to slashes as a baseline should get you closer to where you want to be.

Answer 2

It looks like your javascript is reloading the page.

You included ajax js but I don't see any Ajax calls. The easiest way is to have a PHP listen for AJAX requests and ONLY produce JSON before exitting. so before your includes headers, maybe after some core files that only redirect if not logged in but make sure they don't output anything to device being served or ajax request will fail stating invalid json received..page.php:

page.php:
$passwordhash= '$2y$10$dklsjfkljklsdjlkfjdksljflkjdslf.kjdhfjkdshkjfhkjdshfkjshfkjhkjdskdfhkjdshkjf';
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['AJAX']) && password_verify($_POST['SECRET'], $hash)) {
    $results = someSQLquery();
    echo json_encode(results);
    exit;
}
include('header.php';

<button onclick="morePlease();">More</button>
<script>
function morePlease(){
    var dataToSubmit = $('#myform').serializeArray();
//a secret/key might be enough, but setting ajax reminds me not to have DOM elements up there.

    dataToSubmit.push({name: "secret", value: $("input[name=secret]").val()});
    dataToSubmit.push({name: "AJAX", value: true});
    $.ajax({
        type: 'POST',
        data: dataToSubmit
        //url: anotherMachine.php 
    })
    .done(function(response){

        console.log('Submitted form successfully. Response:');
        console.log(response == null ? "Null response." : response);
        JSON.parse(response);
    })
    .fail(function() {
        console.log('Failed submitting form.');
    });
}
</script>

You could also just bypass the whole process and provide the data before the variable sees an EOL, no quests besides the one you're serving.:

javascript within the page serving PHP:

<script>
var wtf = JSON.parse( <?= $thinAir ?>; );
</script>

Answer 3

Ok, the issue was that my js was loaded before the jquery. it works now ! thank you all