JQuery location.href - events tracking - javascript

I've an offers page with many offers. Client wants to add tracking script to a one particular offer and track clicks on several buttons i.e. "More info", "Share it" and "Buy it".
I want to use the following:
if (window.location.href == "www.ddd.xx/theoffer") {
if $( "#target" ).click(function() { // run tracking script }
else if $( "#second_target" ).click(function() { // run another tracking script}
else if $( "#third_target" ).click(function() { // run another tracking script } };
does it look ok?
I will highly appreciate ur help!
BR,
Newbie

I am wondering if you are tracking your target page or current page.window.location.href means your current page url, or you can set it to jump to another page.
But no matter which page are you tracking, you should bind the click function with buttons first.
For current page, you can bind like this:
$( "#target" ).click(function() { // run tracking script });
$( "#second_target" ).click(function() { // run another tracking script});
$( "#third_target" ).click(function() { // run another tracking script});
This function are callbacks and wont run the tracking directly.It will only be triggered after you clicked the right button.
If you have a lot of buttons to do some similar work, seems you can add class="track_button" to all the <button>s, and bind like this:
$(".track_button").click(function(){
if (window.location.href == "www.dd/xx/the_offer") {
var curId = $(this).attr("id");
if(curId == "target"){
//do tracking 1
}
else if(....){
//do tracking n....
}
}
});

Related

jquery and Jplist jquery plugin table data with many pages

$( '#list' ).on( "click", ".list-item", function( event ) {
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
$('.list-item').not($this).removeClass('selected');
});
Hello, I have a problem with the line $('.list-item').not($this).removeClass('selected'); which doesn't work for div present in another pages when navigated. thank you for your help.
I don't know that particular plugin, but I looked into it and it seems it caches the 'other' pages somewhere while they are not displayed. At the moment your script is executed the elements are not existing in the DOM.
You will have to run a code similar to yours everytime the plugin loads a page:
// event "loadNewPage" is not an actual event; you will have to figure out which callbacks/hooks/events your plugin offers
$( '#list' ).on( "loadNewPage", function( event ) {
$('.list-item').removeClass('selected');
});
This only works if your changes are cached as well, otherwise you will have to save the selected element in your javascript and reselect it everytime the plugin displays a page.
In the JPList plugin, when you navigate only the content of the div elements are replaced and not the complete div. So, you'll have to reset the selected class upon navigation or any such event.
While initializing the plugin with default options use 'redrawCallback'
i.e.,
redrawCallback: function() {
$('.list .selected').removeClass('.selected');
}
The above code will reset the selected class upon the div.
and also update your code to be
$( '#list' ).on( "click", ".list-item", function( event ) {
$('.list .selected').removeClass('selected');
event.preventDefault();
console.log( "toto" + $(this).text());
var $this = this;
$(this).addClass('selected');
});
Try this approach, as this would first remove the existing selected class from the elements and add selected class to clicked element

jQuery continuously running an event

I have the following code which checks for the id of the active tab BUT only once when the page initially loads.
jQuery(document).ready(function(){
var id_of_tab = jQuery('#member-registration .tab-pane.active').attr('id');
console.log(id_of_tab);
});
I need this code to continuously check for the id of the active tab, (as there are various ways in which the user can make this tab active, and I have tried many click and hover events but ive found issues with all of them).
Rather than firing on a click/hover (such as the example below) the code needs to simple needs to keep running and to change the variable value if the active tab changes.
jQuery(document).ready(function(){
$( ".view-registration" ).hover(
function() {
var id_of_tab = jQuery('#member-registration .tab-pane.active').attr('id');
console.log(id_of_tab);
});
});
I'm struggling on this one!
You can bind multiple events on one function handler.
The 4 I suggest here are only suggestion for the code example`
It's up to you to determine the right events to bind.
See list here: http://www.quirksmode.org/dom/events/
$(document).ready(function(){
$( "#member-registration" ).bind("change mouseover click input",function(){
var id_of_tab = $(this).attr('id'); // Will alway return #member-registration
console.log(id_of_tab);
// Suggested console message ;)
console.log("An event occured on #member-registration");
// Maybe a check for the `active` class?
if( $(this).hasClass("active") ){
console.log("#member-registration is active.");
}
});
});

Can't call script from script with JQuery in GAS

I'm having some difficulty getting a script to execute. I am new to HTML and JQuery.
Using Google Sheets and Google Apps Scripts:
I have 3 files in question:
'sidebar.html'
'popup.html'
'scriptsJS.html'
Scripts for both 'sidebar' and 'popup' are all in 'scriptsJS'.
The button "#btnRefreshData" is bound to a button in 'sidebar'; this button, and associated scripts work as expected.
I am trying to trigger this same button from another script that is bound to different buttin in 'popup.html', but the call is ignored.
The script below is in 'scriptsJS.html', and is bound to a button in 'popup.html':
$( '#btnOpenSelectedItem' ).click(function() {
this.disabled = true;
var item = $( "#resultsList" ).find(':selected').val();
google.script.run
.withSuccessHandler(
function(msg, element) {
element.disabled = false;
doThis();
google.script.host.close();
})
.withFailureHandler(
function(msg, element) {
showStatus(msg, 'error');
element.disabled = false;
})
.withUserObject(this)
.openSelectedItem(item);
});
The script above executes correctly; my data loads, then it calls 'doThis':
function doThis () {
alert ('do this called');
$( "#btnRefreshData" ).trigger( "click" ); //<-- ignored
};
The script above displays an alert successfully (for testing), then attempts to trigger #btnRefreshData. #btnRefreshData is bound to 'sidebar.html', and causes the data in the sidebar to re-populate.
Again, all these scripts are in the same file, but when I call #btnRefreshData (bound to 'sidebar.html) from 'popup.html', it is ignored.
I'm hoping to find a way to trigger this event. Thank you for any help you can give me.
I will guess that this is an event delegation issue, how are you binding the click handler for #btnRefreshData? If You are not delegating it, try to delegate it as follows:
$( "#btnRefreshData" ).on( "click", function() {} ); //My guess on how you are binding it.
$( document ).on( "click", "#btnRefreshData", function() {} ); //Delegating the event.
Apps script uses caja to compile the code. For design some of the options you can get on normal javascript are disabled and triggering click programatically is one of them. This is why the code you mentioned is ignored.
In this case it would be better to call the methods that are executed when clicking the button "#btnRefreshData" inside your doThis method.
Here you can find a little bit of explanation on that: https://code.google.com/p/google-caja/issues/detail?id=1404
https://developers.google.com/apps-script/guides/html/restrictions#restrictions_in_native_and_emulated_mode

Page Change Event

My Fiddle
http://jsfiddle.net/sx9Rt/2/
My problem
I have a page, called page1. After I navigate to page2, I want to CHANGE page1 so that next time it is visited, it will look in a certain way (for example, background-color blue). I want to make this change only AFTER the end of the transition to page2.
I was trying to correctly use the pagecontainerchange event in JQM 1.4 and it wouldn't work for me. I don't want to use the pagechange event because it has been deprecated.
Updated FIDDLE
The pagecontainershow event of the pagecontainer widget runs after the animation to the new page is complete. In the event you can check the toPage or prevPage properties to figure out where you came from and where you are going.
$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
var prevPageID = ui.prevPage.prop("id");
if (prevPageID == "page1"){
toDoAfterTransition();
}
});
Fiddle updated: http://jsfiddle.net/sx9Rt/13/
Use this:
$( ":mobile-pagecontainer" ).on( "pagecontainerhide", function( event, ui ) {
$("#page1").css('background', 'blue');
});
API doc: http://api.jquerymobile.com/pagecontainer/
You can use Javascripts setInterval function to check the visibility of the page.
var prevPage;
$(document).on('click', 'a[data-role="button"]', function(){
prevPage = $(this).parents('[data-role="page"]');
var checkVisibility = setInterval(function() {
if(!$(prevPage).is(':visible')) {
$(prevPage).css('background', 'blue');
clearInterval(checkVisibility);
}
}, 10);
});
Fiddle: http://jsfiddle.net/sx9Rt/11/

How to interrupt a function when jquery tab is getting inactive?

I have a page with several jqueryui tabs. Each tab has a html page as content, which will be refreshed every second with new values of some variables.
The problem is, the values should not be refreshed, when the tab is inactive. (It's a traffic and perfomance problem)
So i tried following:
$(function() {
$( "#tabs" ).tabs({
activate: function( event, ui ) {
//tried some things here
if (ui.newTab.index() == 1){
setInterval("GetStatus()",1000);
}
}
});
});
it works halfway. The function "GetStatus" runs every second, when i open the Tab with index 1. But when i switch to another tab, the function still runs in background, and this is not desirable.
So I tried something like
ui.oldTab.empty(), ui.oldTab.unload() ....
But either I used it wrong, or its not that what i need to use.
Thanks for help in forward,
Flopo
You can keep a reference to the interval and clear it later:
$(function() {
var statusInterval;
$( "#tabs" ).tabs({
activate: function( event, ui ) {
//tried some things here
if (ui.newTab.index() == 1){
statusInterval = setInterval(function() { GetStatus(); }, 1000);
} else {
clearInterval(statusInterval);
}
}
});
});
Note that it's better to pass an anonymous function or function reference to setInterval, rather than a string.

Categories