0

All, I'm using Wordpress so I know the main content falls within the following div:

<div id="content" role="main">

I'm trying to use the jQuery load function to display only the content in between those tags. How can I say the id of content but the role of main?

I tried to do the following:

page_url = $(this).attr("href");
$("#menu_content").load(page_url + ' #content main');

This doesn't display anything though. Any ideas on how to do this? Thanks!

Tony Ranieri
  • 1,479
  • 1
  • 18
  • 32
user1048676
  • 9,756
  • 26
  • 83
  • 120

2 Answers2

1

Try this:

 $("#menu_content").load(page_url + ' #content[role="main"]');

Am using an Attribute selector but only sense of using this would be if you have different "role" under different circumstances but it really makes no sense adding anything to an ID selector

http://api.jquery.com/category/selectors/

If you want only what is inside #content use $.get

  $.get(page_url, function(data){
   $("#menu_content").html( $(data).find('#content').html());
  })
charlietfl
  • 170,828
  • 13
  • 121
  • 150
1

Load the page first and then grab the content:

$('<div/>').load(page_url , function() {
    $('#menu_content').html($(this).find('#content').html());
});
jchavannes
  • 2,440
  • 1
  • 26
  • 15
  • Wasn't able to get Charlietfl's answer working, not sure why it was accepted. However, I did test this code and it does work. – jchavannes Mar 15 '12 at 02:26
  • Your html is stored in a variable beforehand. I tried using the code in your post and it didn't work. I even played with it for awhile and I was not able to find a way to get it work. – jchavannes Mar 15 '12 at 03:03
  • that variable is only to send to fiddle server, which sends it right back in the request – charlietfl Mar 15 '12 at 03:13