How do I properly refresh data on Wordpress using AJAX

Question

I am trying to refresh a widget on my Dashboard in Wordpress.

My plugin was written in PHP, but I am trying to add Jquery/AJAX to refresh each widget when some changes have been made.

The function in PHP will download and store the file, and then will display the information into the widget.

The issue I have is this: The files are successfully downloaded and stored. But the new information does not show. It stays the same. I believe it might be simple but I've been trying to get this to work for a while with no success.

Here is a sample of my code:

<?php

add_action( 'admin_footer', 'my_action_javascript' ); // Write our JS below here


function my_action_javascript() { ?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

    var data = {
        'action': 'refresh_function',
    };


            setInterval(function() {
    $.get(ajaxurl, data, function (result) {

    });

            },20000);

});
</script> <?php
}

add_action('wp_ajax_refresh_function', 'display_function');

PHP function:

function display_function()
{


$conn_id = ftp_connect($ftp_server);

$login_result = ftp_login($conn_id, $ftp_user_name, $ftp_user_pass);

if (ftp_get($conn_id, $local_file, $server_file, FTP_BINARY)) {


ftp_close($conn_id);

$path = __DIR__."/XML/File.xml";  
$channel = simplexml_load_file($path);   


echo "<div style='overflow:auto; height:400px;'>";


    foreach ($channel->channel->item as $item)  
    {            

        echo "<div class='xppArticle'>";
        echo "<h2>" . $item->title . "</h2>";                

        echo "<p>". set_paragraph_length_display($item->description, 250) . "(...)" . "</p>";



            global $wpdb;  
            $query = $wpdb->prepare('SELECT ID FROM ' . $wpdb->posts . ' WHERE post_title = %s', $item->title); 
            $cID = $wpdb->get_var($query);   

            echo "<hr />";
        echo "</div>";
    }
echo "</div>";    
}

My understand was that my AJAX would call the function and it would work as it normally would. I guess I am wrong because nothing new is being displayed on the screen once I download a new file using AJAX.

Thanks!

Answer 1

Your ajax callback function is empty. Select the element you want to put your ajax output into and then set its innerhtml to be that code.

$.get(ajaxurl, data, function (result) {
    $( '#my-dashboard-widget-content-element' ).html( result );
});

Make sure you have the appropriate action set, like in the other answer:

add_action('wp_ajax_refresh_function', 'display_function' );
add_action('wp_ajax_nopriv_refresh_function', 'display_function' );

Also, you should use nonces to verify its an authorized ajax request. In the end of your php function, dont forget to die();

For a comprehensive overview, check http://codex.wordpress.org/AJAX_in_Plugins

Answer 2

Okay, first off, set your script up remotely. Here's a demo from one I did:

function ajaxurl(){
    wp_enqueue_script('product-selector', get_template_directory_uri().'/js/ajax.js', array('jquery')); // Remotely place script in /js/ folder in my theme.
    wp_localize_script('product-selector', 'MyAjax', array(
        // URL to wp-admin/admin-ajax.php to process the request
        'ajaxurl' => admin_url('admin-ajax.php'),
        )
    );
}

add_action('wp_head', 'ajaxurl');

Next you need to make sure you enqueue no-priv as well as admin:

add_action('wp_ajax_nopriv_ajax_callback', 'ajax_callback');
add_action('wp_ajax_ajax_callback', 'ajax_callback');

In my script "ajax_callback" is the php function I run. So you'll need to adjust accordingly.

Also, in your js, you'll need to make that ajaxUrl look like:

MyAjax.ajaxurl

If you use my code directly without tweaking.

AJAX on WordPress is a little difficult to get started, but once you get it rolling, it makes sense. Use developer tools and switch to 'console' option on Chrome to debug and see what info, if any, you're getting back.