using jQuery to load php files into a div not working

Question

so I have my main layout as such:

<div class="menu">
    <?php include('/menu.php'); ?>
</div>
<div class="main" id="content">
    <?php include('/home.php'); ?>
</div>

In the menu.php I have 4 divs set up as such:

<div class="link current">
    <a href="#" class="home">
        Home
    </a>
</div>
<div class="link">
    <a href="#" class="about">
        About
    </a>
</div>
<div class="link">
    <a href="#" class="forums">
        Forums
    </a>
</div>
<div class="link">
    <a href="#" class="contact">
        Contact
    </a>
</div>

And I'm including this .js file in the head of the index page

$(function () {
    $('div.link a').click(function () {
        $('div.link').removeClass('current');
        $(this).closest('div.link').addClass('current');
        if($('div.link a').hasClass('home')) {
            $('#content').load('/home.php');
        } else if($('div.link a').hasClass('about')) {
            $('#content').load('/about.php');
        } else if($('div.link a').hasClass('forums')) {
            $('#content').load('/forums.php');
        } else if($('div.link a').hasClass('contact')) {
            $('#content').load('/contact.php');
        } else return false;
    });
});

But it doesn't work.

I'm new to all of this and have pieced this code together using varied sources on the internet, after trying it myself and not being able to figure it out, I've come for help.

The hierarchy of the site is as such.

-/
    -res/
        -css/
            -default.css
        -imgs/
    -scripts/
        -jquery.js
        -load.js (this is the one shown above) 
    -index.php 
    -menu.php 
    -home.php 
    -about.php 
    -forums.php 
    -contact.php

If anyone can provide help, it will be greatly appreciated.

The formatting in this question is (was - I edited it for you this time) very poor. There's a post preview below the text box for a reason. — Bojangles
– Bojangles, Commented Apr 5, 2012 at 1:08
I know, I saw this, you just got to it before I did, I apologise however, I was attempting to sort it out. — Andrew Fairbairn
– Andrew Fairbairn, Commented Apr 5, 2012 at 1:09
Ah, that's alright then :) I've seen posts where people simply just don't care and expect everything they want (which isn't what's happening here). Are your <a>s being added to the DOM dynamically, or are they present on page load? Try adding an alert('This works') to your $.click() handler to make sure it's actually being triggered. — Bojangles
– Bojangles, Commented Apr 5, 2012 at 1:15
I know it's being triggered as the first part of the script adds the class "current" to the div parenting the clicked link and removes that class from any other of the parent divs. — Andrew Fairbairn
– Andrew Fairbairn, Commented Apr 5, 2012 at 1:16

John W · Accepted Answer · 2012-04-05 01:22:58Z

3

The first condition in your if statements is checking to see if any "div.link a" has the class "home". Therefore the first if condition is always true and you're always loading /home.php into #content. What you want to do is check to see if the link that was clicked has the class.

You should use if($(this).hasClass('home')) { ...

Also, if you want to clean things up a bit, I would suggest:

$('div.link a').click(function () {
    $('div.link').removeClass('current');
    $(this).closest('div.link').addClass('current');
    $('#content').load('/' + $(this).attr('class') + '.php');
});

This way you don't have to maintain the if statements. Though, if you end up adding more classes to those links, this will break. Perhaps use a data-* attribute? <a href="#" data-load="contact">...

edited Apr 5, 2012 at 1:22

answered Apr 5, 2012 at 1:16

John W

1,5222 gold badges14 silver badges19 bronze badges

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

2 Comments

Bojangles Over a year ago

Well snap, have a +1. I completely missed this!

Andrew Fairbairn Over a year ago

Thank you very much, I also had a few syntax errors but I dealt with them too.

Collectives™ on Stack Overflow

using jQuery to load php files into a div not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related