Develop Reference

Trying to make a popup javascript class

I am having trouble trying to do a click function inside the javascript class, "this.overlay.style.display = 'block'" not working due to "this" because "this" refers back to the click event i assume? what should i do to overcome this obstacle? i can console.log(options.overlay.id) outside of the click event, but inside the click event it will be undefined. what is the optimal solution for this?
var popup_overlay = document.getElementById("popup_overlay"),
update_coins = document.getElementById("update_coins");
// POPUP CLASS
var Popup = function (options) {
console.log(options.overlay.id); //THIS WORKS
this.overlay = options.overlay;
this.button = options.button;
this.button.addEventListener("click", function(e){
// this.overlay.style.display = 'block';
alert(e.target.getAttribute('data-popup'));
});
};
var popup_update_coins = new Popup(
{
overlay: popup_overlay,
button: update_coins
}
);

You could use Arrow function
// POPUP CLASS
var Popup = function(options) {
console.log(options.overlay.id); //THIS WORKS
this.overlay = options.overlay;
this.button = options.button;
this.button.addEventListener("click", (e) => { // Arrow function
this.overlay.style.display = 'block'; // this === Popup
alert(e.currentTarget.getAttribute('data-popup')); // currentTarget
});
};
var popup_overlay = document.getElementById("popup_overlay"),
update_coins = document.getElementById("update_coins");
var popup_update_coins = new Popup({
overlay: popup_overlay,
button: update_coins
});
#popup_overlay {
display: none;
}
<button id="update_coins" data-popup="TEST">update</button>
<div id="popup_overlay">asdasd</div>

Input tags inside backgrid table

