Tyler Muth’s Blog

Technology with a focus on Oracle, Application Express and Linux

jQuery Selectors Will Change Your Life

Posted by Tyler Muth on December 17, 2008

OK, maybe not your life but it will absolutely change the way you code JavaScript. If you haven’t used jQuery yet, here’s the description from the jQuery site:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery is technology agnostic, so you can use it in APEX, J2EE, PHP, .Net, Rails, etc. I’ve been using it with APEX for the last few months and there’s a pretty good chance it will actually be included in the 4.0 release of APEX.

Why are selectors so great? Because they completely change the way you work with JavaScript. Traditionally, people add JavaScript such as onClick() events in the code that renders a page. This is easy for hand-coded HTML or other bare-bones technologies such as PHP (when not using a framework). But in the case of frameworks such as APEX, you actually don’t have access to all of the code that rendered the page. Using selectors, you can get very granular access to any element on the page after it is rendered. For example, the following code changes the style of EVERY link on your page:

$(document).ready(function() {
  $("a").css('text-decoration','none');
});

Or maybe you want to add an onClick event to every div that has a class named “clickme”:

$(document).ready(function() {
    $("div[class=clickme]").click(function() {
       alert('Yep, you clicked me');
    });
});

The following code turns any div on the page red when you hover over it, then white when you move your mouse out of it.

$(document).ready(function() {
    $("div").hover(function() {
       $(this).css('background-color','#ff0000');
    },
        function() {
       $(this).css('background-color','#ffffff');
    });
});

Getting a little more APEX specific, here’s a bit of code that prints all values from the “SAL” column out to the Firebug Console (you must have Firebug installed):

// find all TD's with a class of t20data and headers=SAL.  For each of those, run some function.  console.log is Firebug specific.
$("td[class=t20data][headers=SAL]").each(function(){
  console.log($(this).html());
});

Building on the previous example again, lets change the color of the data in a column based on its value:

// find all TD's with a class of t20data and headers=SAL.  For each of those, run some function.  console.log is Firebug specific.
$("td[class=t20data][headers=SAL]").each(function(){
  sal = parseFloat($(this).html());
  if (sal<1000){
     theColor='green';}
  else if (sal >= 1000 && sal < 2500){
     theColor='yellow';
  }
  else{
       theColor='red';}
   $(this).css('color',theColor);
});&#91;/sourcecode&#93;

Lets continue to build on this example by changing the color of every cell in a row based on the value of the SAL column.  Notice that we walk up the DOM to the TR, then down the DOM to every TD in the row.

&#91;sourcecode language='javascript'&#93;
$("td&#91;class=t20data&#93;&#91;headers=SAL&#93;").each(function(){
 sal = parseFloat($(this).html());
 if (sal<1000){
 theColor='green';}
 else if (sal >= 1000 && sal < 2500){
 theColor='yellow';
 }
 else{
 theColor='red';}
 //$(this)  is currently the TD of the sal column.
 // Walk up to its parent TR, then down to all child TDs.  This effectively loops over every TD in a row
 $(this).parent('tr').children('td').each(function(){
 // $(this) is now the curent TD that is a child of the TR
 $(this).css('color',theColor);
 });
});&#91;/sourcecode&#93;

