Click here to Skip to main content
11,922,026 members (57,396 online)
Rate this:
Please Sign up or sign in to vote.
See more: Javascript
As of now, I have a created a below code -
function autoFilter(selfObject, addFilter, dataSource, headerStartsAt ) {
  this.init = function() {
    var filterHolder = document.createElement('DIV'); = 'filterHolder';
    dataSource.parentNode.insertBefore(filterHolder, dataSource);
    var filterContent = '<span style="float: left;">Filter By: <select id="CmbSearch">' + 
        '<option value="-1">Global Search</option>';
    var MetaData = [];
    // logic for creating MetaData goes here
    for(var i = 0, j = MetaData.length; i < j; i++ ) {
      if(MetaData[i] == null) continue;
      filterContent += '<option value="' + MetaData[i].columnIndex + '">' + MetaData[i].columnLabel + '</option>';
    filterContent += '</select><input  önkeyup="' + selfObject + '.filterTable(this, \'' + + '\', this.previousSibling.value,' + headerStartsAt + ')" type="text">';
    filterContent += '<input type="button" value="Clear"  önclick="this.previousSibling.value = \'\'; ' + 
    filterContent += '<span id="TotalCount" style="float: right;">Total Records - ' + 
        (dataSource.rows.length-headerStartsAt) + '</span>';
    filterHolder.innerHTML = filterContent;
  this.filterTable = function(phrase, tableId, searchIn, headerStartsAt) {
   // code for filter table here
  if(addFilter) {
The objective of above code is to add search facility dynamically to the exisitng table without extra effort.

Only following line is required to be included in by the developer to add this search/filter facility.
var anyUserObject = new autoFilter('anyUserObject', true, document.getElementById('myDataTable'), 1);
Or below one is also valid usage -
var someObject = new autoFilter('someObject', false, document.getElementById('otherDataTableXYZ'), 3);
document.getElementById('myFilterButton').onClick = someObject.init();

From the above code, I have a problem in the portion which is underlined - the selfObject parameter.

As you can see in the init function, the selfObject is dynamically used to form HTML string, which will execute onKeyUp event. And to add this search facility to multiple table/grid on the page, I need to capture all user defined variables used for creating this object so that those variables can be used in the dynamically generated HTML string.

Question :
Is there any better way of avoiding developers to pass the name of the variable as parameter ?
Or, how to bind/invoke public method within an Object with a dynamically generated code ?

Please advise.

Niral Soni
Posted 25-Apr-13 0:53am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Check out jquery on. It also handles events on elements not yet created.[^]

Good luck!
Niral Soni 25-Apr-13 11:43am
Its not about handling events.
Its about how to bind a dynamically created string that will act as a function to be called when the event occurs.

Here, I have an Input box, KeyUP event, and a function to be called on this event. This function is created dynamically, and it requires the name of the variable used for creating the object.

"someObject" and "anyUserObject" are two such user-defined variables used for invoking the function onKeyUp event as -

Hope you got it...
E.F. Nijboer 25-Apr-13 15:49pm
But why not use them directly? It looks like there is no reason to send the variables as text because you can simply take the parameters directly and use them directly. Your function would simply accept an object reference you can use.
Niral Soni 26-Apr-13 6:54am
I can not use them directly because they are user defined variables. Not a fixed static object.

Here, I have an Object ("autoFilter"), having two public methods ("init" and "filterTable")
The instance created (by anyone who uses this code) for this object will be used for invoking these two public methods, "manually".

In order to invoke these methods automatically (and dynamically), I must have the reference to the "user-defined" instance of the Object.

E.F. Nijboer 26-Apr-13 7:02am
Maybe you could use selectors instead. It is actually a lot like my answer in the solution. You define handlers for all elements with a certain class for example. Depending on the class it will handle specific events, like filtering.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 568
1 Dave Kreskowiak 285
2 Sergey Alexandrovich Kryukov 173
3 Richard MacCutchan 155
4 ppolymorphe 135
0 OriginalGriff 7,036
1 KrunalRohit 4,530
2 Sergey Alexandrovich Kryukov 3,286
3 George Jonsson 2,840
4 Suvendu Shekhar Giri 2,216

Advertise | Privacy | Mobile
Web04 | 2.8.151120.1 | Last Updated 25 Apr 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100