Ajax +wordpress onClick link redirect to new page and create html content

Question

i have two pages in my wordpress plugin

• index.php
• charts.php

in index.php i have some content and some link..

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

while clicking this link ,i have an ajax function to create content in charts.php(i dont know if it is correct way)

function show_trend() {
 var data ="action=render_admin_charts_page";
   jQuery.ajax({
                    type: "POST",
                    url: "../wp-admin/admin-ajax.php",
                    data: data,
                    dataType: 'json',
                    success: function(data) {

                      alert(data);
                     //here i want to create html content

                    }
                });

}

andfollowing is my php function and hook

function render_admin_charts_page() {
    ?>
    <div class="wrap">
        <div class="chart">

        </div>
    </div>
    <?php
     die();
}
add_action( 'wp_ajax_render_admin_charts_page', 'render_admin_charts_page' );

now i am getting 0 as alert .

Answer 1

I see two things. You're missing an action call - you need

add_action( 'wp_ajax_render_admin_charts_page', 'render_admin_charts_page' );
add_action('wp_ajax_nopriv_render_admin_charts_page', 'render_admin_charts_page');

Plus, from looking at your render_admin_charts_page() you need to change your json dataType to html. Your charts function is outputting html so all you need to do is output it; your alert() should contain all the html from your function.

One more thing, if this is still a live question, why die() in your render_admin_charts_page() function? That function prints a message so that could also be messing with your returned value.

Answer 2

As ungestaltbar said, the variable "data" should contain an object, not a string.

function show_trend() {
   var data = {
       action: "render_admin_charts_page"
   }
   jQuery.ajax({
                    type: "POST",
                    url: "../wp-admin/admin-ajax.php",
                    data: data,
                    dataType: 'json',
                    success: function(data) {

                      alert(data);
                     //here i want to create html content

                    }
                });

}

That should do it.