0

I have written a Wordpress plugin which places several buttons inside a metabox on the post-edit page. I'd go to example.com/wp-admin/post.php?post=number1&action=edit. I want my Wordpress hook to receive an AJAX call, and in turn makes a request to a remote server (one which requires authentication that the WP user shouldn't have to enter), then returns the result to the Wordpress user.

My code for the form with the data I want to send is two custom HTML elements' entered data. They are:

class MyFormData extends HTMLElement{
    
    constructor() {
      super();      
    }

    connectedCallback(){
      const li = document.createElement('li');

      const newDat = document.createElement('input');
      newDat.setAttribute('type','text');
      newDat.setAttribute('name',`title box`);
      newDat.setAttribute('placeholder',`Test Data`);

      const deleteButton = document.createElement('button');
      deleteButton.setAttribute('type','button');
      deleteButton.innerHTML = "-";
      deleteButton.addEventListener("click",function(){
        li.parentNode.remove();
      });

      li.appendChild(newDat);
      li.appendChild(deleteButton);

      this.appendChild(li);
    }
  }
customElements.define('form-data',MyFormData);

and

class DurationMenu extends HTMLElement{
    
    constructor(){
        super();
    }

    connectedCallback(){
        const amount = document.createElement('input');
        amount.setAttribute('id','selectedTime');
        amount.setAttribute('type','number');
        amount.setAttribute('step',5)
        amount.setAttribute('name','duration');
        amount.setAttribute('min',5);
        amount.setAttribute('max',60);
        amount.setAttribute('value',15);
        this.appendChild(amount)
    }


}
customElements.define('duration-choice', DurationMenu);

Both of these custom elements show up in the metabox. I have a custom element for the submit button:

import ModelObject from './model/modelobject.js'

var theJson;
var data;

import {CO} from './Controller/controllerobject.js';

export var c = new ModelObject();
import {grabDataForSending} from './Controller/wordpressrelay.js';

export class SubmitAndCreate extends HTMLElement{
    
    constructor(){
        super();            
    }

    connectedCallback(){
        var data;
        const submitbutton = document.createElement('button');
        submitbutton.setAttribute('type','submit');
        submitbutton.setAttribute('id','submitButton');
        submitbutton.innerHTML = "Begin ";

        submitbutton.addEventListener('click',this.myFunc.bind(this));

        submitbutton.addEventListener('click',()=>{
            document.getElementById('selectedTime').value = 15;
            var dataset = document.getElementById("dataset").children;
            for(var i = 0; i < dataset.length; i++){
                document.getElementById("dataset").children[i].children[0].childNodes[0].value = '';    
            }

        });
        submitbutton.addEventListener('click',(event)=>{
            CO.updateModelData();
            event.preventDefault();
        })

        submitbutton.addEventListener('click',(event)=>{
            grabExperimentForSending();
        })


        this.appendChild(submitbutton);
    }

    gatherData(){
        
        //var enteredURL = document.getElementsByName('URL box')[0].value;
        var dataAmount = document.getElementById('dataset').children.length;
        var experTime = document.getElementById('selectedTime').value;

        var dataObject = {
            experimentDuration : experTime,
            myData: {}
        }

        var individualDatum = [];

        for (var i = 0; i < dataAmount; i++){
            individualDatum[i] = {
                dataset: document.getElementById("dataset").children[i].children[0].childNodes[0].value
            }
        }

        dataObject.myData = individualDatum;
        var dataObjectJSON = JSON.stringify(dataObject,null,2);
        theJson = dataObjectJSON;

        

        return theJson;
    }

}
export {theJson, CO};
customElements.define('submit-button', SubmitAndCreate)

I want to grab the data one enters in both, and submit it to an external site that normally requires a password and username to login to from outside Wordpress. I want to submit it as JSon. How can I do this with Ajax and php?

My php so far is:

