0

I try to have some content loaded on Wordpress thanks to Jquery .load(). Sometimes, when my code is OK, it's not working anymore the day after...

I'm trying to narrow the causes. First I thought it was a syntax problem or a single/double quote mix up, but since it worked once, there is no reason syntax or error is involved. I thought about bad cache settings but shift+F5 won't break my working code.

And now I just tried, with a perfectly working code, to close and restart WAMPserver. And Bingo, when I restart the server it's impossible to get my load function to work (the same from 1 min before...) !

EDIT: I just replaced the code (below) with the one I'm using now

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $("#portfolio-list li:not(#DrawerContainer)").click(function(){
        var post_link = $(this)
             //.parentsUntil(".ProjectWrap") 
             //.parent()
             .find('.mosaic-backdrop')
             .attr("href");
    console.debug(post_link); //to get post_link info in the console
    $('#DrawerContainer').remove(); // remove existing, if any
    $('<li/>').attr('id', 'DrawerContainer').css({display: 'none'}).data('citem', this).html("loading...").load(post_link + " #container > * ").insertAfter(LastInRow).slideDown(500);
    return false; 
    });
});

When the function isn't working, I try to remove the part .load(post_link + " #container > * "); and replace it with the part just after (a complete url). Usually it works and at least I can continue styling my page, but I have to fix the problem.

What can cause this weird behavior? Can WAMPserver rewrite something while closing? Is there an option I could check?

wyem
  • 136
  • 1
  • 13
  • 1
    use browser console to look at request to help isolate server vs client issue. A lot can be leraned from request status, response etc. "Not working" isn't very informative – charlietfl Oct 29 '12 at 14:08
  • Well the console doesn't give me any error. I tried `console.debug(post_link);` and the url is right. But the DrawerContainer div only displays "loading..." and the content isn't loaded after that. – wyem Oct 29 '12 at 14:31
  • look at the request itself need to see status.. 200,401, 500 etc would really help. If 200 then can dig deeper into request within the console and look at what is actually sent, headers etc. Inspecting the request is not the same as using `console.log()` – charlietfl Oct 29 '12 at 14:37
  • OK thanks, here is what I see in Chrome network tab. Status: 301 Moved permanently Initiator: jquery-latest.js:8416. Does it explain something to you? I'm not a developer so I try to learn at the same time. I load jquery-latest here: http://code.jquery.com/jquery-latest.js – wyem Oct 29 '12 at 18:32
  • what about your local files ... do they all load? Do any erros get thrown in console? You are close but not digging deep enough within the network tab and checking all the resources or checking AJAX requests – charlietfl Oct 29 '12 at 18:34
  • you're right, there is a red line just after that with a canceled status, type: pending, initiator: http://localhost/youpiemonday_New/reel?_=1351600587520 Redirect... I don't know where this part `?_=1351600587520` comes from. – wyem Oct 30 '12 at 12:41
  • I don't know exactly what you are reading howver the `?_=1351600587520` is simply a timestamp added to the url as a search param so the url is unique and therefore won't use a cached version and force the browser to make new call to server. The `redirect` part seems suspicious – charlietfl Oct 30 '12 at 12:58
  • OK good to know about the timestamp. Yeah the redirect part is quite suspect. I can't spot yet where it's coming from... – wyem Oct 30 '12 at 16:41
  • Hi @charlietfl, now I have this in the console `XMLHttpRequest cannot load http://localhost/youpiemonday_New/test4/?_=1351696859860. Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin.` Maybe more useful? – wyem Oct 31 '12 at 15:29
  • I think there might be an issue with cross domain ajax, as it thinks 127.0.0.1 is different to localhost. Add this to the php page handling the AJAX (or in the .htaccess, I can't remember): ``. Further read [here](http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin) – Adam Tomat Oct 31 '12 at 16:15
  • Awesome! Looks like it's working @Adam! I had to put it directly in the single.php (i.e. not the container but the content itself). Hope it won't be broken on the next boot... :) Can you make an answer so I can accept it? thx again ! – wyem Oct 31 '12 at 16:30

1 Answers1

0

Although this was solved in the question's comments, here is an answer for anybody skimming the page.

There is an issue with running ajax requests across different domains. Your WAMPserver does not like it and will stop it unless you tell it otherwise. Although you are working locally, WAMPserver thinks http://localhost/ is different to http://127.0.0.1/.

To get around this, in the file that handles your ajax add this:
<?php header('Access-Control-Allow-Origin: *'); ?>

Note, you can change the * for a URL too (e.g. http://127.0.0.1/

If that does not work, you may have to change settings on your server.

Adam Tomat
  • 11,206
  • 6
  • 39
  • 47
  • Hi Adam, I have one last question about this. I added manually in the query a `li` item which load a page (not a wordpress post) and remains at top of my list. I added `` in the php of this page and when I start my server, the load function isn't working for this thumbnail. But when I go to another page and come back to this one, there is no problem anymore, the load works perfectly. I have the same issue in chrome, Ie and firefox. Do you have an idea why this would occur? – wyem Nov 06 '12 at 23:45
  • Oops nevermind, there was a slash missing at the end of href in the new Li item... Gosh I've wasted hours on this!! u_u – wyem Nov 07 '12 at 13:40
  • Always check the syntax first ;) – Adam Tomat Nov 08 '12 at 09:20