Develop Reference

How to pass variables to this results div within another function

EDIT: UPDATED jsfiddle (https://jsfiddle.net/3ow12Lk0/2/)
https://jsfiddle.net/gb8qsrzc/
Im trying to pass variables to pbModal.open
buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount
(towards bottom of JS), then to function buildOut:
function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {}
in order to display "results" in modal with
// Create content area and append to modal
resultHolder = document.createElement("div");
resultHolder.className = "paybutton-content";
resultHolder.id = "result";
resultHolder.innerHTML = (buttonAmount + " " + amountType + " = " + bchAmount/100000000 + " BCH");
this.modal.appendChild(resultHolder);
Being new, I dont know what to call this.
Attempting to get anything to work, I attempted to just pass all variables anywhere and Im not sure Im even close to doing this correctly.
The code I am working on is here: https://jsfiddle.net/gb8qsrzc/
And the modal original is here for reference https://jsfiddle.net/theranjitkumar/1yhthrv8/
how should I be passing variables from buttons to the modal?
EDIT: UPDATED jsfiddle (https://jsfiddle.net/3ow12Lk0/2/)

I think the issue is related to the fact that you are not passing the parameters in the constructor of the modal. i.e. :
var pbModal = new Modal({
content: pbContent,
buttonAmount: buttonAmount,
amountType: amountType,
toAddress: toAddress,
successField: successField,
successMsg: successMsg,
successCallback: successCallback,
bchAmount: bchAmount
});
pbModal.open();
You can try the code above as illustrated in the sample below.
Also, you may want to have another look at the rate/conversion calculations... they seemed incorrect to me but I am not sure what the right formula should be so I didn't try to fix that :)
// Create an immediately invoked functional expression to wrap our code
(function() {
// Define our constructor
this.Modal = function(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {
// Create global element references
this.closeButton = null;
this.modal = null;
this.overlay = null;
// Determine proper prefix
this.transitionEnd = transitionSelect();
// Define option defaults
var defaults = {
autoOpen: false,
className: 'fade-and-drop',
closeButton: false,
content: "",
maxWidth: 270,
minWidth: 250,
overlay: true
}
// Create options by extending defaults with the passed in arugments
if (arguments[0] && typeof arguments[0] === "object") {
this.options = extendDefaults(defaults, arguments[0]);
}
if (this.options.autoOpen === true){
this.open();
}
}
// Public Methods
Modal.prototype.close = function() {
var _ = this;
this.modal.className = this.modal.className.replace(" paybutton-open", "");
this.overlay.className = this.overlay.className.replace(" paybutton-open",
"");
this.modal.addEventListener(this.transitionEnd, function() {
_.modal.parentNode.removeChild(_.modal);
});
this.overlay.addEventListener(this.transitionEnd, function() {
if (_.overlay.parentNode) _.overlay.parentNode.removeChild(_.overlay);
});
}
Modal.prototype.open = function() {
buildOut.call(this);
initializeEvents.call(this);
window.getComputedStyle(this.modal).height;
this.modal.className = this.modal.className +
(this.modal.offsetHeight > window.innerHeight ?
" paybutton-open paybutton-anchored" : " paybutton-open");
this.overlay.className = this.overlay.className + " paybutton-open";
}
// Private Methods
function buildOut(buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount) {
var content, contentHolder, docFrag, resultHolder, buttonAmount, amountType, toAddress, successField, successMsg, successCallback, bchAmount;
/*
* If content is an HTML string, append the HTML string.
* If content is a domNode, append its content.
*/
if (typeof this.options.content === "string") {
content = this.options.content;
} else {
content = this.options.content.innerHTML;
}
// Create a DocumentFragment to build with
docFrag = document.createDocumentFragment();
// Create modal element
this.modal = document.createElement("div");
this.modal.className = "paybutton-modal " + this.options.className;
this.modal.style.minWidth = this.options.minWidth + "px";
this.modal.style.maxWidth = this.options.maxWidth + "px";
// If closeButton option is true, add a close button
if (this.options.closeButton === true) {
this.closeButton = document.createElement("button");
this.closeButton.className = "paybutton-close close-button";
this.closeButton.innerHTML = "×";
this.modal.appendChild(this.closeButton);
}
// If overlay is true, add one
if (this.options.overlay === true) {
this.overlay = document.createElement("div");
this.overlay.className = "paybutton-overlay " + this.options.className;
docFrag.appendChild(this.overlay);
}
// Create content area and append to modal
contentHolder = document.createElement("div");
contentHolder.className = "paybutton-content";
contentHolder.innerHTML = content;
this.modal.appendChild(contentHolder);
// Create content area and append to modal
resultHolder = document.createElement("div");
resultHolder.className = "paybutton-content";
resultHolder.id = "result";
resultHolder.innerHTML = (this.options.buttonAmount + " " + this.options.amountType + " = " + this.options.bchAmount / 100000000 + " BCH");
this.modal.appendChild(resultHolder);
// Append modal to DocumentFragment
docFrag.appendChild(this.modal);
// Append DocumentFragment to body
document.body.appendChild(docFrag);
}
function extendDefaults(source, properties) {
var property;
for (property in properties) {
if (properties.hasOwnProperty(property)) {
source[property] = properties[property];
}
}
return source;
}
function initializeEvents() {
if (this.closeButton) {
this.closeButton.addEventListener('click', this.close.bind(this));
}
if (this.overlay) {
this.overlay.addEventListener('click', this.close.bind(this));
}
}
function transitionSelect() {
var el = document.createElement("div");
if (el.style.WebkitTransition) return "webkitTransitionEnd";
if (el.style.OTransition) return "oTransitionEnd";
return 'transitionend';
}
var payButton = document.getElementsByClassName("pay-button");
for (var i = 0; i < payButton.length; i++) {
var payButtons = payButton[i];
// pull in attribute info from button when clicked
payButtons.addEventListener("click", function(event) {
var buttonAmount = this.getAttribute("amount");
var amountType = this.getAttribute("amount-type");
var toAddress = this.getAttribute("address");
var successField = this.getAttribute("success-field");
var successMsg = this.getAttribute("success-msg");
var successCallback = this.getAttribute("data-success-callback");
var bchAmount;
var test = "test message";
// check if amount type is set to bch or fiat
if (amountType === "BCH") {
bchAmount = 100000000 * buttonAmount;
} else if (amountType === "Satoshi") {
bchAmount = buttonAmount;
}
var qr = new QRious({
element: document.getElementById('qr'),
value: toAddress + "?amount=" + bchAmount,
background: 'white', // background color
foreground: 'black', // foreground color
backgroundAlpha: 1,
foregroundAlpha: 1,
level: 'M',
mime: 'image/png',
size: 250,
padding: null
});
var qrdecoded = qr.toDataURL();
var pbContent =
'<div>' + '<div>' +'<div>' +
'<div><img src="' + qrdecoded + '"></div>' +
'</div>' +
'<div>' +
'<div class="addressdiv"><span>Click QR code to Copy Address</span></div>' +
'</div>' +
'<div>' +
'<div class="amountdiv"><span>Amount = ' + bchAmount + ' BCH</span></div>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Open in BitcoinCash Wallet</span></button>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Send BCH with Badger Wallet</span></button></div>' +
'</div>' +
'<div>' +
'<div><button class="pbmodal-button"><span>Send BCH with Telecope Wallet</span></button></div>' +
'</div>' +
'<div>' +
'<div id = "result"></div>' +
'</div>' +
'</div>' +
'</div>';
var pbModal = new Modal({
content: pbContent,
buttonAmount: buttonAmount,
amountType: amountType,
toAddress: toAddress,
successField: successField,
successMsg: successMsg,
successCallback: successCallback,
bchAmount: bchAmount
});
pbModal.open();
});
}
}());
body {
font-family: Helvetica, Arial, san-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.pay-button {
border-radius: 4px;
cursor: pointer;
border: 2px solid orangeRed;
background: transparent;
position: relative;
padding: 0px;
min-width: 150px;
margin: 5px;
color: #fff;
/*For IE*/
}
.pay-button>span {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pay-button:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
z-index: -1;
}
.pay-button>span,
.pay-button:after {
background-size: 300%;
background-position: 100%;
transition: .6s, font-size 0.2s;
}
.pay-button:hover>span,
.pay-button:hover:after {
background-position: 0;
font-size: 1.1em;
color: orangeRed;
/*For IE*/
}
.pbmodal-button {
border-radius: 4px;
cursor: pointer;
border: 2px solid orangeRed;
background: transparent;
position: relative;
padding: 0px;
width: 240px;
margin: 0px 0px 10px 0px;
color: #fff;
/*For IE*/
}
.pbmodal-button>span {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(45deg, #fff 50%, orangeRed 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pbmodal-button:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(45deg, orangeRed 50%, transparent 50%);
z-index: -1;
}
.pbmodal-button>span,
.pbmodal-button:after {
background-size: 300%;
background-position: 100%;
transition: .6s, font-size .2s;
}
.pbmodal-button:hover>span,
.pbmodal-button:hover:after {
background-position: 0;
font-size: 1.08em;
color: orangeRed;
/*For IE*/
}
/* Modal Base CSS */
.paybutton-overlay {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
background: rgba(0, 0, 0, .6);
}
.addressdiv {
word-wrap: break-word;
font-size: 14px;
margin: 0px 0px 10px 0px;
}
.amountdiv {
word-wrap: break-word;
font-size: 16px;
margin: 0px 0px 10px 0px;
}
.paybutton-modal {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
text-align: center;
opacity: 0;
overflow: auto;
width: 100%;
padding: 10px 10px 15px 10px;
/*padding: 24px 20px;*/
-webkit-transition: 1ms opacity ease;
-moz-transition: 1ms opacity ease;
-ms-transition: 1ms opacity ease;
-o-transition: 1ms opacity ease;
transition: 1ms opacity ease;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
}
.paybutton-modal.paybutton-open.paybutton-anchored {
top: 20px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.paybutton-modal.paybutton-open {
opacity: 1;
}
.paybutton-overlay.paybutton-open {
opacity: 1;
}
/* Default Animation */
.paybutton-overlay.fade-and-drop {
display: block;
opacity: 0;
}
.paybutton-modal.fade-and-drop {
top: -300%;
opacity: 1;
display: block;
}
.paybutton-modal.fade-and-drop.paybutton-open {
top: 50%;
-webkit-transition: 300ms top 300ms ease;
-moz-transition: 300ms top 300ms ease;
-ms-transition: 300ms top 300ms ease;
-o-transition: 300ms top 300ms ease;
transition: 300ms top 300ms ease;
}
.paybutton-modal.fade-and-drop.paybutton-open.paybutton-anchored {
-webkit-transition: 300ms top 300ms ease;
-moz-transition: 300ms top 300ms ease;
-ms-transition: 300ms top 300ms ease;
-o-transition: 300ms top 300ms ease;
transition: 300ms top 300ms ease;
}
.paybutton-overlay.fade-and-drop.paybutton-open {
top: 0;
-webkit-transition: 300ms opacity ease;
-moz-transition: 300ms opacity ease;
-ms-transition: 300ms opacity ease;
-o-transition: 300ms opacity ease;
transition: 300ms opacity ease;
opacity: 1;
}
.paybutton-modal.fade-and-drop {
-webkit-transition: 300ms top ease;
-moz-transition: 300ms top ease;
-ms-transition: 300ms top ease;
-o-transition: 300ms top ease;
transition: 300ms top ease;
}
.paybutton-overlay.fade-and-drop {
-webkit-transition: 300ms opacity 300ms ease;
-moz-transition: 300ms opacity 300ms ease;
-ms-transition: 300ms opacity 300ms ease;
-o-transition: 300ms opacity 300ms ease;
transition: 300ms opacity 300ms ease;
}
/* Close Button */
.paybutton-close {
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 12px;
position: absolute;
top: 5px;
right: 5px;
padding: 5px 7px 7px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: #e74c3c;
}
.paybutton-close:hover {
background: #c0392b;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<button class="pay-button" amount="0.038" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.038 BCH</span>
</button>
<button class="pay-button" amount="0.1" amount-type="BCH" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>0.1 BCH</span>
</button>
<button class="pay-button" amount="10000" amount-type="Satoshi" address="bitcoincash:qpajl5cvn0fjsqs30xppuxs3uuhzfdj4ncrcfdukt3" success-field="success" success-msg="Thank you for donating!">
<span>10,000 Satoshi</span>
</button>
UPDATED
I added a second version that improves on the need to generate the code for all elements in the modal (divs, buttons, etc) every single time the buttons are clicked.
Instead, we can have a hidden div and its contents are updated on button click and adding/removing a class that hides/shows it as needed.
For OP: I worked on re-using this div but did not pay attention to the transition effects on the existing code.
A few minor tweaks are still needed for opacity and modal size, etc but I ran out of time to continue working on this part :)
UPDATE 2
Removed second approach as OP will not find it as useful (different requirements than I had anticipated)

How to set infinity time for slotmachine jquery and stop random after I click button again

Hello I want to set reeling_time to infinity and stop random after I click generate button again
var reeling_time = 500;
$('#gen').click(function() {
$('.reel-container:first').slotMachine(randGen());
});
Here is my fiddle : https://jsfiddle.net/xmenzaa/mrs93b58/24/

you can try this
....
var continue_spinning = true;
....
var stopSpinning = function() {
if (continue_spinning) {
setTimeout(stopSpinning, my_timer);
return
}
....
$('#gen').click(function() {
if (continue_spinning) {
continue_spinning = false;
$('#gen').html('Start');
}
else {
$('.reel-container:first').slotMachine(randGen());
continue_spinning = true;
$('#gen').html('Stop');
}
});
Demo:
var reeling_time = 500;
var stop_spinning_time_difference = 350;
var start_spinning_time = 0;
var currency_symbol = "$";
var continue_spinning = true;
$.fn.slotMachine = function(my_number) {
var $parentSlot = this;
var hidden_reels_html = '';
var hidden_reels_array = [];
var numberFormat = function number_format(number) {
number = (number + '');
return number;
}
for (var $j = 0; $j <= 9; $j++) {
hidden_reels_array[$j] = "";
for (var $i = 0; $i <= 9; $i++) {
hidden_reels_array[$j] += '<div class="reel-symbol' + ($i == 0 ? ' reel-loop' : '') + '">' + (($j + $i) % 10) + '</div>';
}
}
var transformNumberToArrayPlusDollar = function(my_number) {
var my_scale = parseInt(my_number, 10) > 999 ? 0 : 2;
my_number = numberFormat(my_number, my_scale, ".", ",");
var my_number_array = my_number.split('');
// my_number_array.unshift(currency_symbol);
return my_number_array;
};
//Effect for the reel to go up and then down like it is pushed to spin
var effectBeforeSpin = function() {
$parentSlot.find('.main-reel-symbol').removeClass('reel-stop').addClass('reel-begin');
};
var slotMachine = function(my_number) {
var my_number_array = transformNumberToArrayPlusDollar(my_number);
var reels_html = '';
for (var $i = 0; $i < my_number_array.length; $i++) {
reels_html += '<div class="reel">' + hidden_reels_array[($i % 10)] + '</div>';
}
effectBeforeSpin();
var startSpinning = function() {
$parentSlot.html(reels_html);
var my_timer = reeling_time;
$.each(my_number_array, function(my_index, my_value) {
var next_value = /^[0-9]$/.test(my_value) ? (parseInt(my_value, 10) + 1) % 10 : "0";
var stopSpinning = function() {
if (continue_spinning) {
setTimeout(stopSpinning, my_timer);
return
}
$parentSlot.find('.reel:eq(' + my_index + ')').html("<div class='reel-symbol main-reel-symbol reel-stop'>" + my_value + "</div>")
.append("<div class='reel-symbol'>" + next_value + "</div>");
};
setTimeout(stopSpinning, my_timer);
my_timer += stop_spinning_time_difference;
});
};
setTimeout(startSpinning, start_spinning_time);
};
slotMachine(my_number);
return this;
};
function randGen() {
var randNum = (Math.floor(Math.random() * 999) + 1).toString()
if (randNum.toString().length == 3) {
return randNum;
}
else if (randNum.toString().length == 2) {
return "0" + randNum;
}
else if (randNum.toString().length == 1) {
return "00" + randNum;
}
}
$('.reel-container:first').slotMachine('00' + 1).toString();
if (continue_spinning) {
$('#gen').html('Stop');
}
$('#gen').click(function() {
if (continue_spinning) {
continue_spinning = false;
$('#gen').html('Start');
//$('#gen').attr('disabled', true)
}
else {
$('.reel-container:first').slotMachine(randGen());
continue_spinning = true;
$('#gen').html('Stop');
}
});
#-moz-keyframes reel-loop {
from {
margin-top: 0px;
}
to {
margin-top: -480px;
}
}
#-webkit-keyframes reel-loop {
from {
margin-top: 0px;
}
to {
margin-top: -480px;
}
}
#keyframes reel-loop {
from {
margin-top: 0px;
}
to {
margin-top: -480px;
}
}
#-moz-keyframes reel-begin {
0% {
margin-top: 0px;
}
75% {
margin-top: -60px;
}
100% {
margin-top: 20px;
}
}
#-webkit-keyframes reel-begin {
0% {
margin-top: 0px;
}
75% {
margin-top: -60px;
}
100% {
margin-top: 20px;
}
}
#keyframes reel-begin {
0% {
margin-top: 0px;
}
75% {
margin-top: -60px;
}
100% {
margin-top: 20px;
}
}
#-moz-keyframes reel-stop {
from {
top: -50px;
}
to {
top: 0px;
}
}
#-webkit-keyframes reel-stop {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes reel-stop {
from {
top: -50px;
}
to {
top: 0px;
}
}
.main-container {
margin: 0 auto;
}
.reel {
width: 70px;
height: 90px;
background: #DAC290;
border: 4px solid #C7A365;
float: left;
margin-right: 10px;
}
.reel-symbol {
color: black;
font-size: 60px;
line-height: 74px;
height: 74px;
vertical-align: middle;
text-align: center;
overflow: hidden;
}
.reel-container {
height: 90px;
overflow: hidden;
position: relative;
}
.reel-loop {
-moz-animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-moz-animation-name: reel-loop;
-webkit-animation-name: reel-loop;
animation-name: reel-loop;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-moz-animation-direction: reverse;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.reel-stop {
-moz-animation-duration: 0.15s;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-moz-animation-name: reel-stop;
-webkit-animation-name: reel-stop;
animation-name: reel-stop;
-moz-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
.reel-begin {
-moz-animation-duration: 0.35s;
-webkit-animation-duration: 0.35s;
animation-duration: 0.35s;
-moz-animation-name: reel-begin;
-webkit-animation-name: reel-begin;
animation-name: reel-begin;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<!-- Range -->
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<div class="bg-img text-center">
<div class='main-container'>
<div class='reel-container'></div>
</div>
<button id="gen">Gen</button>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/range.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>

XMLHttpRequest is not working in the WordPress

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>

When using an XHR instead of a jQuery/AJAX request, I found it's actually easier and more reliable to append the action to the ajaxurl.
var xhr = new XMLHttpRequest();
var url = ajaxurl + '?action=csv_file';
xhr.open( 'POST', url, true );
The method of passing data to the request varies a bit, but 95% of the time I use a simple object to query string function:
// Convert an Object into a Query String
function objectToQueryString(obj){
return Object.keys(obj).map(key => key + '=' + obj[key]).join('&');
}
Which in practice will turn a simple data object
var data = {
'post_id': ajax_object.post_id,
'rtype': 'enr_data',
'field': element.getAttribute('data-field'),
};
into a simple query string:
post_id=1234&rtype=enr_data&field=bar
This lets me pass the data off as a string posted to the target function:
var dataString = objectToQueryString( data );
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(dataString);
For larger or more complex tasks you can actually effectively wrap the whole thing in a Promise as well, which I'll do if for instance I need to upload a handful of files and pass those along one by one for resizing.

The right solution would be to use "encodeURIComponent". Which correctly transcodes all strings and characters. The function will be:
function encodeURI(obj) {
var result = '';
var splitter = '';
if (typeof obj === 'object') {
Object.keys(obj).forEach(function (key) {
result += splitter + key + '=' + encodeURIComponent(obj[key]);
splitter = '&';
});
}
return result;
},
End then use it in your request:
var data = {
action: 'your action',
data: JSON.stringify(data)
};
let request = new XMLHttpRequest();
request.open('POST', '/wp-admin/admin-ajax.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(encodeURI(data));

Show dialog on Google Maps V3 Java Script API

In google maps Api for javaScript V3 , it's possible show dialog same as location dialog
Example:
When click some marker:
marker.addListener('click', function () {
// console.log(marcador['geo']);
mostrarInfoMarcas(marcador['user'], marcador['geo']);
});

Here is my solution,
I create the marker by OverlayView Object
So You can treat it as DIV and input the HTML content
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
var style = '';
var content = '';
if (typeof(self.args.marker_style) !== 'undefined') {
style = self.args.marker_style;
div.className = 'iot-node-'+style;
}
if (typeof(self.args.marker_content) !== 'undefined') {
content = self.args.marker_content;
var a = document.createElement('a');
var cur = this.getPosition();
a.style.backgroundColor='blue';
a.style.color = 'white';
a.style.fontSize = "3em";
a.style.textAlign= "center";
a.innerHTML = (content=="-1"?"-":content);
var sub_div = document.createElement('div');
sub_div.style.paddingLeft = '2px';
var sub_info = self.args.marker_info;
sinfo = '<BR>'+sub_info.name+'<BR>'+
'<font size=2>'+sub_info.office+'</font>';
sub_div.innerHTML = sinfo;
sub_div.className = 'showme';
sub_div.style.lineHeight= "16px";
sub_div.style.backgroundColor = 'blue';
sub_div.style.color = 'white';
a.appendChild(sub_div);
div.appendChild(a);
if(style=='info') {
var span = document.createElement('span');
span.innerHTML = 'x';
google.maps.event.addDomListener(span, "click", function(event) {
});
//a.appendChild(span);
}
}
if (typeof(self.args.marker_style) !== 'undefined' && style!='') {
var cur = this.getPosition();
var me = this;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
var point = this.getProjection().fromLatLngToDivPixel(this.getPosition());
if (point) {
if(style!='info') {
div.style.left = (point.x-20 ) + 'px';
div.style.top = (point.y-10) + 'px';
var my_info= null;
var sub = {latLng: cur, style: 'info', content: root_content.replace('[type]', style.toUpperCase()).replace('[address]', addr)};
my_info= create_node(map, sub);
nd.push(my_info);
} else {
div.style.left = (point.x - 35 ) + 'px';
div.style.top = (point.y - 60 ) + 'px';
}
}
}
}
};
CustomMarker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
this.setMap(null);
};
CustomMarker.prototype.getPosition = function() {
return this.latlng;
};
function create_node(map, node) {
return new CustomMarker(
node.latLng,
map,
{
marker_style: node.style,
marker_content: node.content,
marker_info: node.info
}
);
}
var map;
function initialize() {
var centerLat = 21.04731; //default lat
var centerLng = 105.792137; //default long
var cen = new google.maps.LatLng(centerLat, centerLng) ;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: cen,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
Draw();
}
var nd = [];
function Draw() {
var lastest_json='{"markers":[{"markerId":"1","name":"Marker1","info":"INFO1","lat":"21.04731","lon":"105.792137"}]}'
var json_dev = JSON.parse(lastest_json);
var markers = json_dev.markers;
for(var i=0; i<markers.length; i++)
{
var dev = markers[i];
var cen = new google.maps.LatLng(parseFloat(dev.lat), parseFloat(dev.lon));
var sub = {latLng: cen, style: 'info', info: dev, content: dev.markerId};
nd.push(create_node(map, sub));
}
}
google.maps.event.addDomListener(window, 'load',initialize);
.iot-node-ae, .iot-node-asn, .iot-node-adn, .iot-node-mn, .iot-node-in, .iot-node-info {
position: absolute;
list-style-type: none;
left: 20px;
top: 20px;
}
.iot-node-ae>a, .iot-node-asn>a, .iot-node-adn>a, .iot-node-mn>a, .iot-node-in>a, .iot-node-info>a {
position: relative;
z-index: 2;
display: block;
width: 20px;
height: 20px;
border-style: solid;
border-width: 2px;
border-color: #0079ff;
border-radius: 50%;
background: white;
text-align:left;
font-weight: bold;
padding-top:0px;
padding-left:0px;
padding-right:0px;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.iot-node-info>a {
width: 60px;
height: 35px;
position: relative;
border-radius: 0;
}
.iot-node-info>a>span {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a>span::hover {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a::before {
content:"";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 26px solid #0079ff;
border-bottom: 13px solid transparent;
}
.iot-node-info>a>div {
display:none;
}
.iot-node-info>a:hover > .showme{
width: 150px;
height: 70px;
background-color:white;
position:absolute;
top:-70px;
left:-45px;
border-width:2px;
border-color:#0079ff;
display:block;
}
.iot-node-ae::after, .iot-node-asn::after , .iot-node-adn::after , .iot-node-mn::after , .iot-node-in::after , .iot-node-info::after{
content: '';
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
//animation: cd-pulse 2s infinite;
}
#keyframes cd-pulse
{
0% {box-shadow:0 0 0 0 #0079ff}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
}
/* AE */
.iot-node-ae{
}
.iot-node-ae>a{
background: #ff3300;
font-size:14px;
}
.iot-node-ae::after{
//animation: cd-pulse 2s infinite;
}
/* asn */
.iot-node-asn{
}
.iot-node-asn>a{
background: #cc9900;
}
.iot-node-asn::after{
//animation: cd-pulse 2s infinite;
}
/* adn */
.iot-node-adn{
}
.iot-node-adn>a{
background: #330099;
}
.iot-node-adn::after{
//animation: cd-pulse 2s infinite;
}
/* mn */
.iot-node-mn{
}
.iot-node-mn>a{
background: #669900;
}
.iot-node-mn::after{
//animation: cd-pulse 2s infinite;
}
/* IN */
.iot-node-in{
}
.iot-node-in>a{
background: #ff9900;
font-size:14px;
}
.iot-node-in::after{
//animation: cd-pulse 2s infinite;
}
<script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
<div id="map" style="width: 100%; height: 238px; "></div>

CSS animation in firefox not working

I'm having problem with getting CSS animation work properly in firefox browser. I've tried to use the "moz" - prefix, without success.The animation works as expected in chrome, see code below.
var ss = document.styleSheets;
var rec;
var bg = document.getElementById('bg');
function getRule (name) {
var indexArr = [];
for(var i = 0; i<ss[0].cssRules.length; i++){
if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name){
indexArr.push(i);
}
}
return indexArr;
}
function swapNode(node){
tmp = node.cloneNode(false);
node.parentNode.removeChild(node);
rec = tmp;
bg.appendChild(rec);
}
function modifyRule(element, name, val){
var browser = checkBrowser();
// if(element.style.webkitAnimationPlayState === "paused")
// element.style.webkitAnimationPlayState = "running";
var indexes = getRule(name);
var rule = [];
if(indexes.length){
element.style.WebkitAnimationName = "none";
element.style.WebkitAnimationName = name;
element.style.mozAnimationName = "none";
element.style.mozAnimationName = name;
element.style.AnimationName = "none";
element.style.AnimationName = name;
swapNode(element);
if(name === "translate"){
rule[0] = "#-"+browser+"-keyframes "+name+" {"+
"0% {-"+browser+"-transform: "+name+"(0px);}"+
"50% {-"+browser+"-transform: "+name+"("+val+");}"+
"100% {-"+browser+"-transform: "+name+"(0px);}}";
rule[1] = "#keyframes "+name+" {"+
"0% {transform: "+name+"(0px);}"+
"50% {transform: "+name+"("+val+");}"+
"100% {transform: "+name+"(0px);}}";
}
else{
rule[0] = "#-"+browser+"-keyframes "+name+" {"+
"100% {-"+browser+"-transform: "+name+"("+val+");}}";
rule[1] = "#keyframes "+name+" {"+
"100% {transform: "+name+"("+val+");}}";
}
for(var i = 0; i<indexes.length; i++){
console.log(rule[i]);
ss[0].deleteRule(indexes[i]);
ss[0].insertRule(rule[i], indexes[i]);
}
}
else{
console.log('err');
}
}
function stopAnim (element) {
element.style.WebkitAnimationPlayState = "paused";
}
function checkBrowser () {
if(navigator.userAgent.indexOf("Chrome") != -1 )
{
return "webkit";
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
return "moz";
}
}
.container {
position: relative;
left: 40px;
top: 50px;
width: 240px;
height: 150px;
}
#bg {
width: 100%;
height: 90px;
background-color: #f3f3ff;
border: solid;
border-width: 1px;
}
#recBlue{
height: 50px;
width: 50px;
background-color: #aaaaff;
border: solid;
border-width: 3px;
position: absolute;
left: 35px;
top: 20px;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "bounce";
-webkit-animation-fill-mode: forwards;
-moz-animation-duration: 2s;
-moz-animation-timing-function: "bounce";
-moz-animation-fill-mode: forwards;
}
#recRed{
height: 50px;
width: 50px;
background-color: #ffaaaa;
border: solid;
border-width: 3px;
position: absolute;
left: 150px;
top: 20px;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "ease-in-out";
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
}
#btn-grp{
text-align: center;
}
#-webkit-keyframes rotate {
}
#-webkit-keyframes translate {
}
#-moz-keyframes rotate {
}
#-moz-keyframes translate {
}
<div class="container">
<div id="bg">
<div id="recBlue">
</div>
<div id="recRed">
</div>
</div>
<div id="btn-grp">
<button id="clock" onclick='modifyRule(recBlue, "rotate", "100deg");'>></button>
<button id="anticlock" onclick='modifyRule(recBlue, "rotate", "-100deg");'><</button>
<button id="move" onclick='modifyRule(recRed, "translate", "-100px")'>></button>
<button id="stop" onclick='stopAnim(recRed)'>#</button>
</div>
</div>
Any help would be appreciated!

