Membuat AJAX pada WordPress Admin Dashboard

Oke, jadi pada tutorial kali ini kita akan membuat sebuah ajax yang bisa digunakan untuk fungsi-fungsi tertentu. Contoh fungsi export data, atau fungsi update data tanpa harus merefresh halaman.

Download file code lengkap:

Oke langsung aja ke tutorialnya.

Membuat Halaman Admin

Pada kode ini kita akan membuat sebuah halaman admin menggunakan fungsi add_menu_page(). Kemudian kita isi sebuah konten berupa button yang berfungsi menampilkan email administrator.

// Buat contoh halaman admin
add_action('admin_menu', 'wp_testing_admin_ajax_page');
function wp_testing_admin_ajax_page() {
    add_menu_page('Admin AJAX', 'Admin AJAX', 'manage_options', 'admin-ajax', 'wp_testing_admin_ajax_content', 'dashicons-chart-pie', 2);
}

// Fungsi halaman
function wp_testing_admin_ajax_content() {
    global $hook_suffix;
?>

    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <hr>
        <p><strong>Hook Suffix:</strong> : <?php echo $hook_suffix; ?></p>
        <p>Ketika tombol di klik, maka akan melakukan request AJAX untuk mendapatkan info email administrator website.</p>
        <button id="info-email" class="button">Info Email Admin Website</button>
        <span class="spinner" style="float:none;"></span>
    </div>

<?php }

Jangan lupa gunakan global $hook_suffix untuk mendapatkan Hook Suffix dari halaman ini. Nantinya akan digunakan untuk menyisipkan javascript pada halaman admin.

Sisipkan Javascript pada halaman Admin

Nah kemudian kita akan menyisipkan javascript hanya pada halaman ini. Jadi kita gunakan action admin_footer-{$hook_suffix}.

Hook Suffix yang kita dapatkan tadi adalah toplevel_page_admin-ajax, sehingga add actionnya menjadi admin_footer-toplevel_page_admin-ajax

// Fungsi script javascript pada admin footer menggunakan hook suffix
add_action('admin_footer-toplevel_page_admin-ajax', 'wp_testing_admin_ajax_script');
function wp_testing_admin_ajax_script() { ?>
    <script>
        jQuery(document).on('click', '#info-email', function() {
            jQuery.ajax({
                url: ajaxurl, // secara otomatis menuju admin-ajax.php
                type: 'GET', // Ubah mau ajax GET/POST
                data: {
                    'action': 'wp_test_admin_ajax'
                },
                beforeSend: function() {
                    jQuery('.spinner').addClass('is-active');
                },
                complete: function() {
                    jQuery('.spinner').removeClass('is-active');
                },
                success: function(response) {
                    alert(response);
                    console.log(response);
                }
            });
        });
    </script>
<?php }

Buat sebuah javascript yang akan melakukan AJAX request ketika tombol di tekan. Jangan lupa sisipkan pada bagian data: {‘action’: ‘wp_test_admin_ajax’} supaya dapat diterima endpoint admin ajax yang akan kita buat nanti.

Buat endpoint Admin AJAX

Nah saat nya kita membuat sebuah endpoint sebagai tujuan dari request ajax.

Kita akan menggunakan action wp_ajax_{$action} yang dimana actionnya adalah nama action yang sudah didefiniskan dalam javascript.

Pada file javascript kita mendefinisikan action wp_test_admin_ajax sehingga add action nya menjadi wp_ajax_wp_test_admin_ajax, kemudian tambahkan fungsi untuk menampilkan admin email.

// Fungsi ajax pada admin
add_action('wp_ajax_wp_test_admin_ajax', 'wp_test_admin_ajax_response');
function wp_test_admin_ajax_response() {
    echo get_bloginfo('admin_email');
    wp_die();
}

Jangan lupa pada akhir fungsi selalu tambahkan wp_die();

Selamat mencoba 🙂