Display Page Content using AJAX

All,
I’m creating a side menu from a user defined menu in wordpress. I’m getting the menu options from the following code (since I know the menu id the user wants to display on the side):

$menu_items = wp_get_nav_menu_items($menu_id);
$menu_items = (array)$menu_items;
$output = '<div id="menu_options">';
$output .= '<ol class="tabs">';
foreach($menu_items as $menu){
    $output .= '<li><a href="'.$menu->title.'" class="menu_page_id" id="'.$menu->ID.'">'.$menu->title.'</a></li>';
}
$output .= '</ol>';
$output .= '</div>';
$output .= '<div id="menu_content">This is content</div>';
$output .= '<input type="hidden" value="'.$menu_id.'" id="menu_id">';

return $output;

When a user clicks on one of the tabs I invoke an AJAX call to try and get the page content with the following code:

Read More
$('.menu_page_id').click(function(){
    event.preventDefault();
    page_id = $(this).attr("id");
    menu_id = $('#menu_id').val();
    action = "get_page_content";
    $.post(ajaxurl, { page_id: page_id, menu_id: menu_id, action: action }, function(results) {
        results = results.substring(0, results.length - 1);
        $("#menu_content").hide(); 
        $("#menu_content").html(results).fadeIn();
    });
});

This calls the following function to return the content of the clicked page:

function get_page_content(){
    $page_id = mysql_real_escape_string($_POST['page_id']);
    $menu_id = mysql_real_escape_string($_POST['menu_id']);

    $menu_items = wp_get_nav_menu_items($menu_id);
    $menu_items = (array)$menu_items;
    foreach($menu_items as $menu){
        if($menu->ID == $page_id){
            echo $menu->post_content;
        }
    }
}
add_action('wp_ajax_get_page_content', 'get_page_content');
add_action('wp_ajax_nopriv_get_page_content', 'get_page_content');

This all works good and it returns the page content except it just dumps the results out and actually doesn’t display what I want with the shortcodes etc. Say I have the following on the page in WordPress:

[frame_left]<img src="http://www.website.com/wp-content/uploads/2011/10/pic.jpg" alt="" width="300" height="240" />[/frame_left]
<h2 style="margin: 25px 0 0 0;">Person</h2>
<span class="small"><em>Title</em></span>
<p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia justo quis neque dapibus porta...</p>
[button link="http://www.google.com" text="Read More"]
[clear]

The following is what actually gets returned from my AJAX request:

[frame_left][/frame_left] Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia justo quis neque dapibus porta...[button link="http://www.google.com" text="Read More"] [clear]

Is there a way to actually return a page’s content through WordPress and have it display the shortcodes, html etc correctly??

Thanks for any help you can shed on this situation!!

Related posts

Leave a Reply

2 comments

  1. Please try to following:

    remove_filter('wp_get_nav_menu_items', 'strip_tags');
    

    This will remove the filter to strip HTML tags when getting the wp_get_nav_menu_items

    The remove_filter can also be applied to other methods as well.