Question

I have this piece of code in my wordpress theme to load the pages in it, check it:

($j for no conflict)

$j = jQuery.noConflict();
$j(document).ready(function () {
    $j("#main-nav a").click(function (event) {
        event.preventDefault();
        $jloca = this.href;
        $j("#content").load($jloca '#main-content');
        alert('****');

    });
});

It loads the #main-content from the page I have specified in the href on my #main-nav a.
It loads inside the #content OK.

But my alert does not work!

Well, I don’t want to alert, I want to do some CSS changes but alert is for testing.

I also tried it as a callback function, see:

$j=jQuery.noConflict();

$j(document).ready(function () {
    $j("#main-nav a").click(function (event) {
        event.preventDefault();
        $jloca = this.href;
        $j("#content").load($jloca '#main-content', function () {
            alert('Load was performed.');
        });
    });
});

Nothing seems to work.

Does anyone have any ideas what am I doing wrong?

Answer 1

Your code doesn’t compile.

Change

$j("#content").load($jloca '#main-content');

to

$j("#content").load($jloca + ' #main-content');

Note that you should first look at the console to see those errors. I’d suggest you to read about the developer tools.