I have a bit of a problem with JavaScript for loop not looping.
Here is the code:
if (this.readyState === 4 && this.status === 200)
{
if(this.response)
{
console.log(this.response);
var data = JSON.parse(this.responseText);
var output = '';
console.log(data);
for(var i=1 ; i <= data.length ; i++)
{
console.log('i got here');
output += '<a href="'+data[i].platform_name+'">'+
'<div class="new-prod">' +
'<div class="flip">' +
'<div class="front">' +
'<img src="images/'+data[i].picture+'" alt="Image for '+data[i].product_name+'">'+
'<p class="name">'+data[i].product_name+' ('+data[i].platform_name+')</p>'+
'<p class="price">'+data[i].price+' Kč</p>'+
'</div>'+
'<div class="back">'+data[i].description+'</div>'+
'</div>'+
'</div>'+
'</a>';
}
console.log(i);
document.getElementById('new-container').innerHTML = output;
document.getElementById('lmbtn').setAttribute('data-offset',parseInt(offset)+8);
}
else
{
document.getElementById('lmbtn').textContent="Thats all";
}
}
As you can see i´m making AJAX request to the server and get JSON as response.
My code gets to the console.log(data), it logs parsed JSON to the console, but for some reason it skips the for loop. console.log('i got here'); doesn´t log. At the end it logs console.log(i) is 1 and sets the innerHTML of the container to empty string.
Please, excuse my bad english and thanks for any help.
You better use for(var i=1 ; i <= Object.keys(data).length ; i++) or for (var key in data) inside your for loop as a condition.
Related
After creating add post to favorite and posted at codereview i had to improve my code as bellow,
And after changing code the button UI doesn't change when clicked
post_page.php
<?php
$email = 'user#mail.com';
// Query to get the user_id
$stmt = $conn->prepare('SELECT memberID FROM members WHERE email = :email AND active="Yes" ');
$stmt->execute(array(':email' => $email));
$row = $stmt->fetch();
$mbid = $row['memberID'];
$pid = '4';
// Query to Get the Director ID
$stmt = $conn->prepare('SELECT * FROM allpostdata WHERE id =:id');
$stmt->execute(array(':id' => $pid));
$result = $stmt->fetchAll();
foreach ($result as $row) {
echo "<p>Director: " . $row['tit'] . "</p> ";
$fav_image = checkFavorite($mbid, $pid, $conn);
echo "Favorite? : " . $fav_image . "";
}
function checkFavorite($mbid, $pid, $conn) {
$stmt = $conn->prepare("SELECT * FROM favorite WHERE memberID=:mid AND id=:id");
$stmt->execute(array(':mid' => $mbid, ':id' => $pid));
$count = $stmt->rowCount();
if ($count == 0) {
echo "<div class='button btn btn-block btn-outline-danger' method='Like' data-user=" . $mbid . " data-post=" . $pid . "> Add<i class='mi mi_sml ml-2' id=" . $pid . ">favorite_border</i></div>";
} else {
echo "<div class='button btn btn-block btn-outline-danger' method='Unlike' data-user=" . $mbid . " data-post=" . $pid . ">Remove<i class='mi mi_sml ml-2' id=" . $pid . ">favorite</i></div>";
}
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.button').click(function (e) {
e.preventDefault();
$.getJSON('favs.php',
{user_id: $(this).attr('data-user'),
director_id: $(this).attr('data-post'),
method: $(this).attr('method')})
.done(function (json) {
switch (json.feedback) {
case 'Like' :
$(this).attr('method', 'Unlike');
$(this).html('<i class="mi mi_sml text-danger" id="' + json.id + '">favorite</i>Remove Favorite').toggleClass('button mybtn'); // Replace the image with the liked button
break;
case 'Unlike' :
$(this).html('<i class="mi mi_sml" id="' + json.id + '">favorite_border</i>Add Favorite').toggleClass('mybtn button');
$(this).attr('method', 'Like');
break;
case 'Fail' :
alert('The Favorite setting could not be changed.');
break;
}
})
.fail(function (jqXHR, textStatus, error) {
alert("Error Changing Favorite: " + error);
});
});
});
</script>
favs.php
<?php
include("$_SERVER[DOCUMENT_ROOT]/include/config.php");
include("$_SERVER[DOCUMENT_ROOT]/classes/function.php");
$method = clean_input($_GET['method']);
$user_id = clean_input($_GET['user_id']);
$director_id = clean_input($_GET['director_id']);
switch ($method) {
case "Like" :
$query = 'INSERT INTO favorite (memberID, id) VALUES (:mID, :pID)';
break;
case "Unlike" :
$query = 'DELETE FROM favorite WHERE memberID=:mID and id=:pID';
break;
}
$feedback = 'Fail'; // start with pessimistic feedback
if (isset($query)) {
$stmt = $conn->prepare($query);
$stmt->bindParam(':mID', $user_id, PDO::PARAM_INT, 12);
$stmt->bindParam(':pID', $director_id, PDO::PARAM_INT, 12);
if ($stmt->execute()) {
$feedback = $method;
} // feedback becomes method on success
}
echo json_encode(['id' => $director_id,
'feedback' => $feedback]);
?>
My problem is when button is clicked and when ajax return success the button should change its UI.
where else in my case its not changing when on page load it show Add even after clicking on button and ajax return success still it is same.
The problem with your code is $(this) i.e: In ajax success function jquery is not able to find which element is clicked and where to apply required changes. To solve this you can store $(this) in some variable and use the same. Like below :
$('.button').click(function(e) {
//getting current element which is clicked
var button = $(this);
e.preventDefault();
$.getJSON('favs.php', {
user_id: $(this).attr('data-user'),
director_id: $(this).attr('data-post'),
method: $(this).attr('method')
})
.done(function(json) {
switch (json.feedback) {
case 'Like':
button.attr('method', 'Unlike');
button.html('<i class="mi mi_sml text-danger" id="' + json.id + '">favorite</i>Remove Favorite').toggleClass('button mybtn'); // Replace the image with the liked button
break;
case 'Unlike':
button.html('<i class="mi mi_sml" id="' + json.id + '">favorite_border</i>Add Favorite').toggleClass('mybtn button');
button.attr('method', 'Like');
break;
case 'Fail':
alert('The Favorite setting could not be changed.');
break;
}
})
.fail(function(jqXHR, textStatus, error) {
alert("Error Changing Favorite: " + error);
});
});
Im trying to build something like images bookmarklet site like Pinterest, but somehow some of the website doesnt grab any image. Some are works just fine. Also as additional information, I use jquery wookmark as the grid templates.
Here are the codes im currently use... I dont know if its right or simply i used the wrong method to retrieve the images. Cheers guys in advance for any comment or help... really appreciated.
-- html
<ul id="tiles"></ul>
<div id="loader">
<div id="loaderCircle" style="display:none"></div>
</div>
-- javascript
<script type="text/javascript">
function loadData() {
isLoading = true;
var link_pin ='http://www.somewebsite.com';
$('#loaderCircle').show();
$.ajax({
url: '<?php echo(base_url('index.php/home/pin_ajax'))?>',
dataType: 'json',
data: {link_pin:link_pin},
success: onLoadData
});
};
function onLoadData(data) {
isLoading = false;
$('#loaderCircle').hide();
var html = '';
var i=0, length=data.length, returns_data;
for(; i<length; i++) {
var link_foto = data[i];
var newImg = new Image();
newImg.src = link_foto;
var height = newImg.height;
var width = newImg.width;
var image_click="image_clicks('"+link_foto+"')";
if (width >="200" && height >="200"){
html += '<li onclick="'+image_click+'" id="image_'+i+'">';
html += '<a>';
html += '<div class="back_tristlist">';
html += '<span class="hover-icon icon-text">🔍</span>';
html += '<img src="'+link_foto+'">';
html += '</div>';
html += '</a>';
html += '<div class="space_image"></div>';
html += '</li>';
}
}
$('#tiles').append(html);
handler = $('#tiles li');
handler.wookmark(options);
};
</script>
-- php
public function pin_ajax(){
extract($_GET);
$page = file_get_contents($link_pin);
error_reporting(0);
$doc = new DOMDocument();
#$doc->loadHTML($page);
$images = $doc->getElementsByTagName('img');
echo($images);
$_datas[]="";
foreach($images as $image){
$raw_img_url = $image->getAttribute('src');
$img_final_link = $raw_img_url;
$img_url = explode('http://www.', $raw_img_url);
$img_check = $img_url[1];
if($img_check==''){
$img_url = explode('http://', $raw_img_url);
$img_check = $img_url[1];
if($img_check!=''){ $img_check_error=1; }
if($img_check==''){ $img_check_error=2; }
}
$_datas[] = ($img_check);
}
$output = json_encode($_datas);
echo($output);
}
My page gets a response from response_ajax.php with this code:
<input class="btn" name="send_button" type="button" value="check"
onClick=
"xmlhttpPost('/response_ajax.php',
'MyForm',
'MyResult',
'<img src=/busy.gif>')";
return false;"
>
I get a response; however, jQuery scripts don't work with an arrived code. I'm trying to add script inside response_ajax.php, but nothing happens:
<?php
// ... //
echo '
<div id="whois-response">
<pre>' .$str. '</pre>
</div>
<script>
(function($){
$(function(){
alert("loaded");
});
})(jQuery);
</script>
';
?>
xmlhttpPost function:
function xmlhttpPost(strURL,formname,responsediv,responsemsg) {
var xmlHttpReq = false;
var self = this;
// Xhr per Mozilla/Safari/Ie7
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// per tutte le altre versioni di IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
// Quando pronta, visualizzo la risposta del form
updatepage(self.xmlHttpReq.responseText,responsediv);
}
else{
// In attesa della risposta del form visualizzo il msg di attesa
updatepage(responsemsg,responsediv);
}
}
self.xmlHttpReq.send(getquerystring(formname));
}
function getquerystring(formname) {
var form = document.forms[formname];
var qstr = "";
function GetElemValue(name, value) {
qstr += (qstr.length > 0 ? "&" : "")
+ escape(name).replace(/\+/g, "%2B") + "="
+ escape(value ? value : "").replace(/\+/g, "%2B");
//+ escape(value ? value : "").replace(/\n/g, "%0D");
}
var elemArray = form.elements;
for (var i = 0; i < elemArray.length; i++) {
var element = elemArray[i];
var elemType = element.type.toUpperCase();
var elemName = element.name;
if (elemName) {
if (elemType == "TEXT"
|| elemType == "TEXTAREA"
|| elemType == "PASSWORD"
|| elemType == "BUTTON"
|| elemType == "RESET"
|| elemType == "SUBMIT"
|| elemType == "FILE"
|| elemType == "IMAGE"
|| elemType == "HIDDEN")
GetElemValue(elemName, element.value);
else if (elemType == "CHECKBOX" && element.checked)
GetElemValue(elemName,
element.value ? element.value : "On");
else if (elemType == "RADIO" && element.checked)
GetElemValue(elemName, element.value);
else if (elemType.indexOf("SELECT") != -1)
for (var j = 0; j < element.options.length; j++) {
var option = element.options[j];
if (option.selected)
GetElemValue(elemName,
option.value ? option.value : option.text);
}
}
}
return qstr;
}
function updatepage(str,responsediv){
document.getElementById(responsediv).innerHTML = str;
}
I may be wrong, but I'm pretty sure you can't do multiline strings unless it is configured to do so (and running a newer version of PHP):
echo '
<div id="whois-response">
<pre>' .$str. '</pre>
</div>
<script>
(function($){
$(function(){
alert("loaded");
});
})(jQuery);
</script>
';
Try changing that to:
echo <<<EOD
<div id="whois-response">
<pre> $str </pre>
</div>
<script>
(function($){
$(function(){
alert("loaded");
});
})(jQuery);
</script>
EOD;
I think your AJAX response is a PHP error instead of the script you think it is returning.
Got it to work by adding jQuery staff as a function
function updatepage(str,responsediv){
document.getElementById(responsediv).innerHTML = str;
(function($){
$(function(){
$('html').my_jQuery_staff();
});
})(jQuery);
}
Main JavaScript file with jQuery:
// ~~ jQuery ~~
$(document).ready(function () {
$.fn.my_jQuery_staff= function() {
return this.each(function() {
// Include jQuery staff here.
});
};
$('html').my_jQuery_staff();
});
I am using a Mediawiki based website. The site is http://www.DragonFallRPG.com The widget in question is the 'Orion's Dice Box' in the left column of the site.
Not sure if that has any bearing on this but here goes. I have a custom div called 'dice' with a content destination div called 'result'. Below the 'result' div is a form for selecting a number of dice, and the number of sides for those dice. There is a processing script, which is tested working to provide a randomized result as if those dice were thrown. The problem is in the calling of one or more functions, I think. I found the AJAX method for getting the user input via 'get' somewhere on the web and no longer have any idea where it came from. I will include the files below.
dice_header.php (include file for <head> portion of webpage)
<style>
<!--[if IE] -- long buttons / button width in IE fix>
<style>.button{width:1;}</style>
<![endif]-->
</style>
<?php $javafile = dirname(__FILE__).'/ajax_engine.js'; ?>
<script type="text/javascript" src= "<?php echo $javafile ?>" ></script>
<script type="text/javascript">
function submit_dice() {
// Get form values
var no_of_dice = document.getElementById('dice').value;
var no_of_sides = document.getElementById('sides').value;
// Construct URL
<?php $handlerfile = dirname(__FILE__).'/handler.php' ?>
url = '<?php echo $handlerfile; ?>' + '?no_of_dice=' + escape(no_of_dice) + '&no_of_sides=' + escape(no_of_sides);
var xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
alert('Handlerfile URL = ' + url + '\r\n\r\n Escape URL = ' + escape(url) + '\r\n\r\n # of dice = ' + no_of_dice + '\r\n # of Sides = ' + no_of_sides);
alert('url for ajax_get = ' + url);
ajax_get (url, 'result');
}
</script>
The above code is an include in the header of the index.php
The function call for ajax_get seems to be where it breaks down in the process in the above code. I don't know if it requires the http portion of the url or not. I don't know if the escape url is required or not. I'm hesitant to monkey with the script any further without guidance.
The code that follows is the div block for the widget I'm trying to create
dice.php (include file for my widget / div block)
<div id="result" style="text-align:center;
word-wrap: break-word;
width:100px;
font-weight:bold;
font-size:large;
border:1px blue solid;
margin:0;">
<?php
//$filename = dirname(__FILE__).'/ajax_engine.js';
//$handlerfile = dirname(__FILE__).'/handler.php';
if (file_exists($handlerfile)) {
echo "Handler file path OK";
echo 'alert(\'Handler file path = "' . $handlerfile . '"\');';
die();
} else {
echo "BAD handler file path!";
}
?>
</div>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0; padding:0px;" >
<tr>
<td><select name="dice" id="dice" size="1" style="margin:0px;">
<?php
for ($i = 1; ; $i++) {
if ($i > 20) {
break;
}
if ($i == 1) {
echo "<option value=$i selected>$i</option>\n";
} else {
echo "<option value=$i>$i</option>\n";
}
}
?>
</select></td>
<td><select name="sides" id="sides" size="1" style="margin:0px;">
<option value="4">d4</option>
<option value="6">d6</option>
<option value="8">d8</option>
<option value="10">d10</option>
<option value="12">d12</option>
<option value="20" selected>d20</option>
<option value="100">d100</option>
</select>
</td>
</tr><tr>
<td colspan="2">
<input type="button" onclick="submit_dice();" value="Roll Dice" style="width:100px;" />
</td></tr>
</table>
<!--
Psuedo vs. True Random Numbers
http://www.phpfive.net/pseudo-random_php_functions_and_truly_random_number_generators_article2.htm
-->
Next follows the javascript engine I'm using to begin the AJAX functionality... Mediawiki has it's own built in AJAX - but I have no familiarity with it and tried finding a less complicated working version else where that I could tweak - resulting in this headache.
Several alert popup calls made to help with debugging, but I'm lost, and none of these alerts are actually being called... I can't tell why.
// JavaScript Document "javascript_engine.js"
// Get base url
url = document.location.href;
var base_url = "http://";
alert('base_url = ' + base_url);
xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
var ajax_get_error = false;
alert('ajax_engine.js called');
function ajax_do (url) {
// Does URL begin with http?
alert('url.substring(0, 4) = ' + url);
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
// Create new JS element
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url;
// Append JS element (therefore executing the 'AJAX' call)
document.body.appendChild (jsel);
return true;
}
function ajax_get (url, el) {
// Has element been passed as object or id-string?
if (typeof(el) == 'string') {
el = document.getElementById(el);
}
// Valid el?
if (el == null) { return false; }
alert(url.substring(0, 4));
// Does URL begin with http?
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
// Create getfile URL
getfile_url = base_url + 'getfile.php?url=' + escape(url) + '&el=' + escape(el.id);
// Do Ajax
ajax_do (getfile_url);
return true;
}
Following is getfile.php
<?php //getfile.php -- used for addressing visual part of code
// Get URL and div
if (!isset($_GET['url'])) { die(); } else { $url = $_GET['url']; }
if (!isset($_GET['el'])) { die(); } else { $el = $_GET['el']; }
// echo 'alert(\'URL in getfile.php = \'); $url';
// Make sure url starts with http
if (substr($url, 0, 4) != 'http') {
// Set error
echo 'alert(\'Security error; incorrect URL!\');';
die();
}
// Try and get contents
$data = #file_get_contents($url);
if ($data === false) {
// Set error
echo 'alert(\'Unable to retrieve "' . $url . '"\');';
die();
}
// Escape data
$data = str_replace("'", "\'", $data);
$data = str_replace('"', "'+String.fromCharCode(34)+'", $data);
$data = str_replace ("\r\n", '\n', $data);
$data = str_replace ("\r", '\n', $data);
$data = str_replace ("\n", '\n', $data);
?>
el = document.getElementById('<?php echo $el; ?>');
el.innerHTML = '<?php echo $data; ?>';
Following is the form processor, generating the random numbers result for the AJAX output/update.
<?php // handler.php
/////////////////////////////////////////////////////////////////
// Random Dice Value Generator v1.0 //
// http://www.dragonfallrpg.com //
// Orion Johnson Copyright 2007 //
// //
// This script is used to create a random number based //
// values from the user's input //
/////////////////////////////////////////////////////////////////
/* double rolldice(int, int)
* - generates a random value based on the numbers passed as an argument
* - maximum iterations = 20 (can be changed in the user form)
* - maximum number of sides per function call = 4, 6, 8, 10, 12, 20, or 100 (can be changed)
*
* Usage: To generate a random total value as if one had thrown that many dice:
* Note: Future revisions may include the ability to add additional lines to the user form
* to mix types of simulated dice being thrown.
*
* array $no_of_dice(x-1); array value "x" taken from user form
* var $no_of_sides; value taken from user form
* var $total_value; sum of values from entire array
* echo $total_value;
*/
// Check variables
if (empty($_GET['no_of_dice'])) {
die ('<span style="color:red;">Number of dice value invalid!</span>');
}
if (empty($_GET['no_of_sides'])) {
die ('<span style="color:red;">Number of sides value invalid!</span>');
}
// seed with microseconds
function make_seed()
{
list($usec, $sec) = explode(' ', microtime());
return (float) $sec + ((float) $usec * 1000003);
}
function rolldice()
{
$total_value = 0; /* sum of values from entire array */
srand(make_seed()); /* seed random number generator // 1,000,003 is a prime number */
/* start loop structure from 0 to $no_of_dice */
for($i = 0; $i < $_GET['no_of_dice']; $i++)
{
$randnum = rand(1, $_GET['no_of_sides']);
$total_value = $total_value + $randnum;
}
/* end loop */
/* print/return results to the screen */
// echo 'Total value for dice: ' + rolldice();
return $total_value;
}
// Taken from http://www.sebflipper.com/?page=code&file=password.php
// for array iteration see also: http://www.php-scripts.com/php_diary/122799.php3
?>
If there is a simpler way to perform a div update with a random result based on form input, I'm all ears. This has been a headache for too long for me. I'm no code-head, just know enough to tinker and make some things work and understand most things when explained.
I haven't read through all the code, but since MediaWiki 1.17.0 there's a feature called ResourceLoader (if you have older version you should upgrade), which you can use for this purpose.
You can make the whole code into an extension to have it organized in a directory (let's say extensions/DiceBox). The DiceBox.php file in that folder would then be along these lines:
<?php
if( !defined( 'MEDIAWIKI' ) ) {
die();
}
$wgExtensionFunctions[] = 'DiceBoxInit';
$wgHooks['SkinTemplateToolboxEnd'][] = 'DiceBoxOnSkinTemplateToolboxEnd';
$wgResourceModules['ext.DiceBox'] = array(
'localBasePath' => dirname( __FILE__ ),
'remoteExtPath' => 'DiceBox',
'scripts' => 'ext.DiceBox.js',
'dependencies' => 'jquery'
);
function DiceBoxInit() {
global $wgOut;
$wgOut->addModules( 'ext.DiceBox' );
}
?>
<?php
function DiceBoxOnSkinTemplateToolboxEnd() {
$sides = array( 4, 6, 8, 10, 12, 20, 100 );
?>
</ul>
</div>
</div>
<div class="portlet" id="p-dicebox">
<h5>Orion's Dice Box</h5>
<div class="pBody">
<div id="dice-result" style="display: none;"></div>
<form id="dice-form">
<select name="no_of_dice">
<?php
for( $i = 1; $i <= 20; $i++ ) {
echo '<option value="', $i, '">', $i, '</option>';
}
?>
</select>
<select name="no_of_sides">
<?php
foreach( $sides as $n ) {
echo '<option value="', $n, '">d', $n, '</option>';
}
?>
</select>
<input type="button" value="Roll Dice" id="dice-roll" />
</form>
<?php
return true;
}
This code outputs the code box HTML in the sidebar and registers the following JavaScript file (ext.DiceBox.js) to be available on the page:
jQuery( document ).ready( function( $ ) {
$( '#dice-roll' ).click( function() {
$.get( mw.config.get( 'wgExtensionAssetsPath' ) + '/DiceBox/handler.php',
$( '#dice-form' ).serialize(), function( data )
{
$( '#dice-result' ).html( data ).append( '<hr />' ).show();
} );
} );
} );
This code simply uses jQuery (which is bundled with MediaWiki as of 1.16.0) to send a request to the server when the button is clicked and displays the result in the box.
In the handler.php file, there's no place where the random number gets output, so you need to add echo rolldice(); before the ?>.
Finally, to make the extensions fully work, add require_once $IP . '/extensions/DiceBox/DiceBox.php'; to the bottom of LocalSettings.php.
I have a loop in which I'm making Ajax xmlhttp requests. This occurs within a function triggered by a window.onload event.
The Ajax calls are being made with async=false, because they need to occur in a specific order that relies on each step completing before the next can occur.
With each successive request in the loop, I'm updating a div with the xmlhttp.responseText.
Firefox is refreshing between calls as desired.
IE is not. When the loop begins, the div is populated with the pre-loop content. When the loop finishes, the div is populated with the first refresh that occurs outside of the loop.
Can someone please help?
Two attempted solutions:
1. Adding a random string to the end of the GET query string to ensure a unique url
2. Submitting with the POST method
No luck with either.
Thanks.
Code...
<script type="text/javascript">
function order_process() {
var err;
var queue_id = "<?= implode(':',$plans[$_REQUEST['order_queue_id']]); ?>".split(':'); // Queue ID
var queue_ax = "<?= implode(':',array_keys($plans[$_REQUEST['order_queue_id']])); ?>".split(':'); // Queue Action
i = 0;
for (step in queue_id) {
// The DIV contents that display during each loop iteration
document.getElementById("barber_pole").innerHTML='\
<center>\
<table style="align:left" border="0" cellpacing="1" cellpadding="1">\
<tr><td><B>Processing Order</B><span style="float:right;">Step ' + (i + 1) + '/' + queue_id.length + '</span></td></tr>\
<tr><td style="background-color:#FFFFFF;height:1.5px"></td></tr>\
<tr><td height="20" style="text-align:center">' + queue_ax[i] + '...</td></tr>\
<tr><td height="20"><IMG SRC="../../_include/images/barber_pole.gif" style="vertical-align: middle;"></td></tr>\
</table>\
</center>';
xmlhttp = ajax_request(); // Create request object
xmlhttp.onreadystatechange=function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
1;
}
}
var url = '../../../api/order_process.php?api_login=' + "<?=$api_login?>" + '&api_pass=' + "<?=$api_pass?>" + "&order_id=<?= $_REQUEST['order_id']?>" + '&order_action_id=' + queue_id[step] + '&timeid=' + Math.random();
xmlhttp.open("GET",url,false);
xmlhttp.send();
// If the response includes the string 'failed' exit the loop and render error error message
if (xmlhttp.responseText.split(',')[0] == 'failed') {
err = queue_ax[i] == 'Registering Domain'
? "<h1 class=\"landing-title\">" + fname + ', ' + "<?=$feedback[domain_register][title]?>" + "</h1><DIV class='landing-body'><?=$feedback[domain_register][body]?></DIV>"
: queue_ax[i] == 'Provisioning cPanel Account'
? "<h1 class=\"landing-title\">" + fname + ', ' + "<?=$feedback[cpanel_provision][title]?>" + "</h1><DIV class='landing-body'><?=$feedback[cpanel_provision][body]?></DIV>"
: queue_ax[i] == 'Credit Card Fraud Protection'
? "<h1 class=\"landing-title\">" + fname + ', ' + "<?=$feedback[maxmind_minfraud][title]?>" + "</h1><DIV class='landing-body'><?=$feedback[maxmind_minfraud][body]?>\"" + xmlhttp.responseText + '"</DIV>'
: queue_ax[i] == 'Verifying Payment'
? "<h1 class=\"landing-title\">" + fname + ', ' + "<?=$feedback[verify_payment][title]?>" + "</h1><DIV class='landing-body'><?=$feedback[verify_payment][body]?>\"" + xmlhttp.responseText + '"</DIV>'
: xmlhttp.responseText == 'failed,'
? "<h1 class=\"landing-title\">" + fname + ', ' + "<?=$feedback[gen_err][title]?>" + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?></DIV>"
: "<h1 class=\"landing-title\">" + fname + ', ' + "<?=$feedback[gen_err][title]?>" + "</h1><DIV class='landing-body'><?=$feedback[gen_err][body]?>\"" + xmlhttp.responseText + '"</DIV>';
break;
}
i++;
}
if (err) {
document.getElementById("landing-pres").innerHTML = err;
Cufon.replace('.landing-title');
} else {
document.getElementById("barber_pole").innerHTML = "<?= $thank[$_REQUEST['order_queue_id']][1] ?>";
}
}
window.onload=order_process;
</script>
async=false is not recommended [third parameter in xmlhttp.open("GET",url,false);], and we should not write onreadystatechange function if we are using async=false [Also, you are doing nothing in that function]. Please refer http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
Here is the good way that collecting / preparing all HTML once and update your "barber_pole" div like this..
<script type="text/javascript">
function order_process()
{
var err;
var queue_ids = "<?php echo implode(':',$plans[$_REQUEST['order_queue_id']]); ?>"; // Queue IDs separated by ':'
var queue_axns = "<?php echo implode(':',array_keys($plans[$_REQUEST['order_queue_id']])); ?>"; // Queue Actions separated by ':'
var xmlhttp = ajax_request(); // Create request object
var url = '../../../api/order_process.php?api_login=' + "<?=$api_login?>" + '&api_pass=' + "<?=$api_pass?>" + "&order_id=<?= $_REQUEST['order_id']?>" + '&order_action_ids=' + encodeURIComponent(queue_ids) + '&order_actions=' + encodeURIComponent(queue_axns) + '&timeid=' + Math.random();
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4)
{
document.getElementById("barber_pole").innerHTML = xmlhttp.responseText;;
}
else
{
document.getElementById("barber_pole").innerHTML = "Processing..";
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
window.onload=order_process;
</script>
in order_process.php file...
<?php
//Checking whether logged in or not blah blah..
$action_ids = $_REQUEST['order_action_ids'];
$order_actions = $_REQUEST['order_actions'];
$actions_ids_array = explode(":", $action_ids);
$order_actions_array = explode(":", $order_actions);
$strHTML = '';
for($cnt=0; $cnt < count($actions_ids_array); $cnt++ )
{
$each_action_id = $actions_ids_array[$cnt];
$each_action = $order_actions[$cnt];
//Process each action collect $fname and $status value and generate HTML
//blah blah..
$strHTML .= "<h1 class=\"landing-title\">" . $fname . $status . "</h1>";
}
echo $strHTML;
exit;