Loading Pages into Div with Jquery/Ajax (Click function not working)

Trying to get content from other pages to load into specific Div from url on click . But for some reason it will not work. The link keeps forwarding to the page instead of opening in the div. On top of that the initial load code works. It loads the initial content. after setting an alarm to notify my when I click the link with the desired content it sends the alert. Then I put return false; at the end and now it doesn't load anything. What am I doing wrong. Im using the code that I used a year ago on here. but now its not working on my new website. Please help me determine how to fix this.

Here is my AJAX code:

$(document).ready(function () {
$('#main').load('pages/home.php');

    $('ul#navMenu li a').click(function() {
        var page = $(this).attr('href');
        $('main').load('pages/' + page + '.php');
        return false;
    }); 

});

Here is my HTML:

<body class="">
    <div class="container">
        <div class="menu-wrap">
            <nav class="menu">
                <div class="link-list">
                    <center>
                    <ul id="navMenu">
                    <li><a href="pages/home.php"><span>HOME</span></a></li>
                    <li><a href="pages/artist.php"><span>TALENT</span></a></li>
                    <li><a href="#"><span>SERVICES</span></a></li>
                    <li><a href="#"><span>MUSIC</span></a></li>
                    <li><a href="#"><span>BEATS</span></a></li>
                    <li><a href="#"><span>VIDEOS</span></a></li>
                    <li><a href="#"><span>CONTACT US</span></a></li>
                    </ul>
                    </center>
                </div>

            </nav>
        </div>
        <button class="menu-button" id="open-button"><img src="img/menubutt.png" height="42" width="42"><span>Open Menu</span></button>
        <div class="content-wrap">
            <div id="main">

            </div>
        </div><!-- /content-wrap -->
    </div><!-- /container -->
    <script src="js/jquery-3.2.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/main.js"></script>

And, here's the website testing on my server:

https://trillumonopoly.com/testing

Looks like I found the real reason of your error.

Take a look at your link <li><a href="pages/home.php"><span>HOME</span></a></li> To be more precise, at home.php

In your JS you get full link, e.g. pages/home.php, then you add to it .php one more time, so your final link is pages/home.php.php, but not pages/home.php

Try to change

$('main').load('pages/' + page + '.php');

to

$('#main').load('pages/' + page + '.php');

You have forgotten the # at start of main

Try correcting your url on page variable and also your main typo:

$(document).ready(function () {
$('#main').load('pages/home.php');

    $('ul#navMenu li a').click(function() {
        var page = $(this).attr('href');//your href attribute is '#', which doesn't yield a correct path
        $('#main').load('pages/' + page + '.php');//$('#main') instead of $('main'), for id
        return false;
    }); 

});

0 Comment

NO COMMENTS

LEAVE A REPLY

Captcha image