Ajax call loads the current content

Question

I have looked through so many forums racking my brain to try and get this super simple load function working. I've narrowed it down to what I believe is a selector issue on the .fadeIn() part of the loadContent function.

I can see why it keeps loading the same stuff, as it uses the same selector, but based on the tutorial I've been trying to use ( http://css-tricks.com/rethinking-dynamic-page-replacing-content/ ) as well as the other (even MORE broken) method that I DID get to work (based on this: http://code.tutsplus.com/tutorials/how-to-load-in-and-animate-content-with-jquery--net-26 ), it seems like it should work!

I've tried using $(href) as a selector, but then it just fades the old content and doesn't load anything. I also tried adding an alert to see what href was, and it returned the correct html page followed by the correct element id (Articles/Cats.html #content).

Here's the function itself, and if you need more info, I'd be glad to give it! Any help would be incredibly, well, helpful!

function articleClickLoad () {
    if (Modernizr.history) {

        var newHash      = "",
            $Content     = $("#content"),
            $el;

        $("#content").on("click", "a", function() {

            var _link = $(this).attr("href");
            var toLoad = $(this).attr('href')+' #content';

            history.pushState(null, null, _link);
            loadContent(toLoad);
            return false;
        });

        function loadContent(href){

            $Content.find("#content");
            $Content.fadeOut(1000, function() {
                $("main").load(href,'', function() {
                    $Content.fadeIn(1000);
                });
            });
        }

        $(window).bind('popstate', function(){
           _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
           loadContent(toLoad);
        });
    }
}
articleClickLoad();

Thanks!

Answer 1

I see two potential issues. .load takes a URL but you're adding ' #content' in your click handler for some reason; it should be removed Update: I overlooked that passing a page fragment is perfectly valid, forget about that.

In your loadContent method, you're calling load on a selector $("main") . It is not clear from your source what main could be but I suppose it should be #content instead.

Also note that you can remove the second parameter '' from the .load call. See .load documentation .