I have created in backgridjs table custom "TagCell" (with implemented THIS).
So my cell looks like:
var TagCell = Backgrid.TagCell = Cell.extend({
className: "tag-cell",
events: {
'click .tag a': 'removetag',
},
initialize: function (options) {
TagCell.__super__.initialize.apply(this, arguments);
this.title = options.title || this.title;
this.target = options.target || this.target;
var model = this.model;
var rawData = this.formatter.fromRaw(model.get(this.column.get("name")), model);
},
removetag: function(event) {
var that = this;
that.model.set({location: ""},{success: alert("removed!"));
},
render: function () {
this.$el.empty();
var rawValue = this.model.get(this.column.get("name"));
var formattedValue = this.formatter.fromRaw(rawValue, this.model);
this.$el.append('<input name="location" class="tagggs" value="'+formattedValue+'" />');
this.delegateEvents();
return this;
},
});
If I trying to call removetag function with event click to ".tag" model with empty location is saved. But If I trying to call function with click event to ".tag a" or directly to class ".rmvtag" function is not called. I think because jquery tags input is designed like this:
$('<span>').addClass('tag').append(
$('<span>').text(value).append(' '),
$('<a>', {
href : '#',
class : 'rmvtag',
text : 'x'
}).click(function () {
return $('#' + id).removeTag(escape(value));
})
).insertBefore('#' + id + '_addTag');
So there is click function with removetag() written directly after append element. How can I call save model function from backbone on click to rmvtag link?
Thanks for any help!

Calling function inside javascript class

I have the following javascript class (really don't know if it is the best solution) and I wan't to call a function that is definded in this class, insinde another function defined in the same class.
step1 = {
init: function(){
this.events();
},
events: function(){
fct = this; // i stored this in a variable so that i don't lose it
$(document).on('click', '.form-line li', function(e) {
e.preventDefault();
fct.changeCategoryValue($(this));
});
$(document).on('click', '.alert-form .confirm', function(e) {
e.preventDefault();
$.fancybox.close(true);
});
},
changeCategoryValue: function(el) {
cat = el.hasClass('has-sub') ? '' : el.data('id');
title = el.hasClass('has-sub') ? '' : el.data('title');
$('#cat-title').val(title);
$("input[name='category']").val(cat);
}
As you an see I wan't to call the changeCategoryValue function but if I call it with this.changeCategoryValue it won't work. Any suggestions on how to improve the code?

Alternatively, you may change the scope of the function callback:
$(document).on('click', '.form-line li', function(e) {
e.preventDefault();
this.changeCategoryValue($(e.currentTarget));
}.bind(this));
Use .bind(this) so the scope of function(e){...} will be the instance of step1 instead of $('.form-line li',document). Now, to still target the clicked/selected .form-line li, you can access the object via e.currentTarget.

try to use:
step1.changeCategoryValue($(this));

you have added property to the class why don't you call it using class name like this :
step1.changeCategoryValue('any_element_ref');

You could create a proper object. This even allows you call init in the constructor if you wan't.
function Step() { this.init(); }
Step.prototype.init = function() { this.events(); };
Step.prototype.events = function() {
var self = this;
$(document).on('click', '.form-line li', function(e) {
e.preventDefault();
self.changeCategoryValue($(this));
});
$(document).on('click', '.alert-form .confirm', function(e) {
e.preventDefault();
$.fancybox.close(true);
});
};
Step.prototype.changeCategoryValue = function(el) {
cat = el.hasClass('has-sub') ? '' : el.data('id');
title = el.hasClass('has-sub') ? '' : el.data('title');
$('#cat-title').val(title);
$("input[name='category']").val(cat);
};
var step1 = new Step();

you can try use clojure like this:
step1 = (function(){
function events(){
$(document).on('click', '.form-line li', function(e) {
e.preventDefault();
changeCategoryValue($(this));
});
$(document).on('click', '.alert-form .confirm', function(e) {
e.preventDefault();
$.fancybox.close(true);
});
}
function changeCategoryValue(el) {
cat = el.hasClass('has-sub') ? '' : el.data('id');
title = el.hasClass('has-sub') ? '' : el.data('title');
$('#cat-title').val(title);
$("input[name='category']").val(cat);
}
function init(){
events();
}
return {
init:init,
changeCategoryValue: changeCategoryValue
}
})()

Push function to front of object literal

I have some html to popup a jQuery UI modal:
Click me
With this javascript code:
$('.popup').click(function() {
var a = this;
var dialog = $('<div>').load($(a).attr('href'), function() {
var form = dialog.find('form');
dialog.dialog({
modal: true,
title: $(a).attr('title'),
buttons: {
Add : function () {
$.post($(form).attr('action'), $(form).serialize());
dialog.dialog('close');
},
Cancel: function () {
dialog.dialog('close');
}
}
});
if ($(a).attr('data-third')) {
// Add here a button
}
});
return false;
});
The idea is the resource in the modal contains a form, on submit of the modal the form is submitted. Now when Click me exists, it means a third button is placed in the modal in this order: Cancel | Add | Add & new.
I tried this code:
if($(a).attr('data-third')) {
var buttons = dialog.dialog('option', 'buttons');
buttons[$(a).attr('data-third')] = function(){
// Callback here
}
dialog.dialog('option', 'buttons', buttons);
}
I got a new button, but the order is Add & new | Cancel | Add. How can I make sure the order is Cancel | Add | Add & new?

With this code you should always get Cancel | Add | Add & new? (from left to right.
$('.popup').click(function() {
var a = this;
var dialog = $('<div>').load($(a).attr('href'), function() {
var form = dialog.find('form');
dialog.dialog({
modal: true,
title: $(a).attr('title'),
buttons: {
Cancel: function() {
dialog.dialog('close');
},
Add: function() {
$.post($(form).attr('action'), $(form).serialize());
dialog.dialog('close');
}
}
});
if ($(a).data('third')) {
var buttons = dialog.dialog('option', 'buttons');
console.log(buttons);
buttons[$(a).data('third')] = function() {
// Callback here
}
dialog.dialog('option', 'buttons', buttons);
}
});
return false;
});
Fiddle here: http://jsfiddle.net/rqq2p/1/
Remember to use data() and not attrib() to get the attribute from the link!
EDIT - basically "buttons" is an object, and each property is one of the buttons. I think that the order in which the buttons appear is the order in which the properties are added. In my example Cancel is the leftmost button because it was the first added property and add & new it's the rightmost because it was the latest. If you need to fiddle with the order you could create a new object and add the properties in the order you want:
if ($(a).data('third')) {
var buttons = dialog.dialog('option', 'buttons');
var newButtons = {};
newButtons[$(a).data('third')] = function() {
// Callback here
}
newButtons['Cancel'] = buttons['Cancel'];
newButtons['Add'] = buttons['Add'];
dialog.dialog('option', 'buttons', newButtons);//now add & new should be the leftmost
}

Untested, but I would imagine the array key should be buttons.length like this
if($(a).attr('data-third')) {
var buttons = dialog.dialog('option', 'buttons');
buttons[buttons.length] = function(){
// Callback here
}
dialog.dialog('option', 'buttons', buttons);
}

YUI Event Utility problem

I create a button, when clicked, it activates a backup feature.
My problem, backup is launched before I have clicked to this button.
How, do I fix this problem ? Any Idea ?
Here is my code (fragment) :
(button) :
var oSaveCuratedQuery = new YAHOO.widget.Button({
type: "button",
label: "Save Query",
id: "updateCuratedQuery",
name: "updateCuratedQuery",
value: "updateCuratedQueryValue",
container: idReq });
YAHOO.util.Event.addListener("updateCuratedQuery-button", "click", saveCuratedQuery(idReq, contentCurValue));
(backup function) :
function saveCuratedQuery (geneId,curatedText) {
var handleSuccessGeneQueries = function(o){
Dom.get('progress').innerHTML = "Data Saved...";
}
var handleFailureGeneQueries = function(o){
alert("Save failed...")
}
var callbackGeneQueries =
{
success:handleSuccessGeneQueries,
failure: handleFailureGeneQueries
};
var sUrlUpdate = "save.html?";
var postData = 'key=saveCuratedQuery&value=gene_id==' +geneId+ '--cq==' +curatedText;
var request = YAHOO.util.Connect.asyncRequest('POST', sUrlUpdate, callbackGeneQueries, postData);
}
I also try :
oSaveCuratedQuery.on("click",saveCuratedQuery(idReq, contentCurValue));
But same problem !
The backup is done before I click "save" button.
Thank you for help.

The third argument of addListener should be a function to be run when the event happens.
You are passing it the return value of saveCuratedQuery instead.
var callbackSaveCuratedQuery = function (idReq, contentCurValue) {
return function callbackSaveCuratedQuery () {
saveCuratedQuery(idReq, contentCurValue);
};
}(idReq, contentCurValue); // Use an anonymous closure function
// to ensure that these vars
// do not change before the click
// event fires.
YAHOO.util.Event.addListener("updateCuratedQuery-button",
"click",
callbackSaveCuratedQuery
);
See https://developer.mozilla.org/en/A_re-introduction_to_JavaScript#Closures if you need to learn about closures.