We Keep Coding

Attach a callback function to a dinamically created button [JS]

So, I have this function:
create({
text: 'Confirm',
callback: function(){
location.reload();
}
});
function create(options){
$('div').append('<button>'+options.text+'</button>');
}
And I want that, when you click the button, that callback function I passed gets executed. How can I make that? Is it possible with the function being an anonymous function or do I have to name it? For example, I can name it and then change the line of the append code to:
$('div').append('<button onclick="'+options.callbackName+'()">'+options.text+'</button>');
and then create a function with that name and instead of passing a function, passing a string with the name, but I'd prefer the first option.

Create your jQuery element assigning it to a variable and then use the jQuery on method in order to bind your callback to the given function:
function create(options) {
let button = $(`<button>${options.text}</button>`);
button.on('click', options.callback);
$('#container').append(button);
}
function append() {
create({
text: 'Confirm',
callback: function() {
//location.reload();
alert('Hello World');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button onclick="append()">Append</button>

var btn = $("<button>"+options.text+"</button>");
$("<div>").append(btn);
btn.on("click", options.callBack);

Following your code snippet you could update it to :
create({
text: 'Confirm',
callback: function(){
location.reload();
}
});
function create(options){
var $button = $("<button>");
if ( typeof options.callback === "function" ) {
$button.on("click", options.cb);
}
if ( typeof options.text === "string" ) {
$button.text(options.text);
}
$('div').append($button);
return $button;
}
Your create function, steps by steps, now does the following :
creates a button element
if options.callback is a function then attaches it
if options.text is a string then set it as textNode inside.
returns the created button for convenience
As a side note, on your last remark : this would mean leaking references on the global scope as inline callbacks are executed within the global scope. Probably not what you want. You generally want to avoid this pattern, IMO the only use case for purposely leaking reference of your function on the global scope is JSONP, but that is an entirely different use case :)

You can wrap the callback function into an immediately invoked function expression (IIFE):
function create(options){
$('div').append('<button onclick="(' + options.callback + ')()">' + options.text + '</button>');
}
create({
text: 'Confirm',
callback: function(){
alert('Hello');
}
});
That way you are also able to pass the event object to the callback:
onclick="(function(event){console.log(event.target)})(event)"

function append(){
var btn = $('<button>Button</button>');
$(btn).click(function(){
alert('Text');
})
btn.appendTo($("#container"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>
<button onclick="append()">Append</button>

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;
}

Get data from previous option in a select as well as data from current option

So I know scoping in JavaScript can be a little wonky and I've tried a few different things including attaching the variable declaration to the window (i.e. window.var) and declaring the variable inside and outside different parts of the function but to no avail. Here's what I've got:
$(".some_field").on('focus', function () {
// Store the previous option value before the change
prev = String($(":selected", $(this)).data('option_id'));
}).change( function() {
alert(prev); // alerts '4'
current = String($(":selected", $(this)).data('option_id'));
alert(current) // alerts '5'
alert(prev); // alerts '5' ..... it should alert '4'
});
Essentially within the change function I need to do stuff with both the previous and current option id's

Instead of using a global, I recommend decorating the input with an old value data attribute.
Try this: http://jsfiddle.net/zpe7azsq/16/
For example:
$(".some_field").on('focus', function () {
$(this).data('oldValue', $(this).data('option_id'));
}).change(function () {
alert("Old value on focus was: " + $(this).data('oldValue'));
alert("Current option_id value: "+$(this).data('option_id'));
});

You need to use one variable/property for storing the previous value per element. A global variable won't help. Actually you don't even need those focus events.
$(".some_field").each(function () {
$(this).data('id_value', $(":selected", this).data('option_id'));
}).change(function(e) {
var previous = $(this).data('id_value'),
current = $(":selected", this).data('option_id');
alert(…); // or whatever
$(this).data('id_value', current);
});

With #Scott 's answer as a guide here is what ended up working for me. I used the parent element to store the data instead... #Bergi's answer also works though!
$(".some_field").on('focus', function () {
// Store the previous option value before the change
$(this).parent().data('prev_option_id', $(":selected", $(this)).data('option_id'));
}).change( function() {
current = String($(":selected", $(this)).data('option_id'));
alert("Old value on focus was: " + $(this).parent().data('prev_option_id'));
alert("Current option_id value: "+current);
});

jquery plugin set value of this

I am creating star rating box...
my php page is as below
<html>
<head>
<script src='jquery.js'></script>
<script src='alamStars.js'></script>
<script>
$().ready(function(){
$("#txtStar").alamStar();
});
</script>
</head>
<body>
<?php
if(isset($_GET[]))
{
echo $_GET['txtStar'];
}
?>
<form>
<input type='text' name='txtStar' id='txtStar'>
<input type='submit'>
</form>
</body>
</html>
my plugin code is as below
;(function ($) {
$.fn.alamStar = function (options) {
var defaultVal = {
img: '../images/start_rating.png',
width: 105,
height: 120
}; //end array of default values
var obj = $.extend(defaultVal, options);//overwrite default values if there
this.after("<div id='alamStarBox' stars='"+this.val()+"'></div>");//dynamically create div
var alamStarBox=$("#alamStarBox");//assign alamStarBox to a variable
alamStarBox.html(this.val());//set initial value from textbox
alamStarBox.css({
'color' : 'red',
'background-image' : 'url('+obj.img+')',
'max-width' : obj.width+"px",
'max-height' : obj.height+"px",
'overflow' : 'hidden'
});//end styling css to alamStarBox
alamStarBox.mousemove(function(e){
var l=alamStarBox.offset().left;//Left value of alaStarBox
var c=parseInt(e.pageX)+21;//current-position
if(c>(parseInt(l)+parseInt(10)))
{
$(this).html("0");
$(this).css('background-position-Y','0px');
}
if(c>(parseInt(l)+parseInt(30)))
{
$(this).html("1");
$(this).css('background-position-Y','-20px');
}
if(c>(parseInt(l)+parseInt(50)))
{
$(this).html("2");
$(this).css('background-position-Y','-40px');
}
if(c>(parseInt(l)+parseInt(70)))
{
$(this).html("3");
$(this).css('background-positionY','-60px');
}
if(c>(parseInt(l)+parseInt(90)))
{
$(this).html("4");
$(this).css('background-positionY','-80px');
}
if(c>(parseInt(l)+parseInt(110)))
{
$(this).html("5");
$(this).css('background-positionY','-100px');
}
});//end moue move function
alamStarBox.mouseout(function(){
var p=parseInt($(this).attr("stars"))*20;
$(this).css('background-positionY','-'+p+'px');
$(this).html($(this).attr("stars"));
});//end function alamStarBox mouseOut
alamStarBox.click(function(){
$(this).attr("stars",$(this).text());
});//end function alamStarBox click
var frm=this.closest("form");
frm.submit(function(){
this.val(alamStarBox.text());//on submit form copy text from starbox to textBox
//////////////////////////////////the above line is not working////////////////
});
};//end alamStar function
})(jQuery);
I want to set textbox value equal to div text, in last function named frm.submit
but it is not working even assigning it static string like "static value"

You have to save the copy of this in the parent function into another variable that you can then refer to in the callback function like this:
var self = this;
var frm = this.closest("form");
frm.submit(function(){
self.val(alamStarBox.text()); //on submit form copy text from starbox to textBox
});
This happens because inside the submit callback function this will have a different value (most likely it will be the form DOM object). Using a local variable named self or that or me is a very common design pattern for allowing a reference to the original object inside a local callback function.

You are using a callback on the jQuery .submit method of the form, so this is most likely not what you think it is (log it to console to see what it actually is).
Even $(this) will not work here, because that would be the form itself – and calling .val() on that makes no sense.
Select the input field explicitly in this function, then it should work: $("#txtStar").val(…)

Either you use jfriend00's suggestion or you can use $.proxy() which change the scope of the submit hanlder to the original "this" value.
frm.submit($.proxy(function(){
this.val(alamStarBox.text()); // NOW this=your textbox #txtStar
}, this));

Assigning Anchor tag's to call Javascript function dynamically

I am creating list of <span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service">'+servicename+'</a><br/></span> tags dynamically and appending it to a div
Then using the below map to map a tags attribute to some function
var idMap = {
//it can be a lot more
"javaInfo":javaInfo,
/*infa9 product map*/
"infa9PMServer":infa9PMServer,
"infa9Service":infa9Service
};
This is the click Handler
$('#ds-accordion a').click(function(event) {
var elementId=$(this).attr("id");
treeItemClickHandler(elementId);
});
function treeItemClickHandler(id)
{
(idMap[id])(id); //Is this usage called 1st class functions?
}
function infa9Service(id)
{
alert("i got this "+id);
}
Note: I am using Jquery v1.6.3
But when I click on any of the a tags, it calls the function an does all the operation inside the function, but gives an error Object dosen't support this porperty or method in the treeItemClickHandler function.
I would like to know,
How to avoid getting this error?
Is there a more better approach for something like this?
And Is it 1st class functions that I am using (if so where can i learn more about it)?
Thanks.
Update
How can I pass 2nd parameter?
'<span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service" title='+servicename+'>'+servicename+'</a><br/></span>'
$('#ds-accordion a').click(function(event) {
var elementId=$(this).attr("id");
var elementName=$(this).attr("title");
treeItemClickHandler(elementId,elementName);
});
function treeItemClickHandler(id,name)
{
idMap[id](id,name);
}
function infa9Service(id,name)
{
alert(id+", "+name);
}
It gives me infa9Service, undefined

check this out http://jsfiddle.net/ywQMV/4
1)define your functions.
2)define your id map.
html part :
<div id ="ds-accordion">
<span class="infa9span">
<img src="/csm/view/include/images/foldericon.png"/>
<a id="infa9Service" title='+servicename+'>'+servicename+'</a>
<br/>
</span>
js part:
function infa9Service(id, serviceName)
{
alert("i got this "+id +" serviceName : " + serviceName);
}
var idMap = {
"infa9Service":infa9Service
};
$('#ds-accordion a').click(function(event) {
var elementId=$(this).attr("id");
var serviceName = this.title;
treeItemClickHandler(elementId, serviceName);
});
function treeItemClickHandler(id,serviceName)
{
// alert(idMap[id])
(idMap[id])(id,serviceName); //Is this usage called 1st class functions?
}