1

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.

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.

wyem
  • 136
  • 1
  • 13
  • 1
    `Uncaught ReferenceError: Cufon is not defined ` – Blazemonger Oct 19 '12 at 14:11
  • 1
    The browser is better suited than the human eye to recognize syntax errors... why don't you take a look at the console output? – Christoph Oct 19 '12 at 14:14
  • cufon is loaded in my local install so I think it's not coming from this... And the only thing the console is returning is `Failed to load resource: the server responded with a status of 404 (Not Found)` with a a weird address like this `mylocalhostaddress/.../undefined?_=1350656188907`... Do you think it doesn't regognize the `var post_link = $(this).attr("href");` part? – wyem Oct 19 '12 at 14:20
  • As @Blazemonger said, what is `Cufon` supposed to be? Because the `ajaxSuccess` function seems to be being called. – Matt Burland Oct 19 '12 at 14:20
  • Well the cufon just refresh my h1 when the content is loaded. It use to work with my first test (above), I just removed it now to try but with no change... – wyem Oct 19 '12 at 14:22
  • $(this).attr("href") is null ? – mdaguerre Oct 19 '12 at 14:22
  • There you go, you've reach the newbie limit :) What do you mean by "is null"? – wyem Oct 19 '12 at 14:25
  • Does it work if you replace post_link with postLink? I.e. remove the underscore? – Adam Tomat Oct 19 '12 at 14:34
  • No Adam, same result... If I understand it the right way, `$(this).attr("href")` catches the url the link is aiming to (each li is wrapping a ``) and then the content is supposed to be fetched. Am I rignt? – wyem Oct 19 '12 at 14:37
  • Yes that is correct. I just re-read your question, are you trying to load content into a div that doesn't initially exist on page load (i.e. not in the DOM)? – Adam Tomat Oct 19 '12 at 14:42
  • Yes, when I click a thumbnail, it creates a li (which doesn't exist without click). The content of my articles is supposed to be loaded in this li. – wyem Oct 19 '12 at 14:45
  • Ignore those comments, I posted an answer.. *EDIT* to my previous comment. `$(this).attr("href")` would get the href for `` IF (this) is the a object. E.g. `$("a").click(function() { alert( $(this).attr("href") ); });` – Adam Tomat Oct 19 '12 at 15:03
  • Can you tell me what does the `the_permalink();` method returns? I need exact link as it is in the `a` tag. – code-jaff Oct 19 '12 at 15:53
  • it returns the exact url of each post, like this `http://localhost/youpiemonday_New/test2/` – wyem Oct 19 '12 at 16:07
  • Well it use to work when my function was just a load... Once the url is reached thanks to post_link, It fetch the content of #container. I also tried with a simple url like "localhost/blabla/test2" same result. The drawer slides and the page jumps to the url. – wyem Oct 19 '12 at 16:25
  • The only difference is that when i put `.load("http://localhost/youpiemonday_New/test2 #container > * ")` and hit Esc once a link is clicked the content of test2 appears in the drawer. With `.load(post_link + " #container > * ")` only "loading..." is displayed. – wyem Oct 19 '12 at 16:29
  • Are you sure that `the_permalink();` method echo the URL instead of just returning like `return link;`? and of course, are you sure the url ends with `/` is not throws 404? – code-jaff Oct 19 '12 at 16:37
  • Maybe you're right about the `return link;` I'm not sure about the difference, I'll check. Yes the url ends with `/` I tried removing it and it's still working, but once the page loaded the browser replace it at the end of the address bar. – wyem Oct 19 '12 at 16:52

1 Answers1

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.

Adam Tomat
  • 11,206
  • 6
  • 39
  • 47
  • Nice try but it didn't work. .ProjectWrapper is a div contained in the LIs (I know it's bad but it was working, don't remember why I did that...). That div wrap images and text that are my links. I edited the first li in the fiddle so you can see what it looks like in my computer. [http://jsfiddle.net/RF6df/16/](http://jsfiddle.net/RF6df/16/). – wyem Oct 19 '12 at 15:27
  • just edited the post, see the last part? Looks like a `var post_link` issue don't you think? – wyem Oct 19 '12 at 16:44
  • Looks like it, still don't think it is finding the right `href`. Try narrowing down your click event from `$(".ProjectWrap,.mosaic-overlay,.mosaic-backdrop")` to just `$(".mosaic-backdrop")`. See if that gives you the right `post_link`. – Adam Tomat Oct 22 '12 at 08:43
  • Tip: if you have [Firebug](https://getfirebug.com), you can easily test js variables / objects with this line somewhere in your js file: `console.debug(post_link);` Then check the "Console" tab in firebug and it'll show you what your post_link... – Adam Tomat Oct 22 '12 at 08:46
  • Thanks for the tip, here is what I get: `Uncaught ReferenceError: post_link is not defined`. By the way, my click event looks like this now `$('#portfolio-list li:not(#DrawerContainer)').click(function()` but I'm quite sure the problem isn't coming from this, since when I click the drawer opens. – wyem Oct 26 '12 at 15:04
  • Updated my code in my answer, try that. The idea is trying to force it to find the right `a` as I still believe post_link cannot find your link. Might be worth putting an `id` on one link and hard coding `post_link = $("#post_link").href();` to see if it makes any difference. – Adam Tomat Oct 26 '12 at 15:15
  • Hi @Adam, it seems that `.parentsUntil(".ProjectWrap")` is causing a problem. Only the first li content is loaded, regardless which thumbnail is clicked. If I understood the statement, it looks like it's preventing the browser from searching more LIs when the first one is found. Am I right? If I remove it your code is working. – wyem Oct 31 '12 at 14:03
  • Yeah it does look like that was an issue, but not for the reason you think. parentsUntil() needs at least 1 level to traverse up. That code was trying to go up >1 level to find `.ProjectWrap` when in fact your `.ProjectWrap` was the immediate parent. Therefore .parent() will work fine and .parentsUntil() wont select any objects. For a live demo of this check out (use your console log to see what object is selected): [http://jsfiddle.net/RF6df/17/](http://jsfiddle.net/RF6df/17/) – Adam Tomat Oct 31 '12 at 15:27
  • Woaw ! thank you very much for that precise explanation, I really appreciate. By the way, it seems that my loading problem doesn't comes from the function. Everytime I restart WAMPserver, the problem occurs. I've started a new thread [http://stackoverflow.com/questions/13123167/jquery-load-is-working-till-i-restart-wampserver-and-then-not-anymore](here). Maybe you can help? – wyem Oct 31 '12 at 16:06