[jQuery] Re: Optimize and Improve my code please

[Rey Bango]

Thanks Alexandre. I just wanted to do a sanity check on the code 
structure itself in case there was a better way to build it.

The suggestions for minimizing the function calls makes sense and I'll 
do that.

Thanks for your help! :)

Rey

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();
                                }
                        });
                }
        })
 })