Page 1 of 2

Man I Love jQuery

Posted: Tue Dec 16, 2008 5:29 pm
by volomike
I tell you, I use jQuery every day or every other day now as a freelancer, and I have to tell you how impressed I am with it. Each day I learn something cool with it that I didn't know before, and it gives me a lot of raw power that otherwise I would have been racking by brains to figure out and get working properly across the various browsers.

Today I was happy to learn the jQuery .one() event. Here's a classic example why you might want to use this. Imagine a form where you put sample text inside a field. For instance, in the telephone number field, you might put something like (000) 000-0000 (please forgive me if you're not in the USA, but you get the idea). And then you can grey it out with a style on that field. So, instead of #333 (near black), you can use #999 (mid-grey).

Okay, fine, but then you may want to make it such that when the field receives focus for the first time, it returns the font color in that field to #333 and clears the value out, and not make that focus function run any more than once. What's the fix?

Well, you could have implemented it with a boolean global var indicating whether this is the first time or not, and a .focus() function. You could probably think of a couple other ways. But the quick fix is this:

Code: Select all

$('#fldPhone').one('focus',function() {
  $('#fldPhone').val('').css('color','#333');
});
 
What this does is trap the focus of that field just once, clear the value of that field out, and then set its color back to #333. And all subsequent clicks in that field will never make it refire that event, which is exactly what I wanted. Notice the daisy-chaining of settings on $('#fldPhone') -- that's another perk of jQuery.

Of course, there's a lot more you can do with jQuery, and things like jQuery UI effects and drag and drop sortables are cool and easily implemented, but this one() routine was something new I learned today.

Re: Man I Love jQuery

Posted: Tue Dec 16, 2008 7:52 pm
by VladSun
I forgot about jQuery and felt in love with Ext JS these days ;)
Well, I code web applications and not web sites, so maybe this is the reason ... I don't know :)

Re: Man I Love jQuery

Posted: Tue Dec 16, 2008 8:21 pm
by josh
Could you go into some detail of the advantages / disadvantages of Ext Js vs Jquery?

Re: Man I Love jQuery

Posted: Tue Dec 16, 2008 9:36 pm
by volomike
For me, jQuery is more granular. I mean, I can use plugins when I need them, but most of the time I can build things myself with the tools they already give me. I also like the speed and compact code of jQuery compared to other frameworks. Last, the lead guy who makes jQuery also works for Mozilla on the Javascript engine team, and so jQuery has an unfair advantage at least in FF on being the most optimal library on top of Javascript than other frameworks.

BTW, side note -- they say that Chrome has an extremely fast Javascript engine in it, but the word on the wire is that Mozilla is about to outdo everyone with optimization in their Javascript engine coming out soon.

Oh, and another note -- don't trust Google Trends to tell you with Javascript framework is going to do better than others. I mean, Prototype has some sensational numbers, but the word Prototype could be used in all kinds of other things besides Javascript. And I mean that even if you type "Prototype Javascript" as well when doing a Google Trends search. In fact, I don't think Google Trends is good for much except identifying the hot keywords in affiliate marketing campaigns, and even then the Trends can be gamed by blackhat AMers who want to mislead others down the wrong keywords.

Oh, and jshpro2, tell the Queen the answer is 1 byte with an extra parity bit. But we all know that Alice in Wonderland is a Masonic ritual in disguise.

Re: Man I Love jQuery

Posted: Tue Dec 16, 2008 10:09 pm
by volomike
BTW, I'm looking for a modal dialog replacement to replace my use of alert() and confirm() in Javascript. There are several available based on jQuery. Which of these have you tried and liked and why? I'm looking for something that's lightweight, reliable across browser platforms, not much fuss, but yet based on jQuery.

Re: Man I Love jQuery

