My JQUERY Cheat Sheet

Bind JQUERY UI Autocomplete to .Live Event

Note:  .Live is deprecated in JQUERY 1.7

$('.search').live('keyup.autocomplete', function(){
   $(this).autocomplete({
      source : 'url.php'
   });
});

Get Element ID

$(‘this’).attr(‘id’) or $(‘this’).get(0).id;

Hide and Show an Element

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

Example:  $( “.target” ).hide(); equavalent to .css( “display”, “none” )

Example Selector Syntax

var name = $(“input#name”).val();

Ternary Operation

var isChecked = $(“#new_flag”+i).attr(‘checked’)?true:false;

 

Check if field is numeric

isNum = $.isNumeric( qty ); //qty could be a negative number or decimal

After AJAX

To Get plugin working again on updated html, put plugin call as success call back function.  Example:

 var jqxhr = $.post(dest, "", function(html) {
                        $("#exp_view").html(html);
                    })
                    .success(function() {
                        $('#tree').abixTreeList();
                    })
                    .fail(function() {
                        alert( "Error Getting Exploded View From Server" );
                    });

 

Forms

Checkbox

<input type=”checkbox” id=”ans” value=”1″ />

$(“#ans”).attr(‘checked’) to check if it checked

$(“#ans”).val()  gets value of checkbox

 

Doing a page redirect:

// similar behavior as an HTTP redirect window.location.replace("http://stackoverflow.com"); // similar behavior as clicking on a link window.location.href ="http://stackoverflow.com";

Manipulation Cookies:

  • Download jquery.cookie from this repository in github.
  • copy jquery.cookie.js to your development environment.
  • include the .js file in the header section of html. For example: <script src="js/jquery.cookie.js"></script>

 

Useful Ajaxload gif generator:  http://www.ajaxload.info/