load ajax using admin-ajax.php

Question

The append result is 0, instead of a list with the title ass a link. If I check this locally (http://localhost/wordpress/wp-admin/admin-ajax.php?action=lateral_fluid), I get the titles ass a link. I don't know why I get the appended 0. What am I missing?

FUNCTIONS.PHP

// Your actual AJAX script
wp_enqueue_script('lateral-fluid', get_template_directory_uri().'/js/lateral-fluid-ajax.js', array('jquery'));

// This will localize the link for the ajax url to your 'my-script' js file (above). You can retreive it in 'lateral-fluid.js' with 'lateral-fluid.ajaxurl'
wp_localize_script( 'lateral-fluid', 'ajaxFluid', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

PHP FILE

add_action( 'wp_ajax_nopriv_lateral_fluid', 'my_lateral_fluid' );
add_action( 'wp_ajax_lateral_fluid', 'my_lateral_fluid' );

function my_lateral_fluid() {
    $args = array(
        "post_type" => "portfolio",
        "posts_per_page" => -1  
    );

    $posts_array = get_posts($args);

    echo '<nav role="navigation">';

    echo '<h2>Latest News</h2>';

    echo '<ul>';

    foreach ($posts_array as $post):
        setup_postdata($post);
        echo '<li><a class="' . esc_attr("side-section__link") . '" href="' . esc_attr(get_page_link($post->ID)) . '">' . $post->post_title . '</a>';
    endforeach;

    echo '</ul>';

    echo '</nav>';

        wp_die();
}

JS FILE

jQuery.ajax({
        type: 'get',
        url: ajaxFluid.ajaxurl,
        data: {
                action: 'my_lateral_fluid', // the PHP function to run
        },
        success: function(data, textStatus, XMLHttpRequest) {
                jQuery('#portfolio').html(''); // empty an element
                jQuery('#portfolio').append(data); // put our list of links into it

        },

        error: function(XMLHttpRequest, textStatus, errorThrown) {
                if(typeof console === "undefined") {
                        console = {
                                log: function() { },
                                debug: function() { },
                        };
                }
                if (XMLHttpRequest.status == 404) {
                        console.log('Element not found.');
                } else {
                        console.log('Error: ' + errorThrown);
                }
        }
});

Answer 1

The codex says here that The wp_ajax_ hook follows the format "wp_ajax_$youraction", where $youraction is your AJAX request's 'action' property.

I suppose in your js file you should go for:

data: {
            action: 'lateral_fluid', // the $action to run
      }

Answer 2

This was wrong:

Replace this:

add_action( 'wp_ajax_nopriv_lateral_fluid', 'my_lateral_fluid' );
add_action( 'wp_ajax_lateral_fluid', 'my_lateral_fluid' );

With this:

add_action( 'wp_ajax_nopriv_my_lateral_fluid', 'my_lateral_fluid' );
add_action( 'wp_ajax_my_lateral_fluid', 'my_lateral_fluid' );

Answer 3

The action parameter in data array is NOT the function to run, it's the action where you hook your function. So, basically changing

add_action( 'wp_ajax_nopriv_lateral_fluid', 'my_lateral_fluid' );
add_action( 'wp_ajax_lateral_fluid', 'my_lateral_fluid' );  

to

add_action( 'wp_ajax_nopriv_my_lateral_fluid', 'my_lateral_fluid' );
add_action( 'wp_ajax_my_lateral_fluid', 'my_lateral_fluid' );  

Will do the trick. NOTE the change in the hook names. For more information on how ajax works in WordPress please check https://codex.wordpress.org/AJAX_in_Plugins