Jquery load ins’t working, is there a syntax error in my code?

I’m working on a wordpress portfolio and I’m trying to load posts content in a sliding drawer with ajax/jquery .load(). With the kind help of @techfoobar, I’m already able to open the drawer when I click on selected elements (thumbnails) of my page. But now I’m having the hardest time finding why my ajax content isn’t loaded in this div…

When I click on a thumbnail, the drawer is opened and then the browser continues to the url, instead of loading this url in the drawer. If I hit Esc to stop the browser, I can read “loading…” so the jQuery is working till that point.

Read More

Can someone check this fiddle http://jsfiddle.net/RF6df/14/ and tell me if I misplaced the load function, or if there is a major syntax problem preventing my content to load correctly? (I assume the load won’t work on jsfiddle but at least you can check the code)

FYI before that, when trying ajax for the first time, I use to load my content with this and it was working fine but my div was already in place in my php page (not loaded when a click is detected).
Oh and please keep in mind that I’m a newbie in jquery, if you can comment/explain what you see or do, that would be invaluable!

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $(".ProjectWrap,.mosaic-overlay,.mosaic-backdrop").click(function(){
        var post_link = $(this).attr("href");
        //$('#DrawerContainer').slideToggle(500);
        $("#DrawerContainer").html("loading...");
        $("#DrawerContainer").load(post_link + " #container > * ");
    return false;
    });
});
$(document).ajaxSuccess(function() {  // refresh heading in ajax called element
Cufon('h1'); 
});

EDIT:
I just noticed that when I write .load("http://localhost/youpiemonday_New/test4 #container > * ") the drawer fetch the content of test4 post. I still have to hit Esc to stop the browser, otherwise it’s too quick.
If I write .load(post_link + " #container > * ") the only thing displayed is “loading…”.
So I assume the load is working but the problem comes from the post_link part. The weird thing is that it use to work when my function was striclty limited to a load.

Related posts

Leave a Reply

1 comment

  1. I think I see your issue. .ProjectWrap is your li yes? If so what you are trying to do is get the href from an LI, which doesn’t have a href attribute.

    Try this instead:

    var post_link = $(this)
                     .parentsUntil(".ProjectWrap")
                     .parent()
                     .find(".mosaic-backdrop")
                     .attr("href");
    

    What this is doing is saying: for THIS (.ProjectWrapper) find the <a /> and get the href.