using jQuery to load php files into a div not working - 【StackMirror】|php|javascript|jquery|html

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.

2012-04-05 01:05
by Andrew Fairbairn

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 2012-04-05 01: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 2012-04-05 01: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 2012-04-05 01: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 2012-04-05 01:16

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">...

2012-04-05 01:16
by John W

Well snap, have a +1. I completely missed this - Bojangles 2012-04-05 01:18

Thank you very much, I also had a few syntax errors but I dealt with them too - Andrew Fairbairn 2012-04-05 01:20