XMLHttpRequest is not working in the WordPress
up vote
6
down vote
favorite
I'm trying to send a variable to the server, using XMLHttpRequest.
I tested it on local on a non-Wordpress file and it works. But on production, on my Wordpress file, the onreadystatechange AJAX status doesn't get to 200.
Is there anything I need to be aware when XMLHttpRequesting in Wordpress?
I have the following code for sending data to the server using XMLHTTP Request but it's not working I don't know why? I'm getting the following error:
VM704:1 POST http://localhost/amt/wp-admin/admin-ajax.php 400 (Bad Request)
here is my WordPress code:
add_action('wp_ajax_csv_file', 'csv_file');
add_action('wp_ajax_nopriv_csv_file', 'csv_file');
function csv_file()
{
if($_POST['rtype'] == 'enr_data'){
set_time_limit(0);
ob_implicit_flush(true);
ob_end_flush();
for ($i = 0; $i < 10; $i++) {
//Hard work!!
sleep(1);
$p = ($i + 1) * 10; //Progress
$response = array('message' => $p . '% complete. server time: ' . date("h:i:s", time()),
'progress' => $p);
echo json_encode($response);
}
sleep(1);
$response = array('message' => 'Complete',
'progress' => 100);
echo json_encode($response);
die();
}
}
function ajax_stream() {
if (!window.XMLHttpRequest) {
alert("Your browser does not support the native XMLHttpRequest object.");
return;
}
try {
var xhr = new XMLHttpRequest();
xhr.previous_text = '';
xhr.responseType = "text";
xhr.onerror = function() {
alert("[XHR] Fatal Error.");
};
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
alert('[XHR] Done')
} else if (xhr.readyState > 2) {
var new_response = xhr.responseText.substring(xhr.previous_text.length);
var result = JSON.parse(new_response);
document.getElementById("divProgress").innerHTML += result.message + '<br />';
document.getElementById('progressor').style.width = result.progress + "%";
xhr.previous_text = xhr.responseText;
}
} catch (e) {
alert("[XHR STATECHANGE] Exception: " + e);
}
};
var data = "action=csv_file&rtype=enr_data";
xhr.open("POST", ajaxurl, true);
xhr.send(data);
console.log(xhr);
} catch (e) {
alert("[XHR REQUEST] Exception: " + e);
}
}#divProgress {
border: 2px solid #ddd;
padding: 10px;
width: 300px;
height: 265px;
margin-top: 10px;
overflow: auto;
background: #f5f5f5;
}
#progress_wrapper {
border: 2px solid #ddd;
width: 321px;
height: 20px;
overflow: auto;
background: #f5f5f5;
margin-top: 10px;
}
#progressor {
background: #07c;
width: 0%;
height: 100%;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.demo_container {
width: 680px;
margin: 0 auto;
padding: 30px;
background: #FFF;
margin-top: 50px;
}
.my-btn,
.my-btn2 {
width: 297px;
margin-top: 22px;
float: none;
display: block;
}
h1 {
font-size: 22px;
margin-bottom: 20px;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.demo_container::after {
content: "";
clear: both;
display: block;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn {
display: inline-block;
text-decoration: none;
border: 2px solid #3b8dbd;
line-height: 15px;
color: #3b8dbd;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
font-size: 15px;
padding: .6em 1.5em;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background: #ffffff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
zoom: 1;
-webkit-backface-visibility: hidden;
position: relative;
margin-right: 10px;
}
.ghost-btn:hover {
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
background-color: #3b8dbd;
color: #ffffff;
}
.ghost-btn:focus {
outline: none;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn.active:hover {
border: 2px solid #D23725;
background: #FFF;
}
.method_wrappers {
margin-bottom: 20px;
}<div class="demo_container">
<div class='method_wrappers'>
<a class='ghost-btn active' href='#'>XHR Method</a>
<a class='ghost-btn' href='../example2/index.html'>Iframe Method</a>
</div>
<h1>AJAX progress bar for PHP script without polling (XHR method)</h1>
<div class='float_left'>
<h3>Progress Bar</h3>
<div id='progress_wrapper'>
<div id="progressor"></div>
</div>
<a onclick="ajax_stream();" class='my-btn'>Start Ajax Streaming</a>
</div>
<div class='float_right'>
<h3>Log</h3>
<div id="divProgress"></div>
</div>
</div>javascript wordpress xmlhttprequest
asked Nov 12 at 10:46
Khalil DaNish
4249
add a comment |
up vote
6
down vote
favorite
I'm trying to send a variable to the server, using XMLHttpRequest.
I tested it on local on a non-Wordpress file and it works. But on production, on my Wordpress file, the onreadystatechange AJAX status doesn't get to 200.
Is there anything I need to be aware when XMLHttpRequesting in Wordpress?
I have the following code for sending data to the server using XMLHTTP Request but it's not working I don't know why? I'm getting the following error:
VM704:1 POST http://localhost/amt/wp-admin/admin-ajax.php 400 (Bad Request)
here is my WordPress code:
add_action('wp_ajax_csv_file', 'csv_file');
add_action('wp_ajax_nopriv_csv_file', 'csv_file');
function csv_file()
{
if($_POST['rtype'] == 'enr_data'){
set_time_limit(0);
ob_implicit_flush(true);
ob_end_flush();
for ($i = 0; $i < 10; $i++) {
//Hard work!!
sleep(1);
$p = ($i + 1) * 10; //Progress
$response = array('message' => $p . '% complete. server time: ' . date("h:i:s", time()),
'progress' => $p);
echo json_encode($response);
}
sleep(1);
$response = array('message' => 'Complete',
'progress' => 100);
echo json_encode($response);
die();
}
}
function ajax_stream() {
if (!window.XMLHttpRequest) {
alert("Your browser does not support the native XMLHttpRequest object.");
return;
}
try {
var xhr = new XMLHttpRequest();
xhr.previous_text = '';
xhr.responseType = "text";
xhr.onerror = function() {
alert("[XHR] Fatal Error.");
};
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
alert('[XHR] Done')
} else if (xhr.readyState > 2) {
var new_response = xhr.responseText.substring(xhr.previous_text.length);
var result = JSON.parse(new_response);
document.getElementById("divProgress").innerHTML += result.message + '<br />';
document.getElementById('progressor').style.width = result.progress + "%";
xhr.previous_text = xhr.responseText;
}
} catch (e) {
alert("[XHR STATECHANGE] Exception: " + e);
}
};
var data = "action=csv_file&rtype=enr_data";
xhr.open("POST", ajaxurl, true);
xhr.send(data);
console.log(xhr);
} catch (e) {
alert("[XHR REQUEST] Exception: " + e);
}
}#divProgress {
border: 2px solid #ddd;
padding: 10px;
width: 300px;
height: 265px;
margin-top: 10px;
overflow: auto;
background: #f5f5f5;
}
#progress_wrapper {
border: 2px solid #ddd;
width: 321px;
height: 20px;
overflow: auto;
background: #f5f5f5;
margin-top: 10px;
}
#progressor {
background: #07c;
width: 0%;
height: 100%;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.demo_container {
width: 680px;
margin: 0 auto;
padding: 30px;
background: #FFF;
margin-top: 50px;
}
.my-btn,
.my-btn2 {
width: 297px;
margin-top: 22px;
float: none;
display: block;
}
h1 {
font-size: 22px;
margin-bottom: 20px;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.demo_container::after {
content: "";
clear: both;
display: block;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn {
display: inline-block;
text-decoration: none;
border: 2px solid #3b8dbd;
line-height: 15px;
color: #3b8dbd;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
font-size: 15px;
padding: .6em 1.5em;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background: #ffffff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
zoom: 1;
-webkit-backface-visibility: hidden;
position: relative;
margin-right: 10px;
}
.ghost-btn:hover {
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
background-color: #3b8dbd;
color: #ffffff;
}
.ghost-btn:focus {
outline: none;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn.active:hover {
border: 2px solid #D23725;
background: #FFF;
}
.method_wrappers {
margin-bottom: 20px;
}<div class="demo_container">
<div class='method_wrappers'>
<a class='ghost-btn active' href='#'>XHR Method</a>
<a class='ghost-btn' href='../example2/index.html'>Iframe Method</a>
</div>
<h1>AJAX progress bar for PHP script without polling (XHR method)</h1>
<div class='float_left'>
<h3>Progress Bar</h3>
<div id='progress_wrapper'>
<div id="progressor"></div>
</div>
<a onclick="ajax_stream();" class='my-btn'>Start Ajax Streaming</a>
</div>
<div class='float_right'>
<h3>Log</h3>
<div id="divProgress"></div>
</div>
</div>javascript wordpress xmlhttprequest
asked Nov 12 at 10:46
Khalil DaNish
4249
1
Did you declare the ajaxurl var properly?? I don't see it declared in your code
– Rafsun Chowdhury
Nov 12 at 10:59
Did you try to run it after clearing your cache?
– Naser Nikzad
Nov 12 at 10:59
@Rafsun Chowdhury, Yes it's correct did you see the Error text added above. that's the url: localhost/amt/wp-admin/admin-ajax.php
– Khalil DaNish
Nov 12 at 11:06
It's hard for me to understand the goal here. At the very least I can say you should be validating each request with anoncewithin the PHP.
– GFargo
Nov 17 at 3:15
@GFargo I just has 400 error this means the request is not sent to the server side.
– Khalil DaNish
Nov 17 at 4:58
add a comment |
up vote
6
down vote
favorite
up vote
6
down vote
favorite
I'm trying to send a variable to the server, using XMLHttpRequest.
I tested it on local on a non-Wordpress file and it works. But on production, on my Wordpress file, the onreadystatechange AJAX status doesn't get to 200.
Is there anything I need to be aware when XMLHttpRequesting in Wordpress?
I have the following code for sending data to the server using XMLHTTP Request but it's not working I don't know why? I'm getting the following error:
VM704:1 POST http://localhost/amt/wp-admin/admin-ajax.php 400 (Bad Request)
here is my WordPress code:
add_action('wp_ajax_csv_file', 'csv_file');
add_action('wp_ajax_nopriv_csv_file', 'csv_file');
function csv_file()
{
if($_POST['rtype'] == 'enr_data'){
set_time_limit(0);
ob_implicit_flush(true);
ob_end_flush();
for ($i = 0; $i < 10; $i++) {
//Hard work!!
sleep(1);
$p = ($i + 1) * 10; //Progress
$response = array('message' => $p . '% complete. server time: ' . date("h:i:s", time()),
'progress' => $p);
echo json_encode($response);
}
sleep(1);
$response = array('message' => 'Complete',
'progress' => 100);
echo json_encode($response);
die();
}
}
function ajax_stream() {
if (!window.XMLHttpRequest) {
alert("Your browser does not support the native XMLHttpRequest object.");
return;
}
try {
var xhr = new XMLHttpRequest();
xhr.previous_text = '';
xhr.responseType = "text";
xhr.onerror = function() {
alert("[XHR] Fatal Error.");
};
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
alert('[XHR] Done')
} else if (xhr.readyState > 2) {
var new_response = xhr.responseText.substring(xhr.previous_text.length);
var result = JSON.parse(new_response);
document.getElementById("divProgress").innerHTML += result.message + '<br />';
document.getElementById('progressor').style.width = result.progress + "%";
xhr.previous_text = xhr.responseText;
}
} catch (e) {
alert("[XHR STATECHANGE] Exception: " + e);
}
};
var data = "action=csv_file&rtype=enr_data";
xhr.open("POST", ajaxurl, true);
xhr.send(data);
console.log(xhr);
} catch (e) {
alert("[XHR REQUEST] Exception: " + e);
}
}#divProgress {
border: 2px solid #ddd;
padding: 10px;
width: 300px;
height: 265px;
margin-top: 10px;
overflow: auto;
background: #f5f5f5;
}
#progress_wrapper {
border: 2px solid #ddd;
width: 321px;
height: 20px;
overflow: auto;
background: #f5f5f5;
margin-top: 10px;
}
#progressor {
background: #07c;
width: 0%;
height: 100%;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.demo_container {
width: 680px;
margin: 0 auto;
padding: 30px;
background: #FFF;
margin-top: 50px;
}
.my-btn,
.my-btn2 {
width: 297px;
margin-top: 22px;
float: none;
display: block;
}
h1 {
font-size: 22px;
margin-bottom: 20px;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.demo_container::after {
content: "";
clear: both;
display: block;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn {
display: inline-block;
text-decoration: none;
border: 2px solid #3b8dbd;
line-height: 15px;
color: #3b8dbd;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
font-size: 15px;
padding: .6em 1.5em;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background: #ffffff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
zoom: 1;
-webkit-backface-visibility: hidden;
position: relative;
margin-right: 10px;
}
.ghost-btn:hover {
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
background-color: #3b8dbd;
color: #ffffff;
}
.ghost-btn:focus {
outline: none;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn.active:hover {
border: 2px solid #D23725;
background: #FFF;
}
.method_wrappers {
margin-bottom: 20px;
}<div class="demo_container">
<div class='method_wrappers'>
<a class='ghost-btn active' href='#'>XHR Method</a>
<a class='ghost-btn' href='../example2/index.html'>Iframe Method</a>
</div>
<h1>AJAX progress bar for PHP script without polling (XHR method)</h1>
<div class='float_left'>
<h3>Progress Bar</h3>
<div id='progress_wrapper'>
<div id="progressor"></div>
</div>
<a onclick="ajax_stream();" class='my-btn'>Start Ajax Streaming</a>
</div>
<div class='float_right'>
<h3>Log</h3>
<div id="divProgress"></div>
</div>
</div>javascript wordpress xmlhttprequest
asked Nov 12 at 10:46
Khalil DaNish
4249
I'm trying to send a variable to the server, using XMLHttpRequest.
I tested it on local on a non-Wordpress file and it works. But on production, on my Wordpress file, the onreadystatechange AJAX status doesn't get to 200.
Is there anything I need to be aware when XMLHttpRequesting in Wordpress?
I have the following code for sending data to the server using XMLHTTP Request but it's not working I don't know why? I'm getting the following error:
VM704:1 POST http://localhost/amt/wp-admin/admin-ajax.php 400 (Bad Request)
here is my WordPress code:
add_action('wp_ajax_csv_file', 'csv_file');
add_action('wp_ajax_nopriv_csv_file', 'csv_file');
function csv_file()
{
if($_POST['rtype'] == 'enr_data'){
set_time_limit(0);
ob_implicit_flush(true);
ob_end_flush();
for ($i = 0; $i < 10; $i++) {
//Hard work!!
sleep(1);
$p = ($i + 1) * 10; //Progress
$response = array('message' => $p . '% complete. server time: ' . date("h:i:s", time()),
'progress' => $p);
echo json_encode($response);
}
sleep(1);
$response = array('message' => 'Complete',
'progress' => 100);
echo json_encode($response);
die();
}
}
function ajax_stream() {
if (!window.XMLHttpRequest) {
alert("Your browser does not support the native XMLHttpRequest object.");
return;
}
try {
var xhr = new XMLHttpRequest();
xhr.previous_text = '';
xhr.responseType = "text";
xhr.onerror = function() {
alert("[XHR] Fatal Error.");
};
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
alert('[XHR] Done')
} else if (xhr.readyState > 2) {
var new_response = xhr.responseText.substring(xhr.previous_text.length);
var result = JSON.parse(new_response);
document.getElementById("divProgress").innerHTML += result.message + '<br />';
document.getElementById('progressor').style.width = result.progress + "%";
xhr.previous_text = xhr.responseText;
}
} catch (e) {
alert("[XHR STATECHANGE] Exception: " + e);
}
};
var data = "action=csv_file&rtype=enr_data";
xhr.open("POST", ajaxurl, true);
xhr.send(data);
console.log(xhr);
} catch (e) {
alert("[XHR REQUEST] Exception: " + e);
}
}#divProgress {
border: 2px solid #ddd;
padding: 10px;
width: 300px;
height: 265px;
margin-top: 10px;
overflow: auto;
background: #f5f5f5;
}
#progress_wrapper {
border: 2px solid #ddd;
width: 321px;
height: 20px;
overflow: auto;
background: #f5f5f5;
margin-top: 10px;
}
#progressor {
background: #07c;
width: 0%;
height: 100%;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.demo_container {
width: 680px;
margin: 0 auto;
padding: 30px;
background: #FFF;
margin-top: 50px;
}
.my-btn,
.my-btn2 {
width: 297px;
margin-top: 22px;
float: none;
display: block;
}
h1 {
font-size: 22px;
margin-bottom: 20px;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.demo_container::after {
content: "";
clear: both;
display: block;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn {
display: inline-block;
text-decoration: none;
border: 2px solid #3b8dbd;
line-height: 15px;
color: #3b8dbd;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
font-size: 15px;
padding: .6em 1.5em;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background: #ffffff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
zoom: 1;
-webkit-backface-visibility: hidden;
position: relative;
margin-right: 10px;
}
.ghost-btn:hover {
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
background-color: #3b8dbd;
color: #ffffff;
}
.ghost-btn:focus {
outline: none;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn.active:hover {
border: 2px solid #D23725;
background: #FFF;
}
.method_wrappers {
margin-bottom: 20px;
}<div class="demo_container">
<div class='method_wrappers'>
<a class='ghost-btn active' href='#'>XHR Method</a>
<a class='ghost-btn' href='../example2/index.html'>Iframe Method</a>
</div>
<h1>AJAX progress bar for PHP script without polling (XHR method)</h1>
<div class='float_left'>
<h3>Progress Bar</h3>
<div id='progress_wrapper'>
<div id="progressor"></div>
</div>
<a onclick="ajax_stream();" class='my-btn'>Start Ajax Streaming</a>
</div>
<div class='float_right'>
<h3>Log</h3>
<div id="divProgress"></div>
</div>
</div>function ajax_stream() {
if (!window.XMLHttpRequest) {
alert("Your browser does not support the native XMLHttpRequest object.");
return;
}
try {
var xhr = new XMLHttpRequest();
xhr.previous_text = '';
xhr.responseType = "text";
xhr.onerror = function() {
alert("[XHR] Fatal Error.");
};
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
alert('[XHR] Done')
} else if (xhr.readyState > 2) {
var new_response = xhr.responseText.substring(xhr.previous_text.length);
var result = JSON.parse(new_response);
document.getElementById("divProgress").innerHTML += result.message + '<br />';
document.getElementById('progressor').style.width = result.progress + "%";
xhr.previous_text = xhr.responseText;
}
} catch (e) {
alert("[XHR STATECHANGE] Exception: " + e);
}
};
var data = "action=csv_file&rtype=enr_data";
xhr.open("POST", ajaxurl, true);
xhr.send(data);
console.log(xhr);
} catch (e) {
alert("[XHR REQUEST] Exception: " + e);
}
}#divProgress {
border: 2px solid #ddd;
padding: 10px;
width: 300px;
height: 265px;
margin-top: 10px;
overflow: auto;
background: #f5f5f5;
}
#progress_wrapper {
border: 2px solid #ddd;
width: 321px;
height: 20px;
overflow: auto;
background: #f5f5f5;
margin-top: 10px;
}
#progressor {
background: #07c;
width: 0%;
height: 100%;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.demo_container {
width: 680px;
margin: 0 auto;
padding: 30px;
background: #FFF;
margin-top: 50px;
}
.my-btn,
.my-btn2 {
width: 297px;
margin-top: 22px;
float: none;
display: block;
}
h1 {
font-size: 22px;
margin-bottom: 20px;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.demo_container::after {
content: "";
clear: both;
display: block;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn {
display: inline-block;
text-decoration: none;
border: 2px solid #3b8dbd;
line-height: 15px;
color: #3b8dbd;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
font-size: 15px;
padding: .6em 1.5em;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background: #ffffff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
zoom: 1;
-webkit-backface-visibility: hidden;
position: relative;
margin-right: 10px;
}
.ghost-btn:hover {
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
background-color: #3b8dbd;
color: #ffffff;
}
.ghost-btn:focus {
outline: none;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn.active:hover {
border: 2px solid #D23725;
background: #FFF;
}
.method_wrappers {
margin-bottom: 20px;
}<div class="demo_container">
<div class='method_wrappers'>
<a class='ghost-btn active' href='#'>XHR Method</a>
<a class='ghost-btn' href='../example2/index.html'>Iframe Method</a>
</div>
<h1>AJAX progress bar for PHP script without polling (XHR method)</h1>
<div class='float_left'>
<h3>Progress Bar</h3>
<div id='progress_wrapper'>
<div id="progressor"></div>
</div>
<a onclick="ajax_stream();" class='my-btn'>Start Ajax Streaming</a>
</div>
<div class='float_right'>
<h3>Log</h3>
<div id="divProgress"></div>
</div>
</div>function ajax_stream() {
if (!window.XMLHttpRequest) {
alert("Your browser does not support the native XMLHttpRequest object.");
return;
}
try {
var xhr = new XMLHttpRequest();
xhr.previous_text = '';
xhr.responseType = "text";
xhr.onerror = function() {
alert("[XHR] Fatal Error.");
};
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
alert('[XHR] Done')
} else if (xhr.readyState > 2) {
var new_response = xhr.responseText.substring(xhr.previous_text.length);
var result = JSON.parse(new_response);
document.getElementById("divProgress").innerHTML += result.message + '<br />';
document.getElementById('progressor').style.width = result.progress + "%";
xhr.previous_text = xhr.responseText;
}
} catch (e) {
alert("[XHR STATECHANGE] Exception: " + e);
}
};
var data = "action=csv_file&rtype=enr_data";
xhr.open("POST", ajaxurl, true);
xhr.send(data);
console.log(xhr);
} catch (e) {
alert("[XHR REQUEST] Exception: " + e);
}
}#divProgress {
border: 2px solid #ddd;
padding: 10px;
width: 300px;
height: 265px;
margin-top: 10px;
overflow: auto;
background: #f5f5f5;
}
#progress_wrapper {
border: 2px solid #ddd;
width: 321px;
height: 20px;
overflow: auto;
background: #f5f5f5;
margin-top: 10px;
}
#progressor {
background: #07c;
width: 0%;
height: 100%;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.demo_container {
width: 680px;
margin: 0 auto;
padding: 30px;
background: #FFF;
margin-top: 50px;
}
.my-btn,
.my-btn2 {
width: 297px;
margin-top: 22px;
float: none;
display: block;
}
h1 {
font-size: 22px;
margin-bottom: 20px;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.demo_container::after {
content: "";
clear: both;
display: block;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn {
display: inline-block;
text-decoration: none;
border: 2px solid #3b8dbd;
line-height: 15px;
color: #3b8dbd;
-webkit-border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px;
-moz-background-clip: padding;
border-radius: 3px;
background-clip: padding-box;
font-size: 15px;
padding: .6em 1.5em;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background: #ffffff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
zoom: 1;
-webkit-backface-visibility: hidden;
position: relative;
margin-right: 10px;
}
.ghost-btn:hover {
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
background-color: #3b8dbd;
color: #ffffff;
}
.ghost-btn:focus {
outline: none;
}
.ghost-btn.active {
border: 2px solid #D23725;
color: #D23725;
}
.ghost-btn.active:hover {
border: 2px solid #D23725;
background: #FFF;
}
.method_wrappers {
margin-bottom: 20px;
}<div class="demo_container">
<div class='method_wrappers'>
<a class='ghost-btn active' href='#'>XHR Method</a>
<a class='ghost-btn' href='../example2/index.html'>Iframe Method</a>
</div>
<h1>AJAX progress bar for PHP script without polling (XHR method)</h1>
<div class='float_left'>
<h3>Progress Bar</h3>
<div id='progress_wrapper'>
<div id="progressor"></div>
</div>
<a onclick="ajax_stream();" class='my-btn'>Start Ajax Streaming</a>
</div>
<div class='float_right'>
<h3>Log</h3>
<div id="divProgress"></div>
</div>
</div>javascript wordpress xmlhttprequest
javascript wordpress xmlhttprequest
asked Nov 12 at 10:46
Khalil DaNish
4249
asked Nov 12 at 10:46
Khalil DaNish
4249
edited Nov 13 at 10:15
asked Nov 12 at 10:46
Khalil DaNish
4249
asked Nov 12 at 10:46
Khalil DaNish
4249
asked Nov 12 at 10:46
Khalil DaNish
4249
4249
1
Did you declare the ajaxurl var properly?? I don't see it declared in your code
– Rafsun Chowdhury
Nov 12 at 10:59
Did you try to run it after clearing your cache?
– Naser Nikzad
Nov 12 at 10:59
@Rafsun Chowdhury, Yes it's correct did you see the Error text added above. that's the url: localhost/amt/wp-admin/admin-ajax.php
– Khalil DaNish
Nov 12 at 11:06
It's hard for me to understand the goal here. At the very least I can say you should be validating each request with anoncewithin the PHP.
– GFargo
Nov 17 at 3:15
@GFargo I just has 400 error this means the request is not sent to the server side.
– Khalil DaNish
Nov 17 at 4:58
add a comment |
1
Did you declare the ajaxurl var properly?? I don't see it declared in your code
– Rafsun Chowdhury
Nov 12 at 10:59
Did you try to run it after clearing your cache?
– Naser Nikzad
Nov 12 at 10:59
@Rafsun Chowdhury, Yes it's correct did you see the Error text added above. that's the url: localhost/amt/wp-admin/admin-ajax.php
– Khalil DaNish
Nov 12 at 11:06
It's hard for me to understand the goal here. At the very least I can say you should be validating each request with anoncewithin the PHP.
– GFargo
Nov 17 at 3:15
@GFargo I just has 400 error this means the request is not sent to the server side.
– Khalil DaNish
Nov 17 at 4:58
1
1
Did you declare the ajaxurl var properly?? I don't see it declared in your code
– Rafsun Chowdhury
Nov 12 at 10:59
Did you declare the ajaxurl var properly?? I don't see it declared in your code
– Rafsun Chowdhury
Nov 12 at 10:59
Did you try to run it after clearing your cache?
– Naser Nikzad
Nov 12 at 10:59
Did you try to run it after clearing your cache?
– Naser Nikzad
Nov 12 at 10:59
@Rafsun Chowdhury, Yes it's correct did you see the Error text added above. that's the url: localhost/amt/wp-admin/admin-ajax.php
– Khalil DaNish
Nov 12 at 11:06
@Rafsun Chowdhury, Yes it's correct did you see the Error text added above. that's the url: localhost/amt/wp-admin/admin-ajax.php
– Khalil DaNish
Nov 12 at 11:06
It's hard for me to understand the goal here. At the very least I can say you should be validating each request with a
nonce within the PHP.– GFargo
Nov 17 at 3:15
It's hard for me to understand the goal here. At the very least I can say you should be validating each request with a
nonce within the PHP.– GFargo
Nov 17 at 3:15
@GFargo I just has 400 error this means the request is not sent to the server side.
– Khalil DaNish
Nov 17 at 4:58
@GFargo I just has 400 error this means the request is not sent to the server side.
– Khalil DaNish
Nov 17 at 4:58
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53260532%2fxmlhttprequest-is-not-working-in-the-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53260532%2fxmlhttprequest-is-not-working-in-the-wordpress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Did you declare the ajaxurl var properly?? I don't see it declared in your code
– Rafsun Chowdhury
Nov 12 at 10:59
Did you try to run it after clearing your cache?
– Naser Nikzad
Nov 12 at 10:59
@Rafsun Chowdhury, Yes it's correct did you see the Error text added above. that's the url: localhost/amt/wp-admin/admin-ajax.php
– Khalil DaNish
Nov 12 at 11:06
It's hard for me to understand the goal here. At the very least I can say you should be validating each request with a
noncewithin the PHP.– GFargo
Nov 17 at 3:15
@GFargo I just has 400 error this means the request is not sent to the server side.
– Khalil DaNish
Nov 17 at 4:58