We Keep Coding

WP Heartbeat API in Vanilla JS (addEventListener for custom events)

Why following code written in jquery works great, but when I try to use it with vanilla js then it’s not working.
Here is WP Heartbeat API code - https://github.com/WordPress/WordPress/blob/master/wp-includes/js/heartbeat.js
jQuery(document).ready( function($) {
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
});
jQuery(document).ready( function($) {
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
});
jQuery(document).ready( function($) {
var event = new Event('heartbeat-tick');
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
window.dispatchEvent(event);
});

Your document event is not firing because you are dispatching the event on the window. Call document.dispatchEvent to dispatch it to the document.
jQuery(document).ready(function($) {
var event = new Event('heartbeat-tick');
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from document');
});
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from window');
});
console.log('window');
window.dispatchEvent(event);
console.log('document');
document.dispatchEvent(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

mbox - firing 3 times instead of once

I have this code snippet I'm using to define some tracking on my site - however it appears to be firing the "QuickViewAddToCartClicked" 3 times in stead of once.
I've spent an hour logically trying to think through what is causing this.
Any ideas would be greatly appreciated!
Thanks.
Please see my code below:
<script>
$( document ).ready(function() {
$( ".quickview_btn" ).click(function() {
var quickview_url = $(this).attr("href");
var qvURL = $(this).attr("href");
$(".quickview_btn").colorbox({
href: qvURL,
opacity: 0.6,
onComplete: function(){
$( ".qlBtns" ).click(function() {
mboxDefine('dynamicElement5', 'QuickViewAddToCartClicked');
mboxUpdate( 'QuickViewAddToCartClicked', 'Clicked=Yess');
});
}
});
mboxDefine('dynamicElement', 'QuickViewPLPclicked');
mboxUpdate( 'QuickViewPLPclicked', 'paramURL='+quickview_url);
});
});
</script>

JavaScript failing on page postback

I have got this script to give effects to buttons which i have, it fails after the page is posted back, i have also put the code in a pageLoad method yet it still does not function. any idea how i can go about making this script run once the page has loaded.
$(document).ready(function () {
/*preloader for image loading bar*/
jQuery(function ($) {
function preLoad() {
//alert("script running");
$("#divQuestionMatrix").addClass("hidden");
}
function loaded() {
$("#divQuestionMatrix").removeClass("hidden");
$('div#preLoader').css({ display: 'none' }).remove();
}
preLoad();
window.onload = loaded;
});
/* End of preloader*/
$("#btnPrevious").click(function (e) {
$("#navigation").val("previous");
}
);
$("#btnNext").click(function (e) {
$("#navigation").val("next");
}
);
/* $(".qmatrix").click(function () {
//get id of button
alert($(this).attr('id'));
$("#navigation").val($(this).attr('id'));
}
);*/
$(".qmatrix").hover(function (e) {
//get id of button
//alert($(this).attr('id'));
//get src of image before hover
var origimage = $(this).attr('src');
// alert(origimage);
//$(this).attr({ src: 'images/questionMatrix/100' + $(this).attr('id') + '.png' });
$(this).stop().animate({ "opacity": "0.1" }, "fast")
},
function () {
// $(this).attr({ src: '' + origimage.toString() + '' });
$(this).stop().animate({ "opacity": "1" }, "fast");
}
);

The document.ready event is fired once the page has finished loading.
Inside the handler for the ready event, you're then using the ready event shortcut (passing a function directly to the global jQuery function (which is the same as the global $ function btw) to add another handler function for the ready event.
Inside this second ready handler you're then trying to assign the loaded function to window.onload, which would have already fired by this point.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Put this Latest Jquery Library Just just above to your document.ready() function and try to run your program.

Run javascript function only once

I have this simple javascript function:
<script type="text/javascript">
var popup = '0';
if(popup == '0') {
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
popup = '1';
});
});
}
</script>
<button class="button">Test</button>
I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1

What you need is .one() function. It makes sure the code is triggered only once for you.
Docs: http://api.jquery.com/one/
Docs example:
$( "#foo" ).one( "click", function() {
alert( "This will be displayed only once." );
});

Write the code as follows:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
popup = '1';
}
});
});
</script>
Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.
Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
//unbinds *all* listeners previously registered on "document"
$(document).unbind('click');
});
});
</script>
Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.

Try:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
}
popup = '1';
});
});
</script>
You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.

Trying to Load Page on Load instead of click

I'm using this code:
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
/* Content is now loaded */
ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
});
});
});
along with this:
<li>HELP</li>
To load pages when the link is clicked.
I would like to know how do I add to the current script so that I can load a page the minute the page loads up, while keeping it working the way it already is? I'd like to load a page named "Homepage.html"

This should do it:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html');
});
</script>
Or if you still need that callback:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html', function() {
ThumbnailScroller('tsv_container','vertical',10,800,'easeOutCirc',0.4,500);
});
});
</script>