[jQuery] Re: Optimize and Improve my code please

Tue, 15 Apr 2008 06:50:35 -0700 


Great suggestions Karl! Thanks for the help. :)

Feels good to be back on the horse. ;)

Rey...

Karl Swedberg wrote:


Hi Rey,
I agree with Alexandre that there isn't a whole lot to do, but that caching $(this) and any other jQuery object used multiple times is a good idea. 

One minor correction regarding this:

Indicating the tag makes jquery look for the tags first, then the id
in the bunch of select tags found.
In recent jQuery versions, the $('element#id') selector expression does not look for the tag name first. It matches on the id first and then checks if the tag matches, which is much faster. Still, a bare $('#id') selector will be nominally faster because it doesn't perform that check. (I can't remember exactly when the optimization took place, but pretty sure all 1.2.x versions have it.) 




Here are a couple other things you might want to consider:
1. I can't see where you're declaring the variable j, but if you can get away with storing its length before the for loop, that could give it a little boost: 

  var jLength = j.length
  if (jLength){
                                       for (var i = 0; i < jLlength; i++) {
2. Also note that you don't have to write "jLength > 0". Just "jLength" will do. It won't improve performance, as far as I know, but it'll save you a couple bytes. 

3. Two possible optimizations for this line...

if($(this).val() == ""){
Let's say you've already stored the value in a variable called thisVal. You could do this:
if(thisVal === ""){ // might improve performance; probably imperceptible 

... or this ...

if(!thisVal){             // will save a couple bytes
If anyone else out there wants to weigh in on any of my suggestions, I'm eager to learn. Wondering what other people's experience has been with these types of optimizations. Is it even worth optimizing like this if there isn't a noticeable problem/lag? 


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Apr 15, 2008, at 5:07 AM, Alexandre Plennevaux wrote:



Hi Rey,
There isn't much to optimise in my opinion. But you can make maintenance easier. 

you could start by

1./ storing $(this) into a variable:  var $this = $(this). Same for
$(this).val() since you use it several times. var myVal =
$(this).val();

2./ change selectors:

$("select#cert_id")

into

$("#cert_id")

as this uses getElementById which is the fastest selector to date.
Indicating the tag makes jquery look for the tags first, then the id
in the bunch of select tags found.


3/ for easier maintenance, i would personally put that defaultOptions
html into a hidden html node, or a separate file.



Hope this helps,

Alexandre

On Tue, Apr 15, 2008 at 5:21 AM, Rey Bango <[EMAIL PROTECTED]> wrote:


Guys,

I have a code snippet which I would like to improve and optimize and was
hoping to get some help. The form has two chained selects so when you select an option on the first one, the second gets populated via an Ajax call. The code is based off of Remy Sharp's chained select article and I've added some 
code for special situations. Selectbox #1 lists available products while
selectbox #2 will display certificates belonging to the product chosen.

Here are the situations:
1) If product selected has certificates, then second dropdown is populated 
via Ajax call
2) If product selected has no certificates, then second dropdown is made
invisible
3) If product selected is "All" (which has an empty value), then second
dropdown is populated with all certificates the same as when the page
initially loaded

I know this code can be done better and I'm all ears on improving it.

$(function(){

 $("select#prod_id").change(function(){

               // Default options
var defaultOptions = '<option value="">All</option><option value="141">CCA for Citrix Access Gateway 4</option><option value="142">CCA 
for Citrix Access Gateway 8 Enterprise Edition</option><option
value="144">CCA for Citrix EdgeSight 4</option><option value="143">CCA for 
Citrix NetScaler 8</option><option value="140">CCA for Citrix Password
Manager 4</option><option value="170">CCA for Citrix Provisioning Server
4</option><option value="145">CCA for Citrix WANScaler 4</option><option
value="139">CCA for XenApp (Presentation Server 4)</option><option
value="157">CCA for XenServer 4</option><option value="146">CCEA for Citrix XenApp (Presentation Server 4)</option><option value="147">CCIA for XenApp 
(Presentation Server 4)</option><option value="148">CCSP 2007
</option><option value="149">CCSP for Citrix Presentation Server
4</option>';

               if ($(this).val() == ""){
                       $("select#cert_id").html(defaultOptions);
$( "select#cert_id option:eq(0)" ).attr("selected", 
true );
                       $("#certification").show();
               }
               else
               {

$.getJSON("/courses/exams/getcerts.cfm?headerescape=true",{id:
$(this).val()}, function(j){
                               var options = '';

                               if (j.length > 0){
for (var i = 0; i < j.length; i++) { options += '<option value="' 
+ j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                                       }
$("select#cert_id").html(options); 
                                       $( "select#cert_id option:eq(0)"
).attr("selected", true );
                                       $("#certification").show();
                               }
                               else
                               {
                                       options = '<option
value=""></option>';
$("select#cert_id").html(options); 
                                       $("#certification").hide();
                               }
                       });
               }
       })
})





--
Alexandre Plennevaux
LAb[au]

http://www.lab-au.com

Reply via email to