Win a copy of Micro Frontends in Action this week in the Server-Side JavaScript and NodeJS forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Bear Bibeault
  • Junilu Lacar
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Henry Wong
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • salvin francis
  • Frits Walraven
Bartenders:
  • Scott Selikoff
  • Piet Souris
  • Carey Brown

Passing Argument To JavaScript Method

 
Ranch Hand
Posts: 129
Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am associating method to dynamically generated 'colElm' elements in below mentioned way:




But at the time of assigning this method to the event, it does not allow to pass Arguments to the 'doMouseOver' method.


Can any one help me to solve this problem.

Thank you...
 
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You don't pass arguments to the event handlers because you don't call them -- the browser does. And on real browsers, the Event instance is passed as the parameter to the function (Internet Explorer makes you grab it from window.event).

If you need extra data available in the handler, your best bet is to use a closure to make sure that the data is in scope when the handler executes.
 
ramnna jain
Ranch Hand
Posts: 129
Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you Bear ....

I want to provide more information to get better guidance....

//------------------ Case 1 --------------------
Suppose I am creating one column & assigning method for onmouseover event this way:



in this case the column is hard coded & I am passing argument ('0') to 'doSomeThing' function.

//------------------ Case 2 --------------------
Now if I want to create new 'td' as per some requirement & now I want to assign the same method to onmouseover event this way:



If I want to pass argument to assigned method, it is not possible because..
If I try to do like this:

It generates Error.

Any how I want to pass argument to the doSomeThing method. I need help....

Thank you...
 
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Like Bear said, you'll want to create a closure. The web has many resources on how to create and use JavaScript closures--they might be a good place to start. How best to use it depends on more specific requirements.
 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
With closures, you'd do something like:

The closure created by the inline function makes the value of index available inside the anonymous function even after the local variable has gone out of scope.

Another tactic would be to assign the index value as an expando, or perhaps a custom attribute, on the newly created element. Then you can retrieve it in the event handler, as the target of the event is available from the Event instance.
 
ramnna jain
Ranch Hand
Posts: 129
Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you very much Bear for your kind help...

I implemented the code & I am able to see desired functioning. I was in real trouble. Now I am out of it. Thank you.



 
Bear Bibeault
Marshal
Posts: 67451
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You're very welcome. It's essential to understand closures to bring your on-page scripting into the big leagues. Please make sure that you understand why and how all that works. It'll really help with your other, more-advanced scripting.
 
ramnna jain
Ranch Hand
Posts: 129
Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am facing another weird behavior by closure...

If I am setting onmouseover function in a loop and every time passing incremented value, then the last value is considered as the argument to the function.

Please check the code:




When I click on the 'Link0' then the alert shows 2 and
If I click on the 'Link1' then again it shows 2 in alert.

Please guide me to resolve the issue.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The value I is not being set when you are creating the funciton. You are only giveing a reference to the variable i. So when it is called the reference is one more than what the loop value is.

There are a couple of solutions easiest would be



Eric
 
ramnna jain
Ranch Hand
Posts: 129
Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you Eric... It solved the entire problem.


 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic