0

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

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);
    }
);
  • ok. now in consol i am getting all the content from the file.can you help me instead of creating div in the same page.creating a new page? – Nisham Mahsin Jul 3 '14 at 6:06
  • can you pls elaborate ? – TBI Infotech Jul 3 '14 at 6:12
  • What i am doing now is creating a new div in the same page from where i am calling the function.can u pls tell me how to create a new page and create div in that page? – Nisham Mahsin Jul 3 '14 at 6:15
1

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){}
})
  • actually i am rendering in admin side. as u said ahve created new file chart.php then wrote my function and add_action() – Nisham Mahsin Jul 3 '14 at 6:35
  • then in ajax url:chart.php ... this is what u meant? – Nisham Mahsin Jul 3 '14 at 6:35
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.