My final example if from a question on the APEX Forum (<a href="http://forums.oracle.com/forums/message.jspa?messageID=3178134" target="_blank">here's the thread</a>) where someone wanted to replace all instances of the APEX Datepicker item with the jQuery UI Datepicker (I posted about this control <a href="https://tylermuth.wordpress.com/2008/07/16/jquery-datepicker-and-apex/" target="_blank">here</a>).  In APEX 3.1 or greater (not 100% which versions) all datepickers are wrapped in '&lt;fieldset class="datepicker"...'.  This code looks for any of those items on page load and replaces them.

$(document).ready(function(){ 
    $('fieldset[class=datepicker]').find('img').css('display','none');

    $('fieldset[class=datepicker]').find('input[type=text]').datepicker({ 
             showOn: "both", 
             buttonImage: "http://ui.jquery.com/repository/demos_templates/images/calendar.gif", 
             buttonImageOnly: true}); 
}); 

Luis Cabrel pointed out that previous versions of APEX did not have the fieldset code and posted his solution in that same thread:

$(document).ready(function(){
    $('img[title=Calendar]').hide();

    $('img[title=Calendar]').parent().parent().
            find('input[type=text]').datepicker({
            closeAtTop: true,
            dateFormat: "dd-M-yy",
            showOn: "both",
            buttonImageOnly: false,
            duration: 'fast',
            firstDay: 1});
            });

Imagine how much time that would save you if you had even a couple of applications with 10-15 datepickers per app.

The Firefox plugin “Firebug” makes it so much easier to test and develop selectors since you can use HTML > Inspect to find the DOM nodes you want to select, then use the console to test them. console.log() is also infinitely easier to use for debugging than alert() since you don’t have to click “OK” for each event.

I simply can’t stress enough how useful jQuery selectors are. I strongly encourage everyone to take some time to explore them. There is a great tutorial called “Getting Started With jQuery” that goes into more detail. If you have other cool jQuery solutions with APEX, I’d love to see them!

19 Responses to “jQuery Selectors Will Change Your Life”

  1. Hi Tyler

    Very useful post as usual, please keep them coming.

    I’m planning to spend time in 2009 on jQuery in Apex.

    Regards

    Mark

  2. Hi Tyler,

    You are absolutely correct! JQuery is the way to go.

    Thanks for the nice article,
    Dimitri

  3. Carsten said

    Thanks Tyler for this great examples.

  4. mwarden said

    jQuery doesn’t change the way you write JavaScript; it changes JavaScript itself. JavaScript libraries either embrace and extend JavaScript or try to ‘fix’ it. jQuery is the latter, and goes a step further to ‘fix’ things that aren’t even broken (what’s the point of using ‘click’ rather than the standard ‘onclick’, other than ego?).

    There are JavaScript libraries that understand lambda languages and with each version show an increased understanding of how JavaScript can be used without changing it. These are not the most popular libraries. I’m not sure what that fact means, exactly.

  5. Gary said

    Just to point out that the “@” style selectors were removed for JQuery 1.3
    See
    http://docs.jquery.com/Selectors

    “Note: In jQuery 1.3 [@attr] style selectors were removed (they were previously deprecated in jQuery 1.2). Simply remove the ‘@’ symbol from your selectors in order to make them work again.”

  6. Tony Miller said

    Tyler,
    Great article.. I have a question for you, that I just posted to the forum..

    It involves using the tooltip_enable function with template buttons. Is it possible to give tooltips to these style buttons? I have tried a few variations on them and found nothing that works.. Looked at jquery options, but I believe it is the way template buttons are built in apex..

    Any suggestions?

    Thank you,

    Tony Miller
    Webster, Tx

  7. […] Let me know if you have any other ideas, like I said at the start, I’m not thrilled with this approach, but if the rest of your app is already using the jQuery datepicker, and you need one with a time component maybe this will work. Thanks to Tyler Muth for his earlier blog/sample app using jQuery datepicker and for the bit about using the fieldset selector which he blogged about here. […]

  8. Cruirepef said

    visit us!
    newsbox.cc
    newsbox.us
    nbstatus.wordpress.com
    NOW!

  9. My friend on Facebook shared this link and I’m not dissapointed that I came to your blog.
    p.s. Year One is already on the Internet and you can watch it for free.

  10. Regarding the ajax controller method, it would of course be better to not get the entire viewmodel in a real world situation and then pass that on to the view, but since this is a brief demo I thought I could get away with this in this example😉 .

  11. […] jQuery Selectors Will Change Your Life […]

  12. Automagaz said

    Thanks it a very usefull post ! I ‘m interested in jQUery! Thanks@

  13. Googlos said

    Good thanks a lot !My friend on Facebook shared this link and I’m not dissapointed that I came to your blog.

  14. Dickison said

    If you had to only eat three things for the rest of your life, day in and day out, what would they be?

  15. […] Resources used in connection to above snippet: http://www.javascripttoolbox.com/temp/table_cellindex.html https://tylermuth.wordpress.com/2008/12/17/jquery-selectors-will-change-your-life/ […]

  16. Virendra Dugar said

    Hi,

    I have also come across a simple, short article that explains the most used selectors with examples.

    http://jquerybyexample.blogspot.com/2011/05/jquery-selectors-examples.html

  17. Pr3fix’s World…

    […]jQuery Selectors Will Change Your Life « Tyler Muth’s Blog[…]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: