jquery

Adjust jQuery.cycle values programmatically

Blog

When using the jQuery.Cycle plugin, the settings are configured on setup. Sometimes, however, you want to adjust them on the fly: adjust the speed in a subsequently loaded javascript file, adjust the speed based on hover or click, etc.

To do so, use the data element to get the cycle.opts values:

  var cycleopts = jQuery("#some-cycle").data('cycle.opts');

And change the values in particular to adjust:

  if (typeof jQuery("#some-cycle").cycle == 'function') {
    jQuery("#some-cycle").data('cycle.opts').timeout = 9000;
  }

All the cycle options are at http://jquery.malsup.com/cycle/options.html

Prevent multiple form submits with jQuery in webkit/chrome

Blog

Okay, so, you don't want to submit a form twice. While there are server side ways to prevent a form from being accepted twice, it's nice to prevent the need with a little client-side prevention, too. Better user experience, as a bonus.

Using jQuery, you could do this:

  $(".class-on-my-submit-button").click(
    function(e) { 
        $(this).attr('disabled', 'disabled');
    }
    );

The problem with this is that the disabled attribute on the button prevents the form from submitting at all in webkit browsers: Chrome and Safari (ref: http://www.google.com/support/forum/p/Chrome/thread?tid=152f74d4890dc84f&hl=en)

Instead, add a class and check for the class' existence to determine if the form should submit or not.

$(".class-around-each-form form").submit(function(e) {
        if ($(this).hasClass('my-disabled-class')) { e.preventDefault(); return false; }
        $(this).addClass('my-disabled-class');
        return true;
        });

I have a div with a class named .class-around-each-form around each form on a particular page, a quirk specific to my set up. You could use $("form").submit(...) also.

Stupid simple and frustrating if you didn't realize its need, or didn't test on all the browsers.

View events bound to an element

Snippet

View events bound to an element in jquery.

// List bound events:
console.dir( jQuery('#elem').data('events') );
 
// Log ALL handlers for ALL events:
jQuery.each($('#elem').data('events'), function(i, event){
    jQuery.each(event, function(i, handler){
        console.log( handler.toString() );
    });
});

Check if a jquery object has a particular class/id

Snippet

Use is() to check if a class exists on a jQuery element.

if ($(#elm).is('.checkthisclass')) { 
 // #elm has the class
} else { 
 //#elm doesn't have the class
}

Retrieving HTML select values with jQuery

Snippet

Ways to select the various option values from a select list, using jQuery.

/*
<select name="payment" id="selectList">
 <option value="1">Visa</option>
 <option value="2">Mastercard</option>
 <option value="3">American Express</option>
 <option value="4">JCB</option>
</select>
*/
 
 
$('#selectList').val(); 
// returns value of options 1, 2, 3, or 4
 
$('#selectList :selected').text()
// returns text of options Visa, Mastercard, if selected
 
// multiple select:
var sel = [];
$('#multiple :selected').each(function(i, selected) {
  sel[i] = $(selected).text();
});