Posted: Tue Dec 16, 2008 10:12 pm
by John Cartwright
volomike wrote:BTW, I'm looking for a modal dialog replacement to replace my use of alert() and confirm() in Javascript. There are several available based on jQuery. Which of these have you tried and liked and why? I'm looking for something that's lightweight, reliable across browser platforms, not much fuss, but yet based on jQuery.
I prefer to use a lightbox when I need to force a user action. Most of the examples out there are for image galleries, but as usual with jquery can be adopted for many different uses.

I can PM you an example I have setup on one of my sites (I won't post it here since its not appropriate).

Re: Man I Love jQuery

Posted: Tue Dec 16, 2008 10:12 pm
by Eran
I use jqmModal a lot and it's great - http://dev.iceburg.net/jquery/jqModal/

There's an example on the site on replacing the alert() and confirm() methods

Re: Man I Love jQuery

Posted: Tue Dec 16, 2008 10:14 pm
by John Cartwright
Nice one Pytrin.

Re: Man I Love jQuery

Posted: Wed Dec 17, 2008 9:02 am
by josh
Yeah jquery rocks my socks, ext js looks cool too but I know nothing about it, there's also some crap called mootools an agency I consult for uses with joomla, its more geared towards plug and play widgets but is also a library too I think?

Re: Man I Love jQuery

Posted: Wed Dec 17, 2008 9:14 am
by Eran
Yeah, mootools is yet another javascript library. There was some tension between jQuery and mootools developers some time ago - http://ejohn.org/blog/i-learned-some-th ... ery-today/

Re: Man I Love jQuery

Posted: Wed Dec 17, 2008 9:45 am
by VladSun
jshpro2 wrote:Could you go into some detail of the advantages / disadvantages of Ext Js vs Jquery?
I found that the Ext js core (i.e. not 3rd party) libraries are more web application oriented than the jQuery core libraries.
Just look at the class names list at http://extjs.com/deploy/dev/docs/ under Ext tree node. And there are a plenty of plugins (3rd party e.g. http://extjs.eu/ ) for extending this core (but not limited) functionality.

Also, they have put a big effort in implementing data grids which is very important for me.

So, while jQuery is web (in general meaning) oriented, Ext js is more specific web application and that's why I prefer it over jQuery in my work.

Modal dialog? Well, Ext js has it by default ;)

There are even som adapter objects for jquery, prototype and yui, but I'm not sure how to use them ;) Never needed them.

Re: Man I Love jQuery

Posted: Wed Dec 17, 2008 11:41 am
by josh
Not sure what you mean by just look at the class names, so basically you like it because it provides functionality you need out of the box it sounds. I agree jquery's plugins leave something to be desired, but I'm more interested in the differences in the core itself...

Re: Man I Love jQuery

Posted: Wed Dec 17, 2008 12:47 pm
by VladSun
jshpro2 wrote:Not sure what you mean by just look at the class names, so basically you like it because it provides functionality you need out of the box it sounds. I agree jquery's plugins leave something to be desired, but I'm more interested in the differences in the core itself...
Yes, I've mentioned in my very first post that maybe becuase of the ready-to-use and web-application-specific functionality Ext provides I like it more than jQuery :) There are even layout managers (and I did hate them in the begining ;) )

I don't have an idea about the differences in the core itself, but I found them very similiar to each other (syntax, extending, etc.). I'm just an Ext JS end user ;)

Re: Man I Love jQuery

Posted: Wed Dec 17, 2008 1:00 pm
by josh
Alright I was just wondering if you're actually developing your own plugins what the difference was. For instance jquery passes context to callbacks, meaning in your event handlers "this" might refer to a jquery object that represents a DOM element and not the object, the workaround is to use .call() and .apply() if you're making an object. I guess I'd have to read up more on Ext js as well

Re: Man I Love jQuery

Posted: Wed Dec 17, 2008 1:10 pm
by VladSun
Yes, I'm developing some ExtJS extensions - I've extended JsonStore object with several features: ability to "write back" data to server, to have undo for deleted rows, and a isNew state for its rows :) So, now I have a fully functional data grid with bidirectional communication to the server :)

There is a very useful 'scope' argument added to almost everything (configs, function calls) ;)