0

I am developing a plugin that fetches data by ajax and shows data into a table.

This is my plugin code:

<?php
/*
Plugin Name: Issue Shower
Version: 1.0
*/
add_action('widgets_init', 'klissue_register');
function klissue_register() {
    register_widget('klissue');
}

class klissue extends WP_Widget {
    function __construct() {
        $widget_ops = array(
            'classname' => 'klissue_widget_class',
            'description' => 'Example'
        );

        parent::__construct('klissue', __( 'Issue Widget','issue-plugin'), $widget_ops);
    }

    function form($instance) {
        echo "Come from function form";
    }
    function update($new_instance, $old_instance) {
        return $new_instance;
    }

    function widget($args, $instance) {
        extract($args);
        echo $before_widget;
        ?>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
                function foo() {
                    var $jq = jQuery.noConflict();
                    var table = document.getElementById("issue_table");
                    var label = document.getElementById("table_status");
                    $jq.get("wp-json.php", function (response, status, xhr) {
                        if (status != "success") {
                            label.innerText = "data fetch failed";
                            return;
                        }
                        $jq.each(response, function (k, v) {
                            table.innerHTML += "<tr><td>" + v.id + "</td><td>" + v.code + "</td><td>" + v.pre + "</td><td>" + v.mid + "</td><td>" + v.post + "</td></tr>";
                        });
                        label.innerText = "new issue";
                    });
                }
                var $jq = jQuery.noConflict();
                $jq(document).ready(foo);
        </script>
        <style>
            #issue_table_div{
                width: min-content;
                height: 6cm;
                overflow-y: scroll;
            }
        </style>
        <div id="issue_shower">
            <div id="issue_table_div">
                <table id="issue_table"></table>
            </div>
            <label id="table_status">Test Label</label>
        </div>
        <?php
        echo $after_widget;
    }


}

This plugin works fine in home page of wordpress. However, if I visit any post, my plugin doesn't work. Only element table is rendered to page, but JS code doesn't run. Am I missing any difference between home page and post page?

Could anyone help me? Thank you very much!

  • 1
    My guess would be that $jq.get("wp-json.php") is messing with you. Is the right URL being requested when you check the network tab? – RRikesh Jul 13 '16 at 9:17
  • @RRikesh Your guess is right. I change ajax code to $jq.get("/wp-json.php") and plugin works in post page. The reason should be that home page and post page have different current directory and request from post page get 404 error. Thank you for your tip! – KyL Jul 13 '16 at 9:28
0

I think ajax request should point to the actual WordPress ajax handler.

You can pass the variable by localising the script:

$js_object = [
    'ajaxUrl'   => admin_url('admin-ajax.php')
];
wp_register_script('my-script', 'http://url');
wp_localize_script('my-script', 'pluginObject', $js_object);
wp_enqueue_script('my-script');

Register the ajax request into ajax hook:

function widget_ajax_request()
{
    // your stuff
}

add_action('wp_ajax_my_action', 'widget_ajax_request');
add_action('wp_ajax_nopriv_my_action', 'widget_ajax_request');

And your JS should be:

$jq.ajax({
    url: pluginObject.ajaxUrl, //from the localized object
    data: {
        action: 'my_action' //from the hook
    },
    success: function() {
        // your stuff
    }
})

Here is a tutorial: https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/

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.