Only load a part of a page with jquery

I have a wordpress website and want to load my pages using jquery. I only want to load the content div, so I pass this the url like this:

var url = $(this).attr('href') + "#content";

Now when I try to load the page using ajax it loads the url without the #content part. Now it loads the complete page into my div instead of only the part that I want.

Read More

Maybe it has something to do with my .htaccess:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# RewriteRule ^index.php$ - [L]
RewriteRule ^(index.php/?|intro.html)$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Any ideas?

Related posts

Leave a Reply

3 comments

  1. I think you need a space before the hash.

    Here is a .load() example from the jQuery docs:

    $('#b').load('article.html #target');
    

    so in your case:

    var url = $(this).attr('href') + " #content";
    
    $('#containerDiv').load(url);
    
  2. you’ll have to parse the data returned by the ajax call with jquery.

    So if the div you want to show on your page has an id of “results”, your success function would look something like this:

    success: function(data) {
        $("content").html($(data).find("results").html());
    }