var ss = document.styleSheets;
var rec;
var bg = document.getElementById('bg');
function getRule (name) {
for(var i = 0; i<ss[0].cssRules.length; i++){
if(ss[0].cssRules[i].name !== "undefined" && ss[0].cssRules[i].name === name)
return i;
}
}
function swapNode(node){
tmp = node.cloneNode(false);
node.parentNode.removeChild(node);
rec = tmp;
bg.appendChild(rec);
}
function modifyRule(element, name, val){
var browser = checkBrowser();
console.log(browser);
if(element.style.webkitAnimationPlayState === "paused")
element.style.webkitAnimationPlayState = "running";
var index = getRule(name);
var rule = "";
if(typeof index !== "undefined"){
element.style.WebkitAnimationName = "none";
element.style.WebkitAnimationName = name;
element.style.mozAnimationName = "none";
element.style.mozAnimationName = name;
ss[0].deleteRule(index);
swapNode(element);
if(name === "translate"){
rule = "#-"+browser+"-keyframes "+name+" {"+
"0% {-"+browser+"-transform: "+name+"(0px);}"+
"50% {-"+browser+"-transform: "+name+"("+val+");}"+
"100% {-"+browser+"-transform: "+name+"(0px);}}";
}
else{
rule = "#-"+browser+"-keyframes "+name+" {"+
"100% {-"+browser+"-transform: "+name+"("+val+");}}";
console.log(rule);
}
ss[0].insertRule(rule, index);
}
else{
console.log('err');
}
}
function stopAnim (element) {
element.style.WebkitAnimationPlayState = "paused";
}
function checkBrowser () {
if(navigator.userAgent.indexOf("Chrome") != -1 )
{
return "webkit";
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
return "moz";
}
}
.container {
position: relative;
left: 40px;
top: 50px;
width: 240px;
height: 150px;
}
#bg {
width: 100%;
height: 90px;
background-color: #f3f3ff;
border: solid;
border-width: 1px;
}
#recBlue{
height: 50px;
width: 50px;
background-color: #aaaaff;
border: solid;
border-width: 3px;
position: absolute;
left: 35px;
top: 20px;
animation-duration: 2s;
animation-timing-function: "bounce";
animation-fill-mode: forwards;
animation-name:translate;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "bounce";
-webkit-animation-fill-mode: forwards;
-webkit-animation-name:translate;
}
#recRed{
height: 50px;
width: 50px;
background-color: #ffaaaa;
border: solid;
border-width: 3px;
position: absolute;
left: 150px;
top: 20px;
animation-duration: 2s;
animation-timing-function: "ease-in-out";
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name:rotate;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: "ease-in-out";
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name:rotate;
}
#btn-grp{
text-align: center;
}
#-webkit-keyframes rotate {
}
#-webkit-keyframes translate {
}
#keyframes rotate {
}
#keyframes translate {
}
<div class="container">
<div id="bg">
<div id="recBlue">
</div>
<div id="recRed">
</div>
</div>
<div id="btn-grp">
<button id="clock" onclick='modifyRule(recBlue, "rotate", "100deg");'>></button>
<button id="anticlock" onclick='modifyRule(recBlue, "rotate", "-100deg");'><</button>
<button id="move" onclick='modifyRule(recRed, "translate", "-100px")'>></button>
<button id="stop" onclick='stopAnim(recRed)'>#</button>
</div>
</div>
You are not define animation name -webkit-animation-name:rotate; and animation-name:rotate;.
Hope it will helps you.

Problem solved, it was the wrong syntax of animationname.
element.style.MozAnimationName = "none";
element.style.MozAnimationName = name;
element.style.animationName = "none";
element.style.animationName = name;
Is correct.