jQuery Sample

jquerysample.js

// Jake Toolson
// This code allows a user to select option(s) from one box and move them over to another and then the selections are saved to the database and can be changed at anytime.  Although simple, the select box' content changed dynamically based on live input from the user. The user could also filter out the results by typing in keywords.  In addition, and what was most difficult was the fact that the browsers don't handle setting already selected options to an inactive state!  Surprising, I know but I figured out a way around this.  Oh and in addition, the user was limited to the number of selections.
// Also, the reason I am sharing this code sample, is because I wrote it in 2005 and even though jQuery, the javascript framework this utilizes, has been upgraded numerous times, this code still works and has remain untouched since (mainly due to time constraints).  Sure it could be optimized and cut in half but let it do its thing!

  $().ready(function(){ 

    // Color variables when an option is disabled
    var bgColor = "#FFFFFF";
    var txtColor = "#999999";
    // default option group label
    var group_label = "Scheduling Point";
    
    // Ajax display content   
    $('.categorySelect').click(function(){      
      // Get the currently selected options and pass them through ajax
      // which will disable already selected options which prevents duplicates
      $('#list2 option').each(function(i) {
        $(this).attr("selected", "selected");
      });
      $('#filter').val('');
      var categoryValue = $('#categories input[@name="category"]:checked').val();
      var selectedOptions = $('#list2').val();  

      // Determine the names of the option groups
      switch (categoryValue)
      {
        case "sp" :
          group_label = "Scheduling Point";
          break;
        case "sl" :
          group_label = "Sub-LAP";
          break;
        case "pp" :
          group_label = "Price Point";
          break;
        case "ml" :
          group_label = "Muni-LAP";
          break;
        case "gr" :
          group_label = "Generator";
          break;
        case "cl" :
          group_label = "Custom LAP";
          break;
          
        default :
          group_label = "Scheduling Point";
      }
      
      $.ajax({
        type: "POST",
        url:  "node_selection_ajax.php",
        data: "category=" + categoryValue +"&selected=" + selectedOptions,
        error:  function (xhr, desc, exceptionobj) {
            alert(xhr.responseText);
        },
        success:function(html){
            $("#list1wrapper").html(html);
        }
      }); 
        
      $().ajaxSend(function(r,s){  
        $("#ajaxMessage").show(); 
      });            
      $().ajaxStop(function(r,s){  
        $("#ajaxMessage").fadeOut("slow");  
      }); 
      // Because we have to add the selected attribute in order to pass
      // the values through to AJAX, now that we no longer need them, unselect them.
      $('#list2 option').each(function(i) {
        $(this).removeAttr("selected", "selected");
      });
    }); 
    
    // Ajax textual filter!  
      $("#filter").keyup(function () 
    {
      var filter = $(this).val();   
      // Get the currently selected options and pass them through ajax
      // which will disable already selected options which prevents duplicates
      $('#list2 option').each(function(i) {
        $(this).attr("selected", "selected");
      });
            
      var categoryValue = $('#categories input[@name="category"]:checked').val();
      var selectedOptions = $('#list2').val();  
      
      $.ajax({
        type: "POST",
        url:  "node_selection_ajax.php",
        data: "category=" + categoryValue +"&selected=" + selectedOptions +"&filter=" + filter,
        error:  function (xhr, desc, exceptionobj) {
            alert(xhr.responseText);
        },
        success:function(html){
            $("#list1wrapper").html(html);
        }
      });   
      $().ajaxSend(function(r,s){  
        $("#ajaxMessage").show(); 
      });            
      $().ajaxStop(function(r,s){  
        $("#ajaxMessage").fadeOut("slow");  
      }); 
      // Because we have to add the selected attribute in order to pass
      // the values through to AJAX, now that we no longer need them, unselect them.
      $('#list2 option').each(function(i) {
        $(this).removeAttr("selected", "selected");
      });   
    });   
    
    // Select Options from 2nd Menu and Save
    $('#mainSelections').submit(function() {
      $('#submit').attr("disabled","true").attr("value", "Updating, please wait...");
      $('#list2 option').each(function(i) {
        $(this).attr("selected", "selected");
      });
    });

    //Set the current total
    $("#currenttotal").text("<?php echo $total_node_count?>");
    $("#list2").attr('size', (listCounter('#list2 option') + currentSelectionCounter('#list1 :selected')+ 6));

    // Double CLick to add to & from 
    $("#list1wrapper").dblclick(function() { addTo('#list1', '#list2', group_label); });
    $("#list2").dblclick(function() { moveFrom('#list2', '#list1'); });

    // Use push buttons to add to & from
    $("#add").click(function(e) {  addTo('#list1', '#list2', group_label); });
    $("#remove").click(function(e) { moveFrom('#list2', '#list1'); });

    $('#removeAll').click(function(e){ removeAll('#list2'); });     
    
    // if an option needs disabling, disable it (uses:emulatedisable.js for IE bug)
    if ($.fn.emulateDisabled) 
    {
      $('#list1').emulateDisabled();
    }
      if ($.fn.obviouslyDisabled)
      {
      $('#list1').obviouslyDisabled({textColor: '#999999', bgColor: '#FFFFFF'});
      }
  });

  // Function to add selected item to saved list  
  function addTo(from, to, group)
  {
    var dest = $(to)[0];
    if (overMaxLimit('#list1 :selected','#list2 option')) 
    {
      alert("You can only have <?php echo $maxNodes ;?> items");
    }
    else
    { //var group = "Scheduling Point";   
      var append_group = ("#list2 optgroup[label='"+group+"']");        
        $(from+" option:selected").clone().each(function() {
          if (this.disabled == true) return
          $(this)
          .appendTo(append_group)
          .attr("selected", false);
        });
      $(from+" option:selected")
        .attr("selected", false)
        .attr("disabled", true)
      
      if ($.fn.obviouslyDisabled)
      {
            $(from).obviouslyDisabled({textColor: '#999999', bgColor: '#FFFFFF'});
      }
      $("#currenttotal").text((listCounter('#list2 option') + currentSelectionCounter('#list1 :selected')));
      $("#list2").attr('size', (listCounter('#list2 option') + currentSelectionCounter('#list1 :selected')+ 6));
    }
  }
  
  // Function to remove selected saved item
  function moveFrom(from, to)
  {
    var dest = $(to)[0];
    $(from+" option:selected").each(function() 
    {
      select = $(this)
      val = select
        .attr("selected", false)
        .val();
      select.remove();
      $('option:disabled', $(to)).each(function() 
      {
        if (this.value == val)
        {
          $(this).attr("disabled", false);
        }
      });
    });
    
    if ($.fn.obviouslyDisabled)
    {
        $(to).obviouslyDisabled({textColor: '#999999', bgColor: '#FFFFFF'});
    }
    $("#currenttotal").text((listCounter('#list2 option') - currentSelectionCounter('#list2 option:selected')));
    $("#list2").attr('size', (listCounter('#list2 option') + currentSelectionCounter('#list1 :selected')+ 6));
  }

  // Function to remove all options back to main list
  function removeAll(me) {
    var total = $("#currenttotal").text();
    if (total !== '0')
    {
      var answer = confirm('Are you sure you want to remove all?');
      if (answer)       
      {
        $(me + ' option').attr('selected', true);
        moveFrom('#list2', '#list1');
      }
    }
  }
  
  // Count current options in saved list
  function listCounter(lc,cs)
  {
    return $(lc).length;
  }

  // Count currently selected options
  function currentSelectionCounter(dataInput)
  {
    return $(dataInput).length;   
  } 

  // Add currently selected options to current options to determine if over max
  function overMaxLimit(lc,cs)
  {
    if ((currentSelectionCounter(cs) + listCounter(lc)) > <?php echo $maxNodes ;?>)
    {
      return true;
    }
    else
    {
      return false;
    }
  }
  </script>

