I'm getting the following XML response back from a Wordpress AJAX request and having trouble extracting the data. I think it's because it's being parsed as CDATA, but I can't see why.
<?xml version="1.0" encoding="UTF-8"?>
<wp_ajax>
<response action="mz_mindbody_ajax_add_to_class_0">
<object id="0" position="1">
<response_data><![CDATA[error]]></response_data>
<supplemental>
<classID><![CDATA[2237]]></classID>
<message><![CDATA[Error in add to class (2237)]]></message>
</supplemental>
</object>
</response>
</wp_ajax>
This is the php to handle the AJAX call:
<script type='text/javascript'>
/* <![CDATA[ */
var my_parameters = {"ajaxurl":"http:\/\/localhost:8888\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<?php
// Ajax Handler
add_action( 'wp_ajax_my_ajax_handler', 'my_ajax_handler' );
function my_ajax_handler() {
// Get the Post ID from the URL
$classID = $_REQUEST['classID'];
// Instantiate WP_Ajax_Response
$response = new WP_Ajax_Response;
if( wp_verify_nonce( $_REQUEST['nonce'], 'nonce-name' . $classID )){
//Do something here
$response->add( array(
'data' => 'success',
'supplemental' => array(
'classID' => 'did it',
'message' => 'Class ID goes here', // ideally want to show $classID
),
) );
} else {
// Build the response if an error occurred
$response->add( array(
'data' => 'error',
'supplemental' => array(
'classID' => 'nothing to see here',
'message' => 'Error in add to class',
),
) );
}
// Whatever the outcome, send the Response back
$response->send();
// Always exit when doing Ajax
exit();
}
//End Ajax
This is the jQuery code:
(function($){
$(document).ready(function($) {
$( '.my_class' ).click( function( e ) {
var link = this;
var id = $( link ).attr( 'data-id' );
var nonce = $( link ).attr( 'data-nonce' );
// This is what we are sending the server
var data = {
action: 'my_function',
classID: id,
nonce: nonce
}
// Change text of link
$( link ).text( 'DOING IT' );
// Post to the server
$.post( my_parameters.ajaxurl, data, function( data ) {
// Parse the XML response with jQuery
// Get the Status
console.log(data); //the XML data posted above
var status = $( data ).find( 'response_data' ).text();
// Get the Message
var message = $( data ).find( 'supplemental message' ).text();
// If we are successful, add the success message and remove the link
console.log(status); // empty string
if( status == 'success' ) {
$( link ).parent().after( '<p><strong>' + message + '</strong></p>').remove();
} else {
// An error occurred, alert an error message
alert( message );
}
});
// Prevent the default behavior for the link
e.preventDefault();
});
});
})(jQuery);
In the tutorial I'm following the $response->add() calls are within a function. Is the fact that mine aren't what's causing the problem here?
Wait - I have misrepresented the data "object", which may be part of (or all of) the problem. The entire data "object" is actually a string, which in the console looks like:
<script type='text/javascript'>
/* <![CDATA[ */
var mz_mbo_params = {"ajaxurl":"http:\/\/localhost:8888\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<?xml version='1.0' encoding='UTF-8' standalone='yes'?><wp_ajax><response action='mz_mindbody_ajax_add_to_class_0'><object id='0' position='1'><response_data><![CDATA[error]]></response_data><supplemental><classID><![CDATA[nothing to see here]]></classID><message><![CDATA[Error in add to class]]></message></supplemental></object></response></wp_ajax>
Update
Given response data string ; Note, not certain about quotations of actual raw string returned at data
var data = "<script type='text/javascript'>/* <![CDATA[ */var mz_mbo_params = {\"ajaxurl\":\"http:\/\/localhost:8888\/wp-admin\/admin-ajax.php\"};/* ]]> */</script><?xml version='1.0' encoding='UTF-8' standalone='yes'?><wp_ajax><response action='mz_mindbody_ajax_add_to_class_0'><object id='0' position='1'><response_data><![CDATA[error]]></response_data><supplemental<classID><![CDATA[nothing to see here]]></classID><message><![CDATA[Error in add to class]]></message></supplemental></object></response></wp_ajax>";
try utilizing jQuery.parseHTML()
var xml = $.parseHTML(data, document, false)[1]; // remove `script` element
// do stuff
$(xml).find("message");
Try utilizing $.parseXML() with data argument , calling jQuery() with documentElement of parsed xml document argument
// response `data` from `$.post()` callback
var xmlDocument = $.parseXML(data);
// `documentElememt` `<wp_ajax></wp_ajax>` of response `xml` `data`
var xml = $(xmlDocument.documentElement);
var status = xml.find("response_data").text();
var message = xml.find("supplemental message").text();
console.log(status); // empty string
if ( status == "success" ) {
$( link )
.parent()
.after("<p><strong>" + message + "</strong></p>").remove();
} else {
// An error occurred, alert an error message
alert( message );
}
var data = '<wp_ajax><response action="mz_mindbody_ajax_add_to_class_0"><object id="0" position="1"><response_data><![CDATA[error]]></response_data><supplemental><classID><![CDATA[2237]]></classID><message><![CDATA[Error in add to class (2237)]]></message></supplemental></object></response></wp_ajax>'
var xmlDocument = $.parseXML(data);
var xml = $(xmlDocument.documentElement);
var status = xml.find("response_data").text();
var message = xml.find("supplemental message").text();
console.log(status); // empty string
if ( status == "success" ) {
$( link )
.parent()
.after("<p><strong>" + message + "</strong></p>").remove();
} else {
// An error occurred, alert an error message
alert( message );
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></div>
This is a problem you've got with your wordpress configuration. Fix the configuration that results in pre-pending XML-RPC responses with the ajax script tag. It breaks the response.
Most likely you've registered that on some hook that is too generic or your hooked function doesn't filter out AJAX calls.