Force an event in jQuery

Question

To all;

I have created a up and down counter for decimal places and when a change occurs I have it force a blur event to recalculate fields with the following code:

$('button').click(function(){  
 var decPlaces = document.calculator.dpv.value * 1;
 var hii = document.calculator.origin.value;
 if (this.id == 'up' && decPlaces < 9){       
  document.calculator.dpv.value  =  decPlaces + 1;
  if (hii != ''){
   document.calculator[hii].focus();
   document.calculator[hii].blur();
  }
 }
 if (this.id == 'down' && decPlaces > 0){ 
  document.calculator.dpv.value  =  decPlaces - 1;
  if (hii != ''){
   document.calculator[hii].focus();
   document.calculator[hii].blur();
  }
 }

Works well in FF but drags in others particularly IE - suggestions on making the cleaner and faster is appreciated.

Bob

Answer 1

You're mixing jQuery and DOM calls, you should really avoid doing that.

Create specific handlers for the Down and Up buttons (by using either ID tags or class tags) and then change the value of your calculator value by calling the jQuery $("#calculator").val(decPlaces + 1);

Answer 2

The official jquery way to trigger/force an event is

$("selector").trigger("blur");
$("selector").trigger("focus");

But I'm not sure this is what will help you.

Answer 3

After seeing some of the helpful comments I have made the following changes:

jQuery(function($) { $("button").bind("click", function(e){
var decPlaces = $('#dpv').val() * 1; var hi1 = $('#origin').val(); if (this.id == 'up' && decPlaces < 5){
$('#dpv').val(decPlaces + 1); if (hi1 != ''){ $('#' + hi1).trigger("blur"); } } if (this.id == 'down' && decPlaces > 0){ $("#dpv").val(decPlaces - 1); if (hi1 != ''){ $('#' + hi1).trigger("blur"); } } }); $('input.auto').focus(function(){ if (this.id != 'dpv'){
$(this).parent().addClass("curFocus") } }); $('.clearAll').focus(function(){ $('.clearAll').val(""); }); $('input.auto').blur(function(){ $(this).parent().removeClass("curFocus")
var sqft = 10.76391041670972192890; //square feet per square meter var lbs = 2.20462262184877566540; //pounds per kilo var bwiv = ''; var sfiv = ''; var bwmv = ''; var smmv = ''; $('#origin').val(this.id); if((this.id == 'bwi' || this.id == 'sfi') && this.value != ''){ // imperial if(this.id == 'bwi'){ bwiv = $.fn.autoNumeric.Strip(this.id); sfiv = (3000 / bwiv); $('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv)); } if(this.id == 'sfi'){ sfiv = $.fn.autoNumeric.Strip(this.id); bwiv = (3000 / sfiv); $('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv)); } bwmv = (((bwiv / lbs) / (3000 / sqft)) * 1000); smmv = (1000 / bwmv); $('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv)); $('#smm').val($.fn.autoNumeric.Format('smm', smmv)); } if((this.id == 'bwm' || this.id == 'smm') && this.value != ''){ //metric if(this.id == 'bwm'){ bwmv = $.fn.autoNumeric.Strip(this.id); smmv = (1000 / bwmv); $('#smm').val($.fn.autoNumeric.Format('smm', smmv)); } if(this.id == 'smm'){ smmv = $.fn.autoNumeric.Strip(this.id); bwmv = (1000 / smmv); $('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv)); } bwiv = ((((bwmv / 1000) * lbs) / sqft) * 3000); sfiv = (3000 / bwiv); $('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv)); $('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv)); } }); });

The up down buttons that increase or decrease the decimal setting still are not very responsive in IE.

FYI - the autoNumeric function call is to a plugin that I created that that does numeric formatting on the fly.

Thanks again.

Bob

Answer 4

I hate unreadable code, so I just formatted that for you :)

jQuery(function($) { $("button").bind("click", function(e){
         var decPlaces = $('#dpv').val() * 1; 
         var hi1 = $('#origin').val(); 
         if (this.id == 'up' && decPlaces < 5){
              $('#dpv').val(decPlaces + 1); 
              if (hi1 != ''){ 
                   $('#' + hi1).trigger("blur"); 
              } 
         } 
         if (this.id == 'down' && decPlaces > 0){ 
              $("#dpv").val(decPlaces - 1); 
              if (hi1 != ''){ 
                   $('#' + hi1).trigger("blur"); 
              } 
         } 
     }); 

 $('input.auto').focus(function(){ 
      if (this.id != 'dpv'){
           $(this).parent().addClass("curFocus") 
      } 
 }); 

 $('.clearAll').focus(function(){ $('.clearAll').val(""); });

 $('input.auto').blur(function(){ 
      $(this).parent().removeClass("curFocus")
      var sqft = 10.76391041670972192890; //square feet per square meter 
      var lbs = 2.20462262184877566540; //pounds per kilo 
      var bwiv = ''; 
      var sfiv = ''; 
      var bwmv = '';  
      var smmv = ''; 

      $('#origin').val(this.id); 
      if((this.id == 'bwi' || this.id == 'sfi') && this.value != ''){ 
           // imperial 
           if(this.id == 'bwi'){ 
                bwiv = $.fn.autoNumeric.Strip(this.id); 
                sfiv = (3000 / bwiv); 
                $('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv)); 
           } 
           if(this.id == 'sfi'){ 
                sfiv = $.fn.autoNumeric.Strip(this.id); 
                bwiv = (3000 / sfiv); 
                $('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv)); 
           } 
           bwmv = (((bwiv / lbs) / (3000 / sqft)) * 1000); 
           smmv = (1000 / bwmv); 
           $('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv));                      

           $('#smm').val($.fn.autoNumeric.Format('smm', smmv)); 
      } 
      if((this.id == 'bwm' || this.id == 'smm') && this.value != ''){ //metric     
           if(this.id == 'bwm'){ 
                bwmv = $.fn.autoNumeric.Strip(this.id); 
                smmv = (1000 / bwmv); 
                $('#smm').val($.fn.autoNumeric.Format('smm', smmv)); 
            } 
           if(this.id == 'smm'){ 
                 smmv = $.fn.autoNumeric.Strip(this.id); 
                 bwmv = (1000 / smmv); 
                 $('#bwm').val($.fn.autoNumeric.Format('bwm', bwmv)); 
           } 
           bwiv = ((((bwmv / 1000) * lbs) / sqft) * 3000); 
           sfiv = (3000 / bwiv); 
           $('#bwi').val($.fn.autoNumeric.Format('bwi', bwiv));  
           $('#sfi').val($.fn.autoNumeric.Format('sfi', sfiv)); 
      } 
 }); 

});