Click here to Skip to main content
Rate this: bad
good
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.id = '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, \'' + 
        dataSource.id + '\', this.previousSibling.value,' + headerStartsAt + ')" type="text">';
    filterContent += '<input type="button" value="Clear"  önclick="this.previousSibling.value = \'\'; ' + 
        'this.previousSibling.onkeyup();"></span>';
    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) {
    this.init();
  }
}
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.
 
Thanks.
Niral Soni
Posted 25-Apr-13 0:53am

1 solution

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

Solution 1

Check out jquery on. It also handles events on elements not yet created.
http://api.jquery.com/on/[^]
 
Good luck!
  Permalink  
Comments
Niral Soni at 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 -
someObject.filterTable();
and
anyUserObject.filterTable();
 
Hope you got it...
E.F. Nijboer at 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 at 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 at 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.
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

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

  Print Answers RSS
0 OriginalGriff 475
1 Maciej Los 339
2 Richard MacCutchan 225
3 BillWoodruff 219
4 Suraj Sahoo | Coding Passion 155
0 OriginalGriff 8,759
1 Sergey Alexandrovich Kryukov 7,407
2 DamithSL 5,639
3 Maciej Los 5,269
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web03 | 2.8.1411028.1 | Last Updated 25 Apr 2013
Copyright © CodeProject, 1999-2014
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