Onset Media Onset Media - 6 months ago 19
jQuery Question

Custom Wordpress Ajax Coding

Ok So I have created this AJAX code For My Wordpress theme and I originally have it for html. How Do I use wordpress php coding to get the content from the wordpress pages when clicked? Not concerned with getting post loops etc.... Going to have a static page. But I Do need It to get the content of the pages on click.

Heres the CODE

$( document ).ready(function() {
$.ajax({
method: 'GET',
url: "pages/main.html",
success: function(content)
{
$('#contentarea').html (content);
}
});
});



$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )

return false;
});


HTML structure for menu_nav

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#homenav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>


</div>


<div class="collapse navbar-collapse" id="homenav">
<ul class="nav navbar-nav">
<li><a href="pages/main.html" class="menu_nav demo-4">
<span>
<span>Home</span>
<span>-Home-</span>
<span></span>
</span>
</a></li>

<li> <a href="pages/artist.html" class="menu_nav demo-4">
<span>
<span>Roster</span>
<span>-Roster-</span>
<span></span>
</span>
</a></li>
<li>
<a href="pages/order.html" class="menu_nav demo-4">
<span>
<span>Beats</span>
<span>-Beats-</span>
<span></span>
</span>
</a>
</li> <li>
<a href="pages/music.html" class="menu_nav demo-4">
<span>
<span>Music</span>
<span>-Music-</span>
<span></span>
</span>
</a>
</li>
<li>
<a href="pages/videos.html" class="menu_nav demo-4">
<span>
<span>Videos</span>
<span>-Videos-</span>
<span></span>
</span>
</a> </li>
<li>
<a href="pages/videos.php" class="menu_nav demo-4">
<span>
<span>Store</span>
<span>-Store-</span>
<span></span>
</span>
</a>
</li>
<li>
<a href="pages/services.html" class="menu_nav demo-4">
<span>
<span>Services</span>
<span>-Services-</span>
<span></span>
</span>
</a>
</li>
<li>
<a href="#" class="menu_nav demo-4">
<span>
<span>Resources</span>
<span>-Resources-</span>
<span></span>
</span>
</a> </li>

<li>
<a href="#" class="demo-4 snipcart-checkout">
<span>
<span>YOUR CART: </span>
<span><div class="snipcart-summary"><span class="snipcart-total-price"></span></div></span>
<span></span>
</span>
</a> </li>


</ul>

</div>
<div class="col-sm-1 col-md-1"><div class="navbar-right">
<a href="#" class=""><font color="black" ></span></font></a></span>
</div></div>




</div>
</nav>

Answer

When you could add instead of the end url just the page id you could do something like this:

HTML

<a href="#" class="menu_nav demo4" data-page="1">Home</a>
<a href="#" class="menu_nav demo4" data-page="2">About</a>
<a href="#" class="menu_nav demo4" data-page="3">Projects</a>
<a href="#" class="menu_nav demo4" data-page="4">Contact</a>

PHP

<?php
    /**
     * Init js script and its variables
     */
    add_action( 'wp_enqueue_scripts', 'init_js_vars' );
    function init_js_vars() {
        wp_enqueue_script( 'your_script', [YOUR_PATH_TO_JS_FILE], array( 'jquery') );

        wp_localize_script( 'your_script', 'theme', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' );
            'nonce' => wp_create_nonce( 'ajax-get-page-content' );
            'page' => 4
        ) );
    }

    /**
     * Handle ajax request, returns content of specific page
     */
    add_action( 'wp_ajax_get_page_content', 'get_page_content' );
    add_action( 'wp_ajax_nopriv_get_page_content', 'get_page_content' );
    function get_page_content() {
        check_ajax_referer( 'ajax-get-page-content', 'nonce' );

        $post_id = absint( $_POST['page_id'] );

        $post = get_post( $post_id );
        $content = apply_filters('the_content', $post->post_content); 

        wp_send_json_success( array( 'content' => $content ) );
    }
?>

JS

$(document).ready(function() {
    function load_page( e ) {
        e.preventDefault();

        var page = $( this ).data( 'page' );

        $.ajax({
            url: theme.ajaxurl,
            method: 'GET',
            data: {
                action: 'get_page_content',
                nonce: theme.nonce,
                page_id: page
            },
            success: function(response) {
                $('#contentarea').html(response.content);
            }
        });
    }

    $('a.menu_nav.demo4').on( 'click', load_page );
});