We Keep Coding

Google Tag Manager - storing id of a clicked div/button

Looked for the answer all over, tried reading seperatly but couldn't find an answer..
I have a site, on which Google Tag Manager is implemented, and I need to extract the id of a clicked button (or its parent).
this is my code:
function(){
$(document).ready(function(){
var editid;
$('div.uk-button').click(function() {
editid = $(this).attr('data-id');
});
return editid;
});
}
Thanks!

The simplest approach is to create the following custom javascript variable:
function(){
return $({{Click Element}}).attr('data-id');
}
This will return the data-id attribute for all events (including clicks).
Attach this variable to the relevant event tag, and use click class contains uk-button as the trigger.

You can remove the outer function and code like below.
$(document).ready(function () {
$('div.uk-button').click(function () {
var editid;
editid = $(this).attr('data-id');
alert(editid);
});
});

Hey it looks like you may be not be catching the returned value of the document ready callback.
For example, this returns undefined since the return of $(document).ready() callback is not being returned by the containing function:
function testfunc() {
$(document).ready(function(){
var editid = 'this is the return value';
return editid;
});
}
testFunc()
"returns undefined"
I'm guessing that you might be trying to set up a custom javascript variable in GTM. You can still use document ready to ensure the elements are present but the returned value needs to be returned by the outer function for it to be passed into the variable.
So your example should work as follows:
function(){
var editid;
$(document).ready(function(){
$('div.uk-button').click(function() {
editid = $(this).attr('data-id');
});
});
return editid;
}

Attach behaviour to namespace calling in Javascript?

I am very mediocre in Javascript and looking around I was not able to find any information on how to achieve the behaviour I want or if it's even possible.
I have a namespace form to access my HTML form:
var form = (function(){
all = function () $('#myform .entry');
first = function () $('#myform .entry').first();
})();
form.all.css('color', 'blue');
form.first.css('color', 'red');
Desired extra behaviour:
form.css('background-color', 'green'); // should be calling $('#myform')
Is this possible?

You don't have a namespace, you have an object literal containing functions (and now you edited it, and added an IIFE, which makes even less sense), and the functions have to return something to be able to use it
var form = {
all : function () {
return $('#myform .entry');
},
first : function () {
return $('#myform .entry').first();
}
}
form.all().css('color', 'blue');
form.first().css('color', 'red');
or if you want to store the collection in an object without looking up in the DOM each time
var form = $('#myform');
form.all = $('#myform .entry');
form.first = $('#myform .entry').first();
form.all.css('color', 'blue');
form.first.css('color', 'red');

Hiding images with same data value jquery

Im trying to code a site where the objective is to click on two identical images and it hides the both the images you've managed to match to eachother.
$(document).ready(function(){
var animal1;
var animal2;
$(".memory1").on("click", function(){
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function(){
animal2 = $(this).data('animal');
if (animal1==animal2){
$(this).data('animal').hide();
}
else {
alert("Wrong, Try again!");
}
});
});
so the line where its going wrong is obviously
$(this).data('animal').hide();
But I cant figure out a way to hide both images, or a better way of going about it.. :/
http://jsfiddle.net/4vgfca76/

This doesn't work the way you think it does
$(this).data('animal').hide();
When data is used with one argument, it get's the data attribute, which you should already know as you're doing it a few lines above.
What you get is the string hund etc. and that string doesn't have a hide() method.
You should be using the attributes selector to select the elements with that attribute instead
$(document).ready(function () {
var animal1, animal2;
$(".memory1").on("click", function () {
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function () {
animal2 = $(this).data('animal');
if (animal1 == animal2) {
$('img[data-animal="'+animal1+'"]').hide();
} else {
alert("Fel! Försök igen");
}
});
});

How do I make my click catcher work?

I'm trying to create a simple click catcher where if you click .image-class the javascript will take the href from another element with a class name of .btn and send you to it's destination. Though I keep getting errors on lines 7 & 10 saying that undefined is not a function. How do I make this work?
<script>
var ClickCatcher=
{
init:function(){
var link = jQuery('.btn')[1].href;
var imgCatch = jQuery('.image-class');
imgCatch.addEventListener("click", ClickCatcher.clickListener, false);
},
clickListener:function(){
window.location = link;
}
};
ClickCatcher.init();
</script>

You can do this with jquery with a simple click event
jQuery('.image-class').on('click', function (){
window.location = jQuery('.btn').eq(1).attr('href');
});
But if you still want to write in the way you have you can do:
var ClickCatcher = {
init: function () {
jQuery('.image-class').on('click', function (){
window.location = jQuery('.btn').eq(1).attr('href');
});
}
};
ClickCatcher.init();
Just make sure to fire the init method after dom load.
update: One issue with it is that you have coded your target etc in the code rather then pass it, so its going to be hard to reuse, you'd be better off doing:
var ClickCatcher = {
init: function ($button, loc) {
$button.on('click', function (){
window.location = loc;
});
}
};
ClickCatcher.init(jQuery('.image-class'), jQuery('.btn').eq(1).attr('href'));
That way the internal working is seperate from the dom (as you are passing the dom dependencies to the function.

#atmd showed a very good way of doing this. If you just want to know what your mistake was though. It is wa an error in your jQuery stament to get the btn href
jQuery('.btn')[1].href
you need to call the attr function and then get the href attr. and use .eq(1) to reduce the set to the first btn
jQuery('.btn').eq(1).attr('href);

Adding another option when a link is clicked

I have this function,
function add_to_team_confirm(a, b) {
result = window.confirm("Sure?");
if (result) {
window.location = "url";
}
return result;
}
and I will call this once I will click an anchor tag,
Add to team
when this is clicked, a prompt will be shown having only two options, OK and Cancel. Now, what I would like is adding another option like, Use Credits, since a feature like using credits is possible in adding a player to the team. Now my question is, is it possible to add another option? And what is the value of that option so that when it is clicked, its value will then be shown and then I can process any process I want once it is clicked. I am not that really good in explaining but I hope you get it. Thanks.

Options are very flexible for things like this. Here's a simple pattern for doing this with jQuery:
In your onclick statement:
onclick="handle_team_confirm_click();"
function handle_team_confirm_click() {
var returnData = add_to_team_confirm(' a ', 'b ');
var myOptions = {val1 : returnData };
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
}
Now you can get the value like this:
$("#mySelect").click(function() {
$("#mySelect option:selected").val();
});

You can try window.showModalDialog
References & useful pages:
"showModalDialog method (window) JavaScript" [help.dottoro.com]
Google Search: 'showmodaldialog example'
[CiteHistory Record]