Creating a new div onclick wordpress+ajax

Question

I have a link in worpress page

<a onclick="show_trend()" >Trend</a>

and i am calling an ajax function onclick.

function show_trend() {

    // This does the ajax request
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'render_admin_charts_page',

        },
        success:function(data) {
            // This outputs the result of the ajax request
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });
}

what i want to do when calling this function is display a div section .for that ,this is my function

function render_admin_charts_page() {
    ?>
    <div class="wrap">
        <div class="em-bookings-events">
            <h2><?php esc_html_e('Event Booking Report','dbem'); ?></h2>        
            <?php em_bookings_events_table(); ?>

        </div>
    </div>
    <?php
}

ajax function is calling but not rendering to div

Answer 1

To add action for Wordpress AJAX

If you needed to create an AJAX handler for an "render_admin_charts_page" request, you would create a hook like this:

add_action( 'wp_ajax_render_admin_charts_page', 'yourfunction' );

function yourfunction() { ?>
    <div class="wrap">
        <div class="em-bookings-events">
            <h2><?php esc_html_e('Event Booking Report','dbem'); ?></h2>        
            <?php em_bookings_events_table(); ?>
        </div>
    </div>
<?php   // Handle request then generate response using WP_Ajax_Response
}

Using the above example, any time an AJAX request is sent to WordPress, and the request's 'action' property is set to 'render_admin_charts_page', this hook will be automatically executed. For example, the following code would execute the above hook:

jQuery.post(
    ajaxurl, 
    {
        'action': 'render_admin_charts_page',              
    }, 
    function(response){
        alert('The server responded: ' + response);
    }
);

Answer 2

Basically you want to declare this function, add_action( 'wp_ajax_render_admin_charts_page', 'yourfunction' );, in another file?

If yes, then you can place this piece of code in functions.php of your active theme:

add_action( 'wp_ajax_render_admin_charts_page', 'yourfunction' );

function yourfunction() { ?>
    <div class="wrap">
        <div class="em-bookings-events">
            <h2><?php esc_html_e('Event Booking Report','dbem'); ?></h2>        
            <?php em_bookings_events_table(); ?>
        </div>
    </div>
<?php   // Handle request then generate response using WP_Ajax_Response
}

If you want to place it in another PHP file, for that you don't need to create a hook for AJAX. Just place your code in a PHP file and place it in your active theme, and use the below code for AJAX:

jQuery.ajax({
    url: fav_url ,  // path of that file 
    type: 'GET',        
    timeout: 20000,
    error: function(){
        alert("Error loading user's attending event.");
    },
    success: function(html){}
})

Answer 3

Hey I am doing same thing but instead of using wp_ajax_render I am using wp ajax nopriv function and it is working for me.