0

I am working on an arbor.js graph. What I want is to send member id query it from php return member tree json to again to jquery script. then print the tree.
here is HTML form

<form action="" method="post" id="blm_get_tree_view_meta_ajax_form" >           
    <?php echo $dropdown_html; ?>
    <input type="hidden" name="action" value="blm_member_tree_response">
    <input type="hidden" name="blm_mem_tree_meta_nonce" value="<?php echo $blm_add_meta_nonce ?>" />
    <input id="<?php echo $this->plugin_name; ?>-treeview_mem_id"  type="hidden" name="<?php echo "blm"; ?>[memid]" value="">
    <p class="submit"><input type="button" name="get_tree" id="get_tree" class="button button-primary" value="GET TREE"></p>
</form>

And this is the jquery script

<script>

jQuery( document ).ready( function( $ ) {
"use strict";
    
    $('#get_tree').on('click',function(){
        var user_id = $('#binary-level-marketting-treeview_mem_id').val();

        //console.log(user_id);
        $.ajax({
            type:'POST',
            url: params.ajaxurl,
            data:{action:'blm_member_tree_response', user_id:user_id},
            success:function(data){
                if(data.status == 'ok') {
                    console.log(data.nodes);
                    (function ($) {
                    var Renderer = function (canvas) {
                                var canvas = $(canvas).get(0);
                                var ctx = canvas.getContext("2d");
                                var particleSystem;
                                var that = {
                                    // arbor.js rendering goes here.
                                    
                                    //....
                                    //...
                                }         
                                    // and renderer
                                    $(document).ready(function () {
                            
                                        var data = {
                                            nodes: data.nodes,
                                            edges: data.edges
                                        }
                                        var sys = arbor.ParticleSystem(700, 700, 0.5);
                                        sys.parameters({ gravity:true});
                                        sys.renderer = Renderer("#viewport");
                                        sys.graft(data);
                            
                                    });
                    });
})(this.jQuery);

php response function as

public function getTreeGraphView() {
        
    if (isset($_POST['blm_mem_tree_meta_nonce']) && wp_verify_nonce($_POST['blm_mem_tree_meta_nonce'], 'blm_get_tree_view_meta_form_nonce'))
    {
        if(!empty($_POST['user_id'])){
            $data = array();
                    
            $mtree = new MemberTree();
            $mtree->getMemberTree($_POST['user_id']);
            $nodes_ = $mtree->getNode();
            $edges_ = $mtree->getEdge();
            $parent_ = $mtree->getParent();
                    
            $data['nodes'] = $nodes_;
            $data['edges'] = $edges_;
                
            echo $data;
            die( '0' );
                
        }
        wp_die();

    } else {
        wp_die(__('Invalid nonce specified', $this->plugin_name) , __('Error', $this->plugin_name) , array(
            'response' => 403,
            'back_link' => 'admin.php?page=' . $this->plugin_name.'-product',

        ));
    }
}

ajax action

$this->loader->add_action( 'admin_ajax_blm_member_tree_response', $plugin_admin, 'getTreeGraphView');

enqueue scripting and localization did as it is.

The process is 99% success but admin-aax.php returns 400 status code. with following response

and also 0 append to output. I pit wpdie() at end of the function

enter image description here

I cant solve the issue anymore. any expert here?

Improve this question
5
  • You called die twice, first is die( '0' ); and the second is wp_die(); these two functions have a similarity, output the message and terminate the script. You can remove die('0') and keep wp_die(); or you can replace wp_die() with exit;
    – Tommy Pradana
    Commented Oct 31, 2021 at 2:41
  • @TommyPradana Thanks for the quick response. I did both ways you explained but the issue remains the same. :(
    – Manoj Madushantha
    Commented Oct 31, 2021 at 3:10
  • The hook name should be wp_ajax_blm_member_tree_response and wp_ajax_nopriv_blm_member_tree_response for logged out users.
    – Jacob Peattie
    Commented Oct 31, 2021 at 4:38
  • @JacobPeattie Thank you for your response. noprive is not used because this is admin dashboard plugin. but I found a solution by your answer. I used hook as 'admin_ajax_blm_member_tree_response' . I change it to 'wp_ajax_nopriv_blm_member_tree_response'. now 400 gone. 403 arrives. this is the error {"nodes":"{1268:{'color':'red', 'shape':'dot', 'alpha':1'}}","edges":"}"}Invalid nonce specified
    – Manoj Madushantha
    Commented Oct 31, 2021 at 5:12
  • getting into it. The problem is I am not passing the nonce variable in the ajax calling function. add nonce variable --> $.ajax({ type:'POST', url: params.ajaxurl, data:{action:'blm_member_tree_response', user_id:user_id, blm_mem_tree_meta_nonce:<?php echo "'".$blm_add_meta_nonce_tree . "'"; ?> }, And php response function return $data. use json_encode($data). now response output is correnct. ajax code is 200. but not enter success function . need to work still. if any expert there
    – Manoj Madushantha
    Commented Oct 31, 2021 at 5:29

1 Answer 1

Reset to default
0

Change your die( '0' ); to exit; and its work for you.

Better way to return json in wordpress is wp_send_json( $data, 200 )

read more here: https://developer.wordpress.org/reference/functions/wp_send_json/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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