Consolidating jQuery listeners - javascript

Lately I've been working on a project that requires me to make numerous AJAX calls to a Symfony backend. Since each AJAX call is made to a different URI, I've ended up with a script that's really long, but with numerous .on('event', function(){...}) code blocks, like this:
$(document).ready(function(){
$('.class').on('click', function(e){
e.preventDefault();
//AJAX call
This is basically duplicated over and over again, but because of slight variations in the selector and the type of data to be received, I keep writing this same block of code over and over again.
I've been thinking of using a builder pattern (is it even possible in JS?) to trim the code. I'm not very good at javascript, so any help would be much appreciated.
UPDATE:
/**
* AJAX prototype
*
* #param options
* #constructor
*/
//set TestProtObj properties in the constructor
var AjaxProt = function (options) {
this.ajaxCallType = options.ajaxCallType;
this.targetEl = options.targetEl;
this.event = options.event;
this.method = options.method;
this.htmlFactory = options.htmlFactory;
};
//add methods to the object prototype
AjaxProt.prototype = {
init: function () {
var targetEl = this.targetEl;
targetEl.on(this.event, function(e) {
e.preventDefault();
this.ajaxCall();
})
},
modalCallback: function(successData) {
var modal = this.htmlFactory.createHtml({
title: 'Bet: Detailed View',
id: '#bet-detailed-model',
htmlType: 'modal'
});
if (successData.success = true) {
$('#content').prepend(modal);
$('#bet-detailed-model').modal({show:
true
});
} else {
$('#content').prepend(modal);
$('#bet-detailed-model').modal({
show: true
});
$('.modal-body').append(alert);
}
},
ajaxCall: function() {
var url = this.targetEl.attr('href'),
method = this.method,
ajaxCallType = this.ajaxCallType;
switch (ajaxCallType) {
case 'modalGet':
var callback = this.modalCallback();
break;
}
$.ajax({
url: url,
type: method,
success: function(data) {
callback(data)
}
});
}
};
//initialize client code
$(document).ready(function () {
// initialize new AjaxPro
var AjaxBetDetailed = new AjaxProt ({
ajaxCallType: 'modalGet',
targetEl: $('.ajax-ticket-view'),
event: 'click',
method: 'GET',
htmlFactory: new HtmlFactory()
});
//initialize concrete object
AjaxBetDetailed.init();
});
Unfortunately, it appears that my event handler is not binding, such that e.preventDefault is not working - all it does is follow the link. I'm really not used to writing classes in this way, so any help would be greatly appreciated.
UPDATE 2:
I've also written a proof of concept class in jsfiddle that tries to replicate the behaviour I want to achieve. It is also failing to bind the event handler - so that must be the problem. I don't seem to be able to solve it.
JSFiddle: Click Me Please!

You could reuse the same function with your "slight variations" as parameters:
function registerClick(className, url, param) {
$('.' + className).on('click', function(e) {
// Ajax call using url and param, for instance
});
}
And then use it:
registerClick('class', '/api/foo', 'bar');
registerClick('toto', '/api/foo', 'buzz');
That's not specific to JS but any kind of programming/scripting language: put all reusable code into a function (or an object if you want it oriented object, or a prototype if you want it oriented prototype, etc, but the idea is the same).

Related

Why doesn't this function run when the reactive variable changes value?

I'm new to meteor and I'm trying to get a hang of the whole reactivity thing.
There isn't a specifc reason why I want this function to re-run, in fact, it not re-running is actually the desired behavior for my use case. I just want to know why this is happening so I can better understand the concepts.
If I add a function as a property on a template instance, like this:
Template.services.onCreated( function() {
this.templates = [
"web_design",
"painting",
"gardening"
];
this.current_index = new ReactiveVar(0);
this.determineSlideDirection = function() {
console.log(this.current_index.get());
};
});
And then I update the reactive var in response to some event.
Template.services.events({
'click .nav-slider .slider-item': function(event, template) {
var new_selection = event.currentTarget;
template.current_index.set($(new_selection).index());
}
});
The function is not re-run upon the invocation of the set() call.
However, If I have a helper that utilizes the variable, it will be re-run.
Template.services.helpers({
currentTemplate: function() {
var self = Template.instance();
return self.templates[self.current_index.get()];
}
});
Why is this?
Reactive data sources only cause some functions to automatically re-run. These functions are:
Tracker.autorun
Template.myTemplate.helpers({})
Blaze.render and Blaze.renderWithData
In your code above you would want to use Tracker.autorun
Template.services.onCreated( function() {
this.templates = [
"web_design",
"painting",
"gardening"
];
this.current_index = new ReactiveVar(0);
Tracker.autorun(function(){
// actually, this might not work because the context of
// 'this' might be changed when inside of Tracker.
this.determineSlideDirection = function() {
console.log(this.current_index.get());
};
});
});

Backbone: Best way to handle variable common to all models

I'm currently developing my first Backbone single page app project and I'm facing an issue.
Basically I have a menu (html select input element) implemented as a View. Its value is used to control pretty much every other data requests since it specifies which kind of data to show in the other Views.
Right now I handle the DOM event and trigger a global event so that every model can catch it and keep track internally of the new value. That's because that value is then needed when requesting new data. But this doesn't look like a good solution because A) I end up writing the same function (event handler) in every model and B) I get several models with the same variable.
var Metrics = Backbone.Collection.extend({
url: "dummy-metrics.json",
model: MetricsItem,
initialize: function () {
this.metric = undefined;
},
setMetric: function (metric) {
this.metric = metric;
globalEvents.trigger("metric:change", this.get(metric));
}
});
var GlobalComplexity = Backbone.Collection.extend({
url: function () {
var url = "http://asd/global.json?metric=" + this.metric;
return url;
}, //"dummy-global.json",
model: GlobalComplexyItem,
initialize: function () {
this.metric = undefined;
this.listenTo(globalEvents, "metric:change", this.updateMetric);
},
updateMetric: function (metric) {
this.metric = metric.get("id");
this.fetch({ reset: true });
}
});
All my other Collections are structured like GlobalComplexity.
What's the cleanest way to solve this problem?
Thank you very much.
Define a global parametersManager. Export an instance (singleton) then require it when you need it.
On "globalupdate" you update the parametersManager then trigger "update" for all your model/collections so they'll look what are the current parameters in the parametersManager.

KnockoutJS - update object with internal function

I am having an "this" issue and would appreciate any help
this is my basic code
function xxx(val)
{
this.x = val;
this.change = function() {
var self = this;
$.ajax({
blah: '',
blah: '',
success: function(data) { self.x = 5; },
});
};
}
var newX = new x(1);
newX.change();
console.log(newX.x);
Hopefully that makes sense,
What I am trying to do is update the original object on the jquery ajax response. I do not have access to 'this' so i tried to pass it off to the 'self' variable but the object values does not seem to be updating even though the code is running as expected.
I am sure there is a simple answer, i just dont know it.
Any help is greatly appreciated.
So the way to resolve this is take a look at your function declarations. Each function declaration will give you a new this object. Store the one you are interested in the correct spot. If I'm correct, it looks like you actually want to access the scope of the original xxx function scope. So instead of storing this in the change function, store it above that in the original scope. Something like this:
function xxx(val)
{
var self = this;
this.x = val;
this.change = function() {
var that = this;
$.ajax({
blah: '',
blah: '',
success: function(data) { self.x = 5; },
});
};
}
var newX = new x(1);
newX.change();
console.log(newX.x);
The other issue here is that you are using AJAX to make that call so you either need a Deferred object or you could add a callback to that function that gets triggered at the right time like so:
function xxx(val)
{
var self = this;
this.x = val;
this.change = function(callback) {
var that = this;
$.ajax({
blah: '',
blah: '',
success: function(data) {
self.x = 5;
if (typeof callback === "function"){
callback.call(this);
}
}
});
};
}
var newX = new xxx(1);
newX.change(function(){
console.log(newX.x);
});
In knockout... you'll have to do something like that:
function Xxx(val)
{
var self = this;
this.x = ko.observable(val);
this.change = function() {
// "that" may be different to "self" in some
// cases...
var that = this;
$.ajax({
url: '...',
type: 'get',
success: function(data) {
self.x(5);
},
error: function(a) {
console.log('got an error');
}
});
};
}
var newX = new Xxx(1);
newX.change();
ko.computed(function () {
// This will get called everytime
// newX.x is changed
console.log(newX.x());
});
When you create a variable, that may change, you have to create it as an observable. The observable is in fact a function that you call. When called, it will update its inner value and it will also trigger any changes wherever the observable is "observed"
In no way you should try to do this.x = 5. It will override the actual observable object and thus it will never trigger every observer of a change.
edit
In case you're interested to understand how does computed works. A computed variable is a function that will listen to observables. When the computed is created, it will be called once to check which observables where called from within it. It's a way to "track" dependencies. In this example, you should see at least two console log. one with 1, and then with 5.
In my case, the computed variable is kind of anonymous since it isn't affected anywhere. Also in some case, you may need to observe one variable but use multiple observables. To prevent update on any other used observables. There are some ways to do that. You can either return after you "watched" the observables you needed.
Or you can create a sub function that will be triggered a little after the computed with setTimeout(..., 0);. There are a couple of ways to achieve some really nice tricks.

Code Structure with ExtJS

I'm trying to organize my ExtJS javascript a little better. I've an ExtJS object like this:
Ext.define('QBase.controller.ControlModelConfigurationController', {
extend: 'Ext.app.Controller',
views: [
'ControlModelConfiguration'
],
init: function() {
console.log('Initialized ControlModelConfigurationController');
this.control({
'#testBtn': {
click: this.loadModel
}
});
},
loadModel: function() {
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response)
{
if (success)
{
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml,parent);
Ext.Array.forEach(nodes,handleNode);
}
}
});
},
handleNode: function(items) {
console.log(item.name);
}
});
The posted code above is not working. Ext.Array.forEach(nodes,handleNode) causes trouble. Instead of using an anonymous function like :
...
Ext.Array.forEach(nodes,function(item) {
console.log(item)});
}
...
I'd like to extract the anonymous function as a named external one. Unfortunately I'm unable to figure out the right syntax to establish a code structure as shown above.
Meanwhile, I figured out, that putting
function handleNode(item) {
{console.log(item)}
}
at the very end of the file works. Is it possible to make the handleNode method an object - "member" of the controller?
Thanks in advance
Chris
handleNode is a member of the containing object. When loadModel is called, this contains the right object, but at the time the callback is invoked, it will not point to the one we are interested in. You can save this to the local variable self, and use it instead.
loadModel: function() {
var self = this
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response)
{
if (success)
{
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml,parent);
Ext.Array.forEach(nodes, self.handleNode);
}
}
});
},
The solution posted by vhallac is not entirely correct. It assumes that handleNode doesn't reference the current object through this variable. Maybe just a typo, but additionally it's not really the ExtJS way...
Whenever ExtJS provides a callback parameter, there is nearly always a scope parameter to set the value of this within the callback function.
loadModel: function() {
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response) {
if (success) {
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml, parent);
Ext.Array.forEach(nodes, this.handleNode, this);
}
},
scope: this
});
},
handleNode: function(node) {
// From within here you might want to call some other method.
// Won't work if you leave out the scope parameter of forEach.
this.subroutine();
}
Just like forEach uses a scope parameter, the request method uses a scope config option. This is ExtJS convention for passing around the scope. You can alternatively create an extra local variable and reference the scope from there, but in the context of ExtJS this style will feel awkward, plus (I'm pretty sure) it's a lot more bug-prone.

JavaScript multiple object instances, cannot correctly access properties inside event handler

I have a working version of HTML5 drag & drop file uploader. I was editing the JS code to support multiple file uploads on same page. I came across with a problem by trying to access "instance" properties in methods which are registered as events.
The problem is shown by the code below, in method this.drop.
The reason of existence of the this.$$upload_self property is to access data through this property. For example, I can't use this keyword inside this.drop function, because when event is raised, this not referring my "instance".
I'm not sure that by creating $$upload_self was a good idea.
The new instances area created like this:
var recording_upload = new upload();
recording_upload.init(recording_upload, ...);
Code of Drag & drop file upload:
var upload = function() {
this.$$upload_self = null;
this.$drop = null;
this.$status = null;
this.$progress = null;
this.maxNumberOfFiles = null;
...
this.init = function (self, pUrl, maxNmbOfFiles, dropArea, progress, status) {
$$upload_self = self;
$$upload_self.postUrl = pUrl;
$$upload_self.maxNumberOfFiles = maxNmbOfFiles;
$$upload_self.$drop = $("#" + dropArea);
$$upload_self.$progress = $("#" + progress);
$$upload_self.$status = $("#" + status);
$$upload_self.$drop.bind('dragenter', $$upload_self.enter);
$$upload_self.$drop.bind('dragleave', $$upload_self.leave);
$$upload_self.$drop.bind('drop', $$upload_self.drop);
};
this.enter = function (e) {
$(e.target).addClass('hover');
return false;
};
this.leave = function (e) {
$(e.target).removeClass('hover');
return false;
};
this.drop = function (e, _this) {
$(e.target).removeClass('hover');
var files = e.originalEvent.dataTransfer.files;
if (files.length > $$upload_self.maxNumberOfFiles) { // for example, here $$upload_self references always last instance...
$$upload_self.displayErrorMessage('Error: You can only drop ' + $$upload_self.maxNumberOfFiles + ' file(s) at time.');
return false;
}
...
};
...
}
Is there any workaround to solve this issue? I believe this maybe a common problem, but can't find nothing to solve this problem.
Any help is very much appreciated.
You could ditch the new keyword altogether and use a fresh closure for each instance of upload.
EDIT: Updated to avoid potential clobbering of global this.
var upload = function(pUrl, maxNmbOfFiles, dropArea, progress, status) {
return {
postUrl: pUrl,
...
drop: function(e) {
...
if (files.length > this.maxNumberOfFiles) {
this.displayErrorMessage(...);
}
...
},
...
};
};
...
var someUpload = upload(...);
Try to search for a "scope". As an example see how it implemented in ExtJS.
In a modern browser you can do this:
$$upload_self.$drop.bind('dragleave', $$upload_self.leave.bind($$upload_self));
For older IE versions you can do this:
$$upload_self.$drop.bind('dragleave', function() { $$upload_self.leave(); });
Really the ".bind()" method of all Function objects in new browsers just creates a little intermediate function for you, essentially like the second example. The Mozilla docs page for ".bind()" has a very good block of code you can use as a "polyfill" patch for browsers that don't support ".bind()" natively.

Categories