This is a part of a more broad question. It is getting low attention, so let me please ask the only part of it that I can't implement myself. How can I register jquery-like javascript function for a dom object? Say i have a following html page:
<html><body>
<div id = "table"/>
<div id = "chart"/>
</body></html>
and want to be able to call $('#table').update() and $('#chart').update()? I need those update functions to contain different logic and local variables, for example different url to load data from. Sorry for probably being noob.
UPDATE
If I understand correctly, plugin is a function in a global namespace that can process any object. I'd rather want to associate different functions with different elements. That because I thought that it would be easier to associate different update functions with different objects, than write one update function which for every object has to investigate is it applicable, and if yes, how.
This is a part of a more broad question. It is getting low attention, so let me please ask the only part of it that I can't implement myself. How can I register jquery-like javascript function for a dom object? Say i have a following html page:
<html><body>
<div id = "table"/>
<div id = "chart"/>
</body></html>
and want to be able to call $('#table').update() and $('#chart').update()? I need those update functions to contain different logic and local variables, for example different url to load data from. Sorry for probably being noob.
UPDATE
If I understand correctly, plugin is a function in a global namespace that can process any object. I'd rather want to associate different functions with different elements. That because I thought that it would be easier to associate different update functions with different objects, than write one update function which for every object has to investigate is it applicable, and if yes, how.
-
2
Is
update()a plugin you've written? You could usedata-*variables on the elements containing the differing data, and process the logic on them in yourupdate()method. – Rory McCrossan Commented Oct 28, 2013 at 14:06 - Are you asking how to create a plugin? – George Commented Oct 28, 2013 at 14:06
- I do not know whether plugin is a solution, and updated my question accordingly – latheiere Commented Oct 28, 2013 at 14:15
-
1
"jquery-like javascript function for a dom object" You are not calling DOM object methods, but jQuery functions in your example:
$('#table').update(). To call a DOM object method you will need to access the DOM object first:$('#table')[0].update()or$('#table').item(0).update(). See: api.jquery./Types/#jQuery jQuery plugin functions can be created/appended using theextendfunction as @James Donnelly suggests; to add a DOM method you must set it to the objects prototype. – feeela Commented Oct 28, 2013 at 14:19 - thanks @feela I think your ment is worth being an answer, it clarified me why some of my attempts failed – latheiere Commented Oct 28, 2013 at 14:30
3 Answers
Reset to default 6What you're after is jQuery's fn.extend():
$.fn.extend({
update: function() {
/* Required code. */
}
});
Then you can simply call .update() on a jQuery object to execute that function:
$('myElement').update();
As an example use, if we wanted to log the id of an element, we could define our update() function as:
$.fn.extend({
update: function() {
console.log("ID = " + this.id);
}
});
Then call:
$('#table').update();
Which would log:
ID = table
You don't need jQuery for this. DOM elements are objects, so you can give them any methods you want:
var table = document.getElementById('table');
table.update = function() {
this.innerHTML += 'table updated ';
}.bind(table);
var chart = document.getElementById('chart');
chart.update = function() {
this.innerHTML += 'chart updated ';
}.bind(chart);
document.getElementById('table').update();
document.querySelector('#chart').update();
Example: http://jsbin./uReyIRi/1/edit
You can add new methods to the DOM objects via their prototypes.
/* extend existing prototype */
HTMLTable.prototype.update = function() {
console.log( this );
}
/* call new method */
document.querySelector( 'table' ).update();
https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype