Here is HTML Nav:
<ul class="sub-menu side-nav page-sidebar child-pages">
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-9045" data-id="105"><a href="#History" class="menu-image-title-after"><span class="menu-image-title">History</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-9046" data-id="185"><a href="#Strategic Plan" class="menu-image-title-after"><span class="menu-image-title">Strategic Plan</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-9047" data-id="183"><a href="#Financial Statements" class="menu-image-title-after"><span class="menu-image-title">Financial Statements</span></a></li>
</ul>
Here is my PHP function:
add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );
function my_load_ajax_content(){
$post_id = $_POST[ 'post_id' ];
$post = get_post( $post_id, OBJECT);
$response = array( apply_filters( 'the_content', $post->post_title ), apply_filters( 'the_content', $post->post_content ) );
echo '<div class="entry-header"><h1 class="entry-title">'.$response[0].'</h1></div><div class="entry-content">'.$response[1].'</div>';
die(1);
}
wp_enqueue_script( 'my-ajax-request', get_template_directory_uri() . '/js/ajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
Here's what's in ajax.js:
jQuery(document).ready(function($) {
$(window).on('load',Foundation.utils.throttle(function(e){
if($('.current-menu-item > .sub-menu')){
$('#sidebar-b').append($('.current-menu-item > .sub-menu').addClass('side-nav page-sidebar child-pages'));
$("#sidebar-b .menu-item a:not(.pdf)").each(function(){
var link_text = $(this).children('.menu-image-title').html();
$(this).attr('href','#'+link_text);
});
}
},300));
$("#sidebar-b .menu-item .menu-image-title-after").click(function(e) {
$("#loading-animation").show();
var post_id = $(this).parent("li").attr("data-id");
var ajaxURL = MyAjax.ajaxurl;
$.ajax({
type: 'POST',
url: ajaxURL,
data: {"action":"load-content",post_id:post_id},
success: function(response){
$("#content > article").html(response);
$("#loading-animation").hide();
return false;
}
});
});
});
Additionally, when checking the <head> I noticed that my ajax.js script is not even loading even though it's being enqueued in my PHP function. Any ideas on what I'm doing wrong? I've scoured Google for the last 3 hours and haven't found an exact answer.
