Develop Reference

wordpress javascript error in functions.php

i am trying to make a checkout page with wp-invoice and a custom booking page.
Here is the code i put into my functions.php
function paypalpayment() {
global $wpdb;
$user = wp_get_current_user();
$user_ID = $user->ID;
$shortcode = $wpdb->get_row("SELECT MAX(ap.pending) AS pending, ap.book_datetime, ap.id, ap.hash FROM ea_appointments AS ap "
."INNER JOIN ea_users AS us ON ap.id_users_customer = us.id "
."WHERE us.wp_id ='".$user_ID."'");
$html = '';
if ($shortcode->pending == ''){
$html .= '<h1>Processing Error: Appointment has been deleted. </h1>';
$html .= '<p align="center"><a class="fep-button" style="width: 195px; text-align: center;" href="http://lectiotutoring.co.za/EasyBlue" /> Schedule an appointment</a></p>';
} else {
$html .= '<h2>Fee Policy</h2>';
$html .= '<p>You may reschedule an appointment without charge within 24 hours of your appointment. Cancelation of an appointment within 24 hours can either result in a refund or a credit for your next appointment per your request. You will need to inform Lectio Tutoring on the discussion board about how you would like your cancelation to be handled. If you would like a refund, refunds will be the full amount of the cost of your session minus the PayPal processing fees. There are no refunds for cancelations later than 24 hours in advance. <span class="bigger"><b>If payment is not completed within 10 minutes the appointment will be deleted.</b></span></p>';
date_default_timezone_set('Africa/Johannesburg');
$refreshtime = strtotime($shortcode->book_datetime) - strtotime("-10 minutes");
$html .= '<meta http-equiv="refresh" content="';
$html .= $refreshtime;
$html .= '">';
$html .= '<style>
ul.wpi_checkout_block.wpi_checkout_billing_address {
display: none;
}
ul.wpi_checkout_block.wpi_checkout_customer_information {
display: none;
}
ul.wpi_checkout_block.wpi_checkout_billing_information {
display: none;
}
.wpi_checkout_submit_btn.btn.btn-success.wpi_checkout_process_payment.wpi_paypal {
margin: -1px;
}
input {
margin-top: 10px;
width: 130px;
}
form.wpi_checkout .total_price {
top: 1px;
}
.loader {
border: 4px solid #f3f3f3;
border-radius: 50%;
border-top: 4px solid #3498db;
width: 30px;
height: 30px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
div#spinner {
margin-left: 160px;
position: absolute;
}
input#stepone {
position: absolute;
margin-top: -2px;
padding: 0px;
}
.bigger {
font-size:125%;
}
</style>';
$html .= '<input type="button" id="stepone" onclick="processpaypal()" value="Process Payment">';
$html .= '<div id="spinner" class="loader" style="display:none"></div>';
$html .= do_shortcode($shortcode->pending);
$html .= '<input type="button" onclick="deletapt()" value="Delete Apt.">';
$html .= '<script>
cancelurl = "http://lectiotutoring.co.za/EasyBlue/index.php/appointments/cancel/' . $shortcode->hash . '";
function deletapt(){
window.location = cancelurl;
}
jQuery(document).ready(function($) {
$("input[name=return]").val("http://lectiotutoring.co.za/payment-success/");
$("input[name=cancel_return]").val(cancelurl);
});
jQuery(document).ready(function($) {
function processpaypal($){
$("#spinner").css("display","block");
$("#stepone").css("display","none");
setTimeout(
function()
{
$(".wpi_checkout_submit_btn").click();
}, 250);
}
});
</script>';
}
return $html;
}
add_shortcode("paypalpay", "paypalpayment");
when i look for errors in my console it shows Uncaught ReferenceError: processpaypal is not defined in this area $html .= '<div id="spinner" class="loader" style="display:none"></div>';
I have converted my jquery to be compatible with wordpress but it does not seem to be working as i get that error as said above, what would be the problem? have i converted my js wrong in this area jQuery(document).ready(function($) {
function processpaypal($){

...comment are not enought i guess
Make your processpaypal function global, move it outside of the document ready. Learn more about scope here
To resolve $ conflict in wordpress, you do this.
a.
var $ = jQuery; // make sure to make it global
b.
//using jQuery instead of $ like so, (like you did it here jQuery(document))
function processpaypal(){
jQuery("#spinner").css("display","block");
jQuery("#stepone").css("display","none");
setTimeout(
function()
{
jQuery(".wpi_checkout_submit_btn").click();
}, 250);
}
Also consider this recommendations:
it's better to use separate css and js files instead of making it inline.
Create separate template file with your html output and include it using output buffering inside your function
date_default_timezone_set('Africa/Johannesburg'); you can put this at the beginning of your functions.php and this function will set timezone globaly for the whole file. reference

setTimeout(function() is not working in javascript

I am currently working to create a custom alert box for any errors and below is the code I am using, the alert box is appearing fine but it's not auto-closing after 600 milliseconds, its only closed after the manual click of the close button. what I am doing wrong here and how to auto-disappear the alert box

I moved the setTimeout outside the click event and set the div value:
function displayError(errorMessage) {
var messageObject = "<div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
document.getElementById("divMessageContainer").innerHTML += messageObject;
var close = document.getElementsByClassName("closebtn");
var i;
for (i = 0; i < close.length; i++) {
var div = close[i].parentElement;
setTimeout(function(){div.style.display = "none"; }, 600);
close[i].onclick = function(){
div.style.opacity = "0";
}
}
}
div#alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>
</body>
</html>

I have followed the below steps and fixed the issue reported here, The below approach allowed me to show multiple alert box at the same time and auto close them based on the message number instead of close all the alert box at the same time
<!DOCTYPE html>
<html>
<style>
div.alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}
</style>
<body>
<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>
</body>
<script>
var messageCount = 0;
var messageTimeout = 3000;
function displayError(errorMessage) {
var messageObject = "<div class='alertbox' id='alertbox"+messageCount+"'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
document.getElementById("divMessageContainer").innerHTML += messageObject;
var messageID = messageCount;
setTimeout(function(){removeElement("alertbox" + messageID); }, messageTimeout);
closeAlertbox();
}
function removeElement(id) {
if (document.getElementById(id)) {
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
}
function closeAlertbox() {
var close = document.getElementsByClassName("closebtn");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function()
{ div.style.display = "none";
}, 10);
}
}
}
</script>
</html>

I would recommend using remove() to remove the alertbox, so there won't be any closebuttons left and the for-loop can be removed.
Maybe this would be a possible solution:
function displayError(errorMessage) {
var messageObject = "<div id='moo' class='alert alert-danger alert-dismissible' role='alert' auto-close='2000'><div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>";
var container = document.getElementById("divMessageContainer");
container.innerHTML += messageObject;
var box = document.getElementById("alertbox");
var close = document.querySelector(".closebtn");
close.onclick = function(){
box.remove();
};
setTimeout(function(){
box.style.opacity = 0;
setTimeout(function() {
box.remove();
}, 1000);
}, 2000);
}
div#alertbox{padding: 10px;bottom: 40px;left: 5px; max-width: 800px; margin-left: auto;margin-right: auto;z-index: 99; max-width: 700px; color: #000;background-color: #EEE;border-radius: 10px; padding-right: 5px; padding-left: 10px; -webkit-transition: opacity 1s linear;}
span#closebtn {margin-left: 15px;color: black;font-weight: bold;float: right;font-size: 22px;line-height: 20px; cursor: pointer; transition: 0.3s;}
<div id="divMessageContainer"></div>
<button onclick="displayError()">button</button>
I also added a transition to opacity, so if the user doesn't manually close the alertbox, it will fade (in this case after 2 seconds, but you can play with that time).

function displayError(errorMessage) {
var messageObject = "<div id='moo' class='alert alert-danger alert-dismissible' role='alert' auto-close='2000'><div class='alert' id='alertbox'><span class='closebtn' id='closebtn'>×</span><strong><font color='#f44336;'>Error!</font></strong>"+errorMessage+"</div>"
document.getElementById("divMessageContainer").innerHTML += messageObject;
var close = document.getElementsByClassName("closebtn");
var i, index;
for (i = 0; i < close.length; i++) {
setTimeout(function(){
close[index].parentElement.style.display = "none";
index++;
}, 600);
close[i].onclick = function(){
var div = this.parentElement;
div.style.display = "none";
}
}
}
Try this one. Take care about loop when using async.

Onclick javascript function doesn't work on first click

I've wrote a code to hide/show a div by clicking on a "p" element, but at first click nothing happens.
Only from 2nd click the code works as expected.
I've read some similar questions and I've understood that it's probably a style problem.
So I've tried to change style (without really knowing what I was doing) but I wasn't lucky.
I've also another problem: the "p" element sometimes covers an input and I've not understood how to have it on the bottom right of the div but below every other element.
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:absolute;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
}
.Fields {
clear: both;
border: 1px solid #CCC;
display: inline-block;
margin:3px;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs = array('Div1'=>'Class1',
'Div2'=>'Class1',
'Div3'=>'Class1',
'Div4'=>'Class1',
'Div5'=>'Class1');
$AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
foreach ($Divs as $Name=>$Class){
echo '
<div class="'.$Class.'">';
echo $Name.'<br/>';
foreach ($AskToShow as $I_Name=>$Id){
echo '
<label>'.$I_Name.'</label>
<input type="text" id="'.$Id.'" class="Fields"/>';
}
echo '
<p id="Btn_Opt'.$Name.'" class="Class2" >Mostra campi opzionali</p>';
echo '
<div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
foreach ($AskToShow as $H_Name=>$Id){
echo'
<p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
}
echo '
</div>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
if (SubSH.style.display == 'none'){
SubSH.style.display = 'inline-block';
}else{
SubSH.style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>

The thing is that when you do SubSH.style.display you are checking only inline style so something which is inn <your-tag style='...'/> but you have it in your stylesheet so it is not accessible by this method. try to change your function a bit - for example
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
var style = window.getComputedStyle(SubSH);
if (style.display == 'none'){
SubSH.style.display = 'inline-block';
}else{
SubSH.style.display = 'none';
}
};
by using window.getComputedStyle(SubSH); you are checking style which is aware of all your classes and csses

Please find the working code below
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:relative;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
display: inline-block;
float:right;
}
.Fields {
clear: both;
border: 1px solid #CCC;
display: inline-block;
margin:3px;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<h2>My test</h2>
<?php
$Divs = array(
'Div1' => 'Class1',
'Div2' => 'Class1',
'Div3' => 'Class1',
'Div4' => 'Class1',
'Div5' => 'Class1'
);
$AskToShow = array(
"Field1" => "1.1.1",
"Field2" => "1.2.1",
"Field3" => "1.3.1"
);
foreach ($Divs as $Name => $Class) {
echo '
<div class="' . $Class . '">';
echo $Name . '<br/>';
foreach ($AskToShow as $I_Name => $Id) {
echo '
<label>' . $I_Name . '</label>
<input type="text" id="' . $Id . '" class="Fields"/>';
}
echo '
<div id=Opt' . $Name . ' name="Opt' . $Name . '" class="Opt" >';
foreach ($AskToShow as $H_Name => $Id) {
echo '
<p id="H_' . $Id . '" class="H_p">' . $H_Name . '</p>';
}
echo '
</div>';
echo '
<div style="clear:both;"></div>';
echo '
<p id="Btn_Opt' . $Name . '" class="Class2" >Mostra campi opzionali</p>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
var SubSH = document.getElementById(SubId);
if (window.getComputedStyle(SubSH, null).display == 'none'){
SubSH.style.display = 'inline-block';
} else {
SubSH.style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>

Angularjs $compile(html)($scope) - Error: Converting circular structure to JSON

I have an app where I need to create html and add it to an object array. This html should then be outputted into page. Simple enough. However, I also need to make the html responsive to user actions (click) in which case angular requires me to use $compile to create an angularized template.
See the Plunkr. In this example, what should happen is that when you click on one of the buttons, a popup is generated with the html code embedded in the object, which you can see in the JSON output.
As soon as I do this, I get the error Converting circular structure to JSON. If I don't, the ng-click="Go()" is not called.
SCRIPT
var template = "<ul class='unstyled'>" +
"<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
"<li ng-click='go()'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
"<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
"</ul>";
// template = $compile(template)($scope);
$scope.data = [
{"id": 1, "html": template},
{"id": 2, "html": template}
];
$scope.go = function () {
alert('It works');
};
$scope.openPopin = function (html) {
var e = window.event;
var popin = document.getElementById('popin');
var innerdiv = document.getElementById('innerdiv').innerHTML=html;
popin.style.top= e.pageY - 20+"px";
popin.style.left = e.pageX - 20+"px";
popin.style.marginLeft = -500+"px";
popin.style.marginTop = -100+"px";
};
$scope.closePopin = function () {
var popin = document.getElementById('popin');
popin.style.top = -500+"px";
popin.style.left = -500+"px";
};
HTML
<div class="popin grey-border" id="popin">
<button class="close" ng-click="closePopin()">×</button>
<div id="innerdiv"></div>
</div>
<pre>{{ data |json }} </pre>
<br/>
<table style="float: right;">
<tr ng-repeat="d in data" id="{{$index}}">
<td>{{ d.id }} -
<button class="btn btn-mini btn-info" ng-click="openPopin(d.html)"><i class="icon-info-sign"></i></button>
</td>
</tr>
</table>

I got it to work (for me) by moving the compile step to the openPopin function, and replacing the style-property changes with a more angular alternative. And I'm also ignoring the window.event which is not cross-browser compatible (and not part of the issue).
app.controller('MainCtrl', function($scope, $compile) {
var template = "<ul class='unstyled'>" +
"<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
"<li ng-click='go()'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
"<li ng-click='go()' style='background-color:lightcyan;'><ul class='inline'><li>1...</li><li>1...</li></ul></li>" +
"</ul>";
$scope.data = [
{"id": 1, "html": template},
{"id": 2, "html": template}
];
$scope.go = function () {
console.log("go");
};
$scope.openPopin = function (html) {
var popin = document.getElementById('popin');
var innerdiv = document.getElementById('innerdiv');
innerdiv.innerHTML=html;
$compile(innerdiv)($scope);
angular.element(popin).css({top:'20px', left:'20px'});
};
$scope.closePopin = function () {
var popin = document.getElementById('popin');
angular.element(popin).css({top:'-500px', left:'-500px'})
};
});
So, that's one way to get it working. But the question is, what are you really trying to do, and can't we do it in a more angular way? (Using directives, templates and other tools angular provides.)

Thanks towr for your help - see the last comment above
HTML
<script type="text/ng-template" id="cmpbpopin.html">
<button class="btn btn-mini btn-info"><i class="icon-info-sign"></i></button>
<div class="popin grey-border">
<button class="close-button">×</button>
<div></div>
</div>
</script>
<table style="float: right;">
<tr ng-repeat="d in data" id="{{$index}}">
<td>{{ d.id }}</td>
<td>
<div cm-pb-popup="d.html"></div>
</td>
</tr>
</table>
</body>
SCRIPT
var app = angular.module('app', []);
app.controller('Ctrl', function ($scope, $compile, $http) {
var template = "<table class='pblist table table-condensed table-hover'>" +
"<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
"<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
"<tr ng-click='go()'><td>1...</td><td>1...</td></tr>" +
"</table>";
$scope.data = [
{"id": 1, "html": template},
{"id": 2, "html": template}
];
});
app.directive("cmPbPopup", function ($compile, $timeout) {
return{
templateUrl: "cmpbpopin.html",
scope: {
cmPbPopup: "="
},
link: function (scope, elem, attrs) {
elem.bind("click", function (e) {
var popupDiv = elem.find('div');
var innerDiv = popupDiv.find('div');
var closeButton = popupDiv.find('.close-button')
if (e.srcElement.nodeName != 'DIV') {
if (e.srcElement.className == 'close-button') {
closePopup();
} else if(e.srcElement.nodeName == 'TR' || e.srcElement.nodeName == 'TD'){
// set values in scope
closePopup();
}
else {
innerDiv.html(scope.cmPbPopup);
$compile(innerDiv)(scope);
popupDiv.css({
'top': e.pageY - e.offsetY + 20,
'left': e.pageX - e.offsetX -10,
'height': 100,
'width': 500,
'marginLeft': -500});
$timeout(function (){
closeButton.css('display', 'block');
},500);
}
}
function closePopup(){
popupDiv.css({
'height': 0,
'width': 0,
'marginLeft': 0});
$timeout(function (){
popupDiv.css({
'top': -500,
'left': -500
});
},500);
}
});
}
}
})
CSS
div.popin {
position: absolute;
width: 0;
height: 0;
top: -500px;
left: -500px;
background-color: #ffffff;
transition: width 0.5s, height 0.5s, margin-left 0.5s;
-webkit-transition: width 0.5s, height 0.5s, margin-left 0.5s; /* Safari */
overflow: hidden;
}
div.popin div {
position: absolute;
top: 0 !important;
left: 500px !important;
width: 470px !important;
transition: width 0.2s, height 0.2s, margin-left 0.2s;
-webkit-transition: width 0.2s, height 0.2s, margin-left 0.2s;
}
.close-button{
width: 20px;
height: 20px;
float: right;
font-size: 20px;
font-weight: bold;
line-height: 20px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
}
.pblist{
margin-left: 10px !important;
margin-top: 10px;
width: 470px;
float: left;
}
.grey-border {
border: 1px #d3d3d3 solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px;
}

dynamic sequence boxes logic using prepend

http://jsfiddle.net/2UAqW/4/
var counter = 1;
$('#add').click(function(){
var value = ++counter;
var myHtml = "<div id='boxFirst'>" + value +"</div>";
$(myHtml).appendTo("#boxFirst");
});
I want to achieve something like this:

Here is a full working example:
http://jsfiddle.net/DNR7R/
Code :
var counter = 1;
$('#add').click(function(){
var value = ++counter;
var myHtml = "<div id='box"+value+"' class='box'>" + value +"</div>";
$(myHtml).insertAfter("#box"+(value - 1));
});
The counter var wasn't initialized. I changed var value = counter++; to var value = ++counter; in order for the value variable to have the already incremented value.
ID were changed to be unique. I concat the value to get id like box1, box2, box3...
In order to be able for your div to put them as you want, I added display: inline-block and float:left properties to them. For css, i put on them all the same class box.
I also remove the #add div css to treat it as an other div.

Try this out:- http://jsfiddle.net/adiioo7/2UAqW/3/
JS:-
var counter=2;
$('#add').click(function(){
var value = counter++;
var myHtml = "<div class='boxFirst'>" + value +"</div>";
$("#wrap").append(myHtml);
});
HTML:-
<div id="wrap">
<div class="boxFirst">1</div>
</div>
<div id="add">+</div>
CSS:-
#wrap{
background-color:#eee;
width: 200px;
height 800px;
}
.boxFirst{
width: 100px;
height: 100px;
background-color:blue;
text-align: center;
color: #fff;
position: relative;
float:left;
}
#add{
width:40px;
height: 40px;
text-align: center;
color: #fff;
background-color:red;
float: right;
margin:40px 40px 0 0;
}