How can I pass a event and a parameter to a javascript function?

Question

I have the following:

var oTable = $('#dataTable').dataTable({
    iDisplayLength: -1,
    ...
    ...

$("#dataTable tbody").on("click", "tr", gridClickHandler);

function gridClickHandler(oTable) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(this).addClass('row_selected');

I was told that the $(this) event will be passed to the function but I need to also pass something else as I found it gives an error relating to oTable.

How can I modify my call to gridClickHandler and the gridClickHandler function so it passes a reference to oTable and also so the $(this) works.

Šime Vidas · Accepted Answer · 2012-07-29 16:37:42Z

1

If the variable oTable is declared in an outer scope, the gridClickHandler function will have access to it, so you don't need to pass it manually. As a matter of fact, event handlers receive the event object as the first argument, so you're actually shadowing the TABLE reference.

For example:

var foo = 123;

var clickHandler = function ( foo ) {    
    // here, foo is not 123, but the event object  
    // the outer variable foo is shadowed by the local variable foo  
};

Just remove the first argument:

var gridClickHandler = function () {

Now, oTable is retrieved from the outer scope.

(Also notice, how I assign a anonymous function expression to a variable, instead of using a function declaration.)

Btw, inside the function, this refers to the TR element.

edited Jul 29, 2012 at 16:37

answered Jul 29, 2012 at 16:32

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Alan2 Over a year ago

Sorry but I am not sure what you mean by oTable being declared in outer scope. oTable is declared in one .js file and the gridClickHandler is declared in another file with function gridClickHandler(oTable) {

Alan2 Over a year ago

Can you explain why you don't use the function declaration. Thanks.

Šime Vidas Over a year ago

@Gemma Is oTable a global variable? If not, how is the second .js file accessing it? (Non-global variables of one .js file, are not accessible to other .js files, unless you explicitly attach the value to some sorts of shared object.)

Alan2 Over a year ago

I don't think it's global which is maybe my problem. How can I make it into a global variable? oTable is created as a var inside the function refreshDone(responseText, entity) { }

Šime Vidas Over a year ago

@Gemma You need to make it available to the other .js file. There are different ways to do this. One would be to define a global variable which acts as your namespace (e.g. var MYAPP = {}; outside of any function), and then assign properties to it (e.g. MYAPP.oTable = ...;). Now, the second .js file can create a local variable which stores that reference from your namespace (e.g. var oTable = MYAPP.oTable). I recommend a tutorial on JavaScript namespaces.

|

Roland Mai · Accepted Answer · 2012-07-29 16:31:47Z

1

You could use an anonymous function:

$("#dataTable tbody").on("click", "tr", function(event) { gridClickHandler(oTable); } );

answered Jul 29, 2012 at 16:31

Roland Mai

31.2k8 gold badges58 silver badges61 bronze badges

3 Comments

Alan2 Over a year ago

I tried this but the code insider gridClickHandler does not seem to know about $(this)

Seimen Over a year ago

What do you expect $(this) to be?

Alan2 Over a year ago

I need it to be the row I clicked on.

Kir · Accepted Answer · 2012-07-29 16:53:37Z

0

Try this:

$("#dataTable tbody").on("click", "tr", gridClickHandler);
gridClickHandler.oTable = oTable;

function gridClickHandler(event) {
    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass('row_selected');
    });
    $(event.target).addClass('row_selected');
}

edited Jul 29, 2012 at 16:53

answered Jul 29, 2012 at 16:42

Kir

6944 silver badges7 bronze badges

3 Comments

Alan2 Over a year ago

I tried it before. oTable doesn't seem to be available inside gridClickHandler.

Kir Over a year ago

I was added one string after first string. Try this.

Alan2 Over a year ago

It gives me SCRIPT5009: 'oTable' is undefined inside the gridClickHandler.

Collectives™ on Stack Overflow

How can I pass a event and a parameter to a javascript function?

3 Answers 3

7 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related