How can I write hook that receives AJAX call from button click?
-
I have written a WordPress plugin which places several buttons inside a metabox on the post-edit page. To see the page where this is done, I’d go to example.com/wp-admin/post.php?post=number1&action=edit When one of the buttons is clicked, I want to use php code to send data to a remote server that requires a password; however, I understand PHP cannot listen for click events. How might I go about doing this? I will be making an Ajax request and sending data thru a proxy.
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',<code>title box</code>); newDat.setAttribute('placeholder',<code>Test Data</code>); 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: add_action( 'admin_footer', 'my_action_javascript' ); <script type="text/javascript" > jQuery(document).ready(function($) { var data = { 'action': 'MytestAjax', }; jQuery.post(ajaxurl, data, function(response) { alert('Got this from the server: ' + response); }); }); </script> <?php } add_action( 'wp_ajax_my_action', 'MytestAjax' ); function MytestAjax() { header('Content-type: application/json'); $url = 'https://subdomain.example.com:port/api/v1/whereIWantItToGo'; //I'm not sure how to authenticate into the above site from here if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) { echo json_encode(array('success' => 1)); } else { echo json_encode(array('success' => 0)); } $handle = fopen($url, "r"); if ($handle) { while (!feof($handle)) { $buffer = fgets($handle, 4096); echo $buffer; } fclose($handle); wp_die(); } }
Once a person hits the submit button, then I need it to go to do ajax and php.
- The topic ‘How can I write hook that receives AJAX call from button click?’ is closed to new replies.