//for admin-ajax
    add_action( 'admin_enqueue_scripts', 'my_enqueue' );
    function my_enqueue($hook) {
        if( 'index.php' != $hook ) {
            return;
        }
            
        wp_enqueue_script( 'ajax-script', plugins_url( '/wp-content/plugins/my-plugin/js/Controller/ajaxdata.js', __FILE__ ), array('jquery') );
        wp_localize_script( 'ajax-script', 'ajax_object',
                array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'c' => c ) ); //c has the data that I need to send to the remote site's server
    }


    //relevant to admin-ajax
    add_action( 'wp_ajax_CBAjax', 'CBAjax' ); 
    
    //relevant to admin-ajax
    function CBAjax() {

        error_log(print_r($_REQUEST));
         
         if ( isset($_REQUEST) ) {

             $exper = $_REQUEST['experdata'];

             error_log(print_r($exper,true));

             
             echo "The exper is " . $exper;

         }

         
         $body = array(
             'dur'    => $exper['experimentDuration'],
             'buckets'=> $experdata['myData']
         );


         $response = wp_remote_post( $url = "https://subdomain.example.com:8080/api/v1/data", array(
             'body'    => $body,
             'headers' => array(
                 'Authorization' => 'Basic ' . base64_encode( "login@example.com" . ':' . "password!" ),
             ),
         ) );

         if($response){
            error_log(print_r($response,true));
            error_log("PING");

         }

         $respcode = wp_remote_retrieve_response_code($response);
         error_log(print_r($respcode,true));
         $ajax['remote_code'] = $response['response']['code'];
         echo json_encode( $ajax );
         error_log(print_r($ajax,true));

        wp_die();

        }

in the creation of the metabox, I have:

add_action( 'admin_enqueue_scripts', 'my_enqueue' ); add_action( 'wp_ajax_CBAjax', 'CBAjax' );

This is how I proxy the data from the button to the admin-ajax.php page:

import {c} from '../submitbutton.js';


function grabExperimentForSending(){
    

    $.ajax({
           url: "admin-ajax.php",
           type: "POST",
           data: c ,
           success: function (response, statusCode) {
                console.log(c.exps[0]);
                console.log(`statusCode is ${statusCode}`);
                console.log(`data is ${data}`);
           },
           error: function(jqXHR, textStatus, errorThrown) {
              console.log(`jqXHR is ${jqXHR}, textStatus is ${textStatus}, errorThrown is ${errorThrown}`);
              console.log(c.exps[0]);
           }
       });
}

and from there, it goes to ajaxdata.js

import {c} from './wordpressrelay.js';

function my_action_javascript(){
    
    $('#submitButton').click( function(){
    var data = { //model
        'action': 'CBAjax',

        'experdata': ajax_object.c
    }



    jQuery.post(ajax_object.ajax_url, data, function(response) { 
        console.log('Got this from the server: ' + response);
        console.log(data.experdata);
        console.log(`data[experdata] is ${data['experdata']}`);
    });
});

}

export {my_action_javascript,c};

export {grabExperimentForSending,c};

I want to send that data, exp (a Json) to the remote site. Right now, I get only 'bad request' and the response was 0. I'm not getting either javascript from communicating with the remote server or error logs from the php either

0

In your PHP to call the remote server you may want to look at the http and API functions availalble in Wordpress here: https://developer.wordpress.org/plugins/http-api/

For example, here's a much easier way to get data from a remote server:

$response = wp_remote_get( 'https://api.github.com/users/blobaugh' );
$http_code = wp_remote_retrieve_response_code( $response );

And here's a way to post like you were submitting a form:

$body = array(
    'sendThisValue'    => 'value',
);

$args = array(
    'body'        => $body,
// see docs for rest of parameters here
);

$response = wp_remote_post( 'http://your-contact-form.com', $args );
| improve this answer | |
  • so what will my hook's callback function look like? Also, how do I get the remote site's password in there? Thanks so much! – AviG Jun 16 at 0:20
  • @AviG It depends exactly what you're trying to do. Maybe read the docs as linked and try those things and post where you're stuck – mozboz Jun 16 at 7:55
  • I have very little experience in php and wordpress. Please help me in producing what the code would look like. Then I can look at the documentation and it actually mean something. Thank you. – AviG Jun 16 at 13:05
  • can you please help me? Thank you – AviG Jun 17 at 16:59
  • I've updated my code to show my php but IDK if it's sending any data to the server – AviG Jun 19 at 7:53

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.