Loading Wordpress posts through Ajax

Question

So, I have this <div> in which my blog posts are contained. Its class is .post. What I want to do is that every time someone clicks on the recent posts at the widget area, the content is loaded through Ajax instead of refreshing the page.

Here is my code

jQuery(function()
{
    jQuery(".umrp-list li a").click(function(){ //here I select the links of the widget
        var post_url = jQuery(this).attr("href");
        jQuery(".post").html('<div class="loading">Loading Content...</div>');
        jQuery(".post").load(post_url);
        return false;
    });
});

So I have two problems

Whenever I click on a "Recent Posts" link, the content loads where I want it to load, but my webpage is idle/frozen for about 2 seconds after the click. Why is that happening?
When I click for the first time, everything works except the detail I described above. When I click for the second time (another link or even the same) then instead of loading the post I clicked, it loads my whole webpage on that .post container. Any ideas why this is happening?

What happens if you add a preventDefault() action in your click code? Change the click to: click(function(e){ Then add e.prventDefault(); within the function. — ckpepper02
– ckpepper02, Commented May 23, 2013 at 17:46

David L · Accepted Answer · 2013-05-23 17:41:38Z

1

It sounds like you're sending the request synchronously. Synchronous operations are blocking, whereas asynchronous operations allow the UI to continue functioning while the operation completes behind the scenes.

As for the second issue, it sounds like jQuery(this) is somehow pointing to the document instead of the context of the element. Check your "this" value the second time around and it'll probably provide you with some insight.

answered May 23, 2013 at 17:41

David L

34.1k8 gold badges70 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stevenson Over a year ago

Hey there David. About the synchronous/asynchronous thing, I will have to check it. As for the this I actually tested it by alert(this) whenever the click is triggered and the URL is actually the correct one but it still doesn't load it as it should. The only weird thing that I saw is that when I click it for the first time, all the slashes ` of the URL are alerted as slashes whilst the second time they are alerted as %2F`

David L Over a year ago

@Stevenson What is the value of jQuery(".post") the second time through in jQuery(".post").load(post_url);?

Stevenson Over a year ago

How can I check that David?

Stevenson Over a year ago

God ! You are not going to believe it! It had nothing to do with anything!!! At the single.php (it's where the blog post template is stored), I forgot to erase <?php get_header(); ?> and <?php get_footer(); ?> Now everything is great!

David L Over a year ago

lol, it's so funny how the littlest things can trip you up! Glad you found it!

|

Stevenson · Accepted Answer · 2013-05-23 18:05:14Z

0

So the problem was that at the single.php (it's where the blog post template is stored), I forgot to erase <?php get_header(); ?> and <?php get_footer(); ?> Now everything is great!

answered May 23, 2013 at 18:05

Stevenson

931 silver badge10 bronze badges

Collectives™ on Stack Overflow

Loading Wordpress posts through Ajax

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related