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
.postcontainer. Any ideas why this is happening?
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.
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!