We Keep Coding

Click not triggered on Javascript function that submits to Facebook Pixel

The following code tracks the number of clicks on the element and then submits the result to Facebook Pixel. However, the event is not triggered for some reason.
Thought it's a variable scope problem, changed countClicks to global but it didn't change anything.
$(document).ready(function () {
if(window.location.href.indexOf("products") > -1) {
var countClicks = 0;
$(".product-single__thumbnail-image").click(function () {
countClicks++;
});
function firePixelSlideshowView() {
fbq('trackCustom', "ProductSlideshowImageView", {
imageView: countClicks,
});
}
window.onbeforeunload = function () {
firePixelSlideshowView();
return null;
}
}
});

I solved the problem by using jQuery unload() function instead of vanilla Javascript and it worked.

How to get current object you working with

I need to process an AJAX request twice, first, when the site has been opened first time, and second, when a button is clicked. I dont want to write 2 similar functions. So I created an ajaxPost function. I wonder how to detect what event has called the ajaxPost function? opening the browser or clicking a button?
function ajaxPost() {
url = "post.php";
if (this!=Window) {
button = $(this).attr("class");
} else {
button = "";
}
var posting = $.post(url,{"button": button});
posting.done(function(data) {
$(".word").html(data);
});
}
$(document).ready(function() {
ajaxPost();
$("input[type=button]").click(ajaxPost);
});

Check for the jQuery event that you're passing with a click.
function ajaxPost(event) {
url = "post.php";
if (event == undefined || event == null) { //Was not generated by a user click
button = $(this).attr("class");
} else {
button = "";
}
var posting = $.post(url,{"button": button});
posting.done(function(data) {
$(".word").html(data);
});
}
$(document).ready(function() {
ajaxPost();
$("input[type=button]").click(ajaxPost);
});

A simple solution would be to include an additional parameter when calling the function:
function ajaxPost( caller ) {
switch( caller ){
case "initial_load":
// called on page load
break;
case "button_click":
// called on button click
break;
}
...
}
Now you would need to pass this parameter from the two different types of calls:
$(document).ready(function() {
ajaxPost( "initial_load" );
$("input[type=button]").on( "click", function(){
ajaxPost( "button_click" );
});
});

Not using correctly javascript setTimeout / clearTimeout?

I have problem with simple javascript and some ajax.
I have link that calls javascript function like this:
<div id="Button11" onmouseover="changeContent4()">Actions</div>
Javascript function that is called above is like this:
function changeContent4()
{
BubbleOn()
document.getElementById("text1").innerHTML='Some text here';
clearTimeout(BOffi);
var BOffi = setTimeout(BubbleOff, 20000);
}
This works, it runs BubbleOn function, places text to element text1, most likely it empties BOffi timeout and sets new timeout 20000ms for it.
Here is BubbleOn:
function BubbleOn() {
$("#bubble").fadeIn(function() {
})
}
And here is BubbleOff:
function BubbleOff() {
$("#bubble").fadeOut(function() {
})
}
As in functions BubbleOn and BubbleOff works. They just hide or show div named bubble which contains text1 element. When BOffi goes timeout it just runs the BubbleOff function. This works fine. The problem is that when BubbleOff has been run and mouse is placed immediately over link that runs changeContent4(), It does make the bubble div visible again and places text there again but then bubble div fades out inside a second! Not after 20000ms. After this if the mouse is placed again to run changeContent4() everything works great. If there is about millisecond longer time than a second between the bubble fadeout and placing the mouse over changeContent4() launcher it works and waits 20000ms. Less than a second and bubble is shown about second...
What can cause this? Could it be that fadeOut is still running even the bubble is vanished from the screen and therefore it does not reset the BOffi counter? Which could have 1 second or less time left and then runs BubbleOff again after that magical second?

Two ideas to try:
put "clearTimeout(BOffi);" at the top of the function before "BubbleOn();".
declare BOffi as a global variable.
So:
var BOffi;
function changeContent4()
{
clearTimeout(BOffi);
BubbleOn();
document.getElementById("text1").innerHTML='Some text here';
BOffi = setTimeout(BubbleOff, 20000);
}
or you can use window.BOffi instead.

At a first glance I notice this var BOffi = setTimeout(BubbleOff, 20000);. This creates a local variable. After the function is executed, is lost. Second time function is called Boffi is some random residual value.
Make it global and you should be ok (remove var).