jquerysampledisabled.js

jQuery.fn.emulateDisabled = function() 
{
  return this.each(function()
  {
    // if (jQuery.fn.obviouslyDisabled) jQuery(this).obviouslyDisabled();
    if (jQuery.browser.msie) eDAdd(this);
  });
  function eDRestore(selectBox) 
  {
    jQuery('option', selectBox).each(function()
    {
      if(this.selected && this.disabled)
      {
        this.selected=false;
        if (selectBox.multiple == false) selectBox.selectedIndex = selectBox.selectCurrent;
    }

    });
  }
  function eDAdd(selectBox)
  {
    selectBox.selectCurrent = '';
    jQuery(selectBox).focus(function(){ this.selectCurrent = this.selectedIndex; });
    jQuery(selectBox).change(function(){ eDRestore(this); });
  }
};

jQuery.fn.obviouslyDisabled = function(settings) 
{
  // set some sensible defaults
  settings = jQuery.extend({
    textColor: '#FFFFFF',
    bgColor: 'graytest'
  }, settings);
  return this.each(function() 
  {
    jQuery('option', this).each(function() 
    {
      if (jQuery.browser.msie) {
        if (this.disabled) 
        {
          this.style.color = settings.textColor;
          this.style.backgroundColor = settings.bgColor;
        }
        else
        {
          this.style.backgroundColor = "";
          this.style.color = "";
        }
      }
    });
    if (jQuery.browser.msie)
    {
      var bg = (this.style.backgroundColor) ? this.style.backgroundColor : '';
      var diff = (bg == '#FFFFFE') ? '#FFFFFF' : '#FFFFFE';
      this.style.backgroundColor = diff;
      this.style.backgroundColor = bg;
    }
  });
};