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

Question

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

Try to replace $('ul#navMenu li a').click(function() { with $("ul#navMenu").on("click", "li a", function(event) {event.preventDefault(); — Rulisp
– Rulisp, Commented Oct 9, 2017 at 2:37
@rulisp this doesnt work it just opens the page in the same window but not in the div — Trillumonopoly Inc
– Trillumonopoly Inc, Commented Oct 9, 2017 at 2:48
Try to eliminate your javascript error, from your console it says trillumonopoly.com/testing/js/bootstrap.min.js isn't found — Vincent1989
– Vincent1989, Commented Oct 9, 2017 at 3:02
@TrillumonopolyInc btw, not sure that this is a reason, but your site also throws error(in console) Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) — Rulisp
– Rulisp, Commented Oct 9, 2017 at 3:20

Rulisp · Accepted Answer · 2017-10-09 03:23:49Z

3

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

answered Oct 9, 2017 at 3:23

Rulisp

1,7661 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Trillumonopoly Inc Over a year ago

this work also had to take the pages/ out too and the .php and just included the page name becuase it is specified where to load from(directory) and the extension in the JS... thx

Samuel Martins · Accepted Answer · 2017-10-09 02:40:53Z

0

Try to change

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

to

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

You have forgotten the # at start of main

answered Oct 9, 2017 at 2:40

Samuel Martins

462 bronze badges

3 Comments

Trillumonopoly Inc Over a year ago

this doesnt work either. and I corrected it. Still No different result

Trillumonopoly Inc Over a year ago

this doesnt work either. and I corrected it. Still No different result

Samuel Martins Over a year ago

The requested url if wrong :p. You are requesting https://www.trillumonopoly.com/testing/pages/pages/artist.php.php (two /pages). Change to $('#main').load(page); and will probably work :D

Vincent1989 · Accepted Answer · 2017-10-09 02:41:44Z

0

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;
    }); 

});

answered Oct 9, 2017 at 2:41

Vincent1989

1,6554 gold badges14 silver badges26 bronze badges

1 Comment

Trillumonopoly Inc Over a year ago

after correcting this it still gives me same result

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related