Inspect all jQuery events on an element

Very useful

$("SELECTOR").data("events");


All bound event handlers are stored in the elements data context under the events key
This can be very useful when debugging with tools like FireBug

$("form").submit(function () { alert('submit form'); });
$("form").data("events");
> Object { submit=[1] }


Resources

• http://www.bennadel.com/blog/1727-Viewing-jQuery-DOM-Event-Bindings-With-FireBug.htm 

asp mvc jquery from cdn with fallback to localhost

Paul Irish has some nice code for loading jquery from cdn but then falling back to localhost if it cannot be loaded from cdn. Check it out here.

For asp mvc you usually also want jquery.valdiater and possibly unobtrusive validation as well. Here is an html helper to generate html mark up that handles loading these via cdn with fallback

The helper



Usage, most likely from your layout file



And the rendered html

jQuery iframe auto height plugin

This week I needed to automatically size the height of an iframe to the height of its contents. After a bunch of Google searches I came across this post from Nathan Smith here; It used jquery but applied the auto height to every iframe on the page, I could not use the code out of the box and so the 'jQuery iframe auto height plugin' was born. I made a few slight changes to the original code and wrapped it in a jquery plugin.

Download from github

http://github.com/house9/jquery-iframe-auto-height

see the README file for usage

jsfiddle is awesome!

http://jsfiddle.net/

I had seen some blog posts on jsfiddle before, but just checked it out for the first time, a great way to experiment with javascript code, comes built in with jquery, mootools and more

Attribute "target" exists, but can not be used for this element.

These days I am all about valid xhtml and was surprised to receive this validation error when using the target attribute on an anchor tag.

Attribute "target" exists, but can not be used for this element.

I found a nice work around that does not involve window.open, using jquery we can hack the attribute on 'after' the dom has loaded.

Now instead of target='_blank' you can just use class='target-blank', if the browser does not support javascript it will not open in a new window but the link will still work - and we have our valid xhtml.

Resources

• cre8asiteforums
• W3C Markup Validation Service
• JQuery

Ajax error handling with ruby on rails and jquery

This sample is just a slight modification of this post 'Handling AJAX errors and displaying friendly error messages to users'. Basically I wanted to maintain the existing rails error handling for non-ajax pages and then have good handling for errors in both development and production mode; i.e. get errors in the browser when in development mode and show a nice message when in production mode.

Modify /app/controllers/application.rb; add the rescue_from macro and the handler_exception method

Then add a global javascript method for presenting the errors; most likely in application.js

Then a sample usage, jquery making an ajax post to a rails controller action

in development mode the error message is returned in an easier to read view in the firebug console and an alert message is presented that has a truncated version of the error

in production mode just a friendly error message.

Resources

• Handling AJAX errors and displaying friendly error messages to users
• Rails source code rescue.rb
• Rails views source on your install lib/action_controller/templates/rescues
• jquery ajax

jqueryUI effect error with Google Chrome and Safari

Ran into a strange issue using jqueryUI highlight effect, the issue only occurred with Webkit browsers (Google Chrome and Safari) and only when I was manipulating the background property of the element that was being highlighted.

Using a slightly modified version of the demo. I tweak the background image before applying the highlight effect

$("#highlight").click(function() {
  $(this).css("background", "url(some_image.png) no-repeat");
  $(this).effect("highlight");
});

This resulted in the highlight appearing but not going away. Then checking it in the debugger the following javascript error was being generated - "Uncaught TypeError: Cannot read property '0' of undefined," Changing the background manipulation to the following fixed the issue.

$(this).css("background-image", "url(some_image.png)");
$(this).css("background-repeat", "no-repeat");
$(this).effect("highlight");

Update 2009-03-06: You also need to make sure that if there is an existing style on the element being highlighted it is using the more verbose style tags of background-image and background-repeat or the same error will be encountered

use jquery to disable a button when clicked

jquery is such a great javascript library, the more I use it the more I like it

NOTE: the above code snippets are untested - cut, pasted and modified from real code that was tested (and worked!)