Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
jQuery Gotcha - Functions in Events

I just spent way too long wondering why my silly page kept refreshing itself, one of the forms on the page was submitting itself over and over ... I had been refactoring some Javascipt to allow me to use it generically across pages.

My orginal code to bind an ajax call to the submit of the form was as follows:

$("#SearchForm").submit(function() { ... previous ajax code inline here ... ; return false; });

And all was fine ... except I wanted to reuse the inline code, so I put it into a function:

$("#SearchForm").submit(GetTableContent(controller, displaySelect));

And suddenly the page started refreshing automatically, making debugging it rather hard to even find the mistake. After 20 mins scanning through the jQuery documentation on form submit I noticed that "submit()" reads "Trigger the submit event of each matched element" but that "submit(fn)" reads "Bind a function to the submit event of each matched element" ... clearly the first version was being used by jQuery, where as my code should have been the second one - after all I had a function in there now?

Then I twigged it, the jQuery (fn) wants a plain basic function with no parameters ... so a quick change wrap my new function with a parameterless function resolved the problem:

$("#SearchForm").submit(function() { GetTableContent(controller, displaySelect); return false; });

Annoying ... I hate wasting 20 mins on silly things like this ...

 


Posted 10-09-2008 11:43 AM by Jak Charlton
Filed under:

[Advertisement]

Comments

sergiopereira wrote re: jQuery Gotcha - Functions in Events
on 10-09-2008 9:18 AM

Casey, there's nothing wrong with the docs. The syntax you tried at first has a problem that may not be apparent at first. Since the submit(fn) method expects a Function, GetTableContent(a, b) has to *return* a function. You're actually invoking GetTableContent in that line, not passing the function itself. You can get around that by doing what you did or create a function that produces the needed function (so many functions, right?)

//I'm assuming GetTableContent returns false.

function createHandler(p1, p2){

return function() {

return GetTableContent(p1, p2);

};

}

and use it

$('#SearchForm').submit(createHandler(controller, displaySelect));

Jak Charlton wrote re: jQuery Gotcha - Functions in Events
on 10-09-2008 11:07 AM

Cheers Sergio ... I didn't think there was anything wrong with the docs ... just my understanding of what (fn) meant in that context ... of course it makes sense when you read closely, but I'm a C# developer at heart and used to having strong typing to stop me doing silly things like this :)

The alternative syntax is probably a little messier ... but useful to know about ...

Little by little I'm kicking JQuery into line, occassionaly it kicks me back ... brilliant though JQuery is, VS sucks for JS work ...

Ben Scheirman wrote re: jQuery Gotcha - Functions in Events
on 10-22-2008 1:42 PM

C# would have done the same thing.  You aren't deferring execution of a function when you call it.  You're calling it right there, and it takes the return value and stuffs it in the .submit( ).

It's an easy mistake though, I've done it before too.

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)