function BubbleOn() {
$("#bubble").fadeIn(function(){},1000)
}
function BubbleOff() {
$("#bubble").fadeOut(function() {},1000)
}
You should set duration for both fadeIn and fadeOut functions.

Because the animations are queued but your script keep running, try this one :
function changeContent4()
{
bubble(function(){
document.getElementById("text1").innerHTML='Some text here';
});
}
var fadeTimeout = null;
function bubble(callback) {
if(fadeTimeout==null)
$("#bubble").fadeIn(1000, function(){
if($.isFunction(callback))
callback();
fadeTimeout = setTimeout(bubbleOff, 20000);
});
}
function bubbleOff() {
$("#bubble").fadeOut(1000, function(){
fadeTimeout =null;
});
}
Fiddle here
You might wanna move the callback() call before the fadeIn as you are modifying the text inside the bubble but that exemple is just to let you see the order of every changes
EDIT : now allowing multiple call
var i = 0;
function changeContent4() {
bubble(function () {
$("#text1").text('Some text here ' + (i++));
});
}
var fadeTimeout = null;
function bubble(callback) {
if ($.isFunction(callback)) callback();
if (fadeTimeout == null) {
$("#bubble").fadeIn(1000, function () {
fadeTimeout = setTimeout(bubbleOff, 20000);
});
} else {
clearTimeout(fadeTimeout);
fadeTimeout = setTimeout(bubbleOff, 20000);
}
}
function bubbleOff() {
$("#bubble").fadeOut(1000, function () {
fadeTimeout = null;
});
}
FIDDLE

Repetitive javascript call. can not disable

I use a JavaScript function to change the page when a function is clicked. An ajax call is made inside the function.
As the browser is slow. If I click more than one time on the button before the page changes (AJax div load. Page actually not changed), an ajax call is made for each click.
I used the following method to prevent. But even it is called many times. How can I prevent it?
var isClicked = function() {}
isClicked.init = function() {
this.clicked = false;
}
function myAjaxFunction {
//some statements
if(isClicked.clicked == 'undefined')
isClicked.clicked = false;
if(isClicked.clicked)
return false;
isClicked.clicked = true;
// my ajax call here
isClicked.clicked = false;
//some statements
}

var isClicked = false;
function AjaxFunction(){
if(isClicked){
return false;
}
// Set your variable.
isClicked = true;
// Do yourAjaxCall and use isClicked = false in the callback of that function.
}

javascript - ignore timeout on click

I have a slideshow which works fine, leaving a 3 second gap between images.
I also have a set of dynamically generated links which when clicked on, the next image is corresponds to that link.
What I want to do is skip the 3 second time out when one of these links is clicked - then restart the timeout after the image is changed.
Code below:
$(document).ready(function() {
var images=new Array();
var totalimages=6;
var totallinks=totalimages;
var nextimage=2;
while (totallinks>0) {
$(".quicklinks").prepend("<a href='#' class='"+(parseInt(totallinks))+"' onclick='return false'>"+(parseInt(totallinks))+"</a> ");
totallinks--;
}
function runSlides() {
if(runSlides.opt) {
setTimeout(doSlideshow,3000);
}
}
function doSlideshow()
{
if($('.myImage').length!=0)
$('.myImage').fadeOut(500,function(){slideshowFadeIn();$(this).remove();});
else
slideshowFadeIn();
}
function slideshowFadeIn()
{
if(nextimage>=images.length)
nextimage=1;
$('.container').prepend($('<img class="myImage" src="'+images[nextimage]+'" style="display:none;">').fadeIn(500,function() {
runSlides();
nextimage++;
}));
}
if(runSlides.opt) {} else {
images=[];
totalimages=6;
while (totalimages>0) {
images[totalimages]='/images/properties/images/BK-0'+parseInt(totalimages)+'.jpg';
totalimages--;
}
runSlides.opt = true;
runSlides();
}
$(".quicklinks a").live('click', function() {
nextimage=$(this).attr("class");
});
});

You can stop a timeout using this code:
var t = setTimeout(myFunction,3000);
clearTimeout(t);
Using this, you can abort your timeout when the user clicks the button and call the function directly. Then you can restart the timeout.
Hope this helps.