HOWTOs for Ruby on Rails and JavaScript

Manually trigger a delegated DOM event

Delegated jQuery events can be hard to fire programmatically for testing; native dispatchEvent with the right event class works better than trigger in many cases.

Edit

Rails 3: Make "link_to :remote => true" replace HTML elements with jQuery

Rails 3 remote links can replace page content with returned HTML, restoring the Rails 2 link_to_remote update behavior through jQuery and rails-ujs.

Edit

SudoSlider: a jQuery slider

Flexible jQuery content slider with minimal markup assumptions, customizable controls, and responsive slide sizing for mixed media like images, video, and text.

plugins.jquery.com

Edit

Soft-scroll to an anchor with jQuery

Links with anchor targets can jump abruptly; jQuery animation creates smooth scrolling to the destination and can preserve the URL hash.

Edit

How to create memory leaks in jQuery

Detached jQuery elements with event handlers or data can stay in memory because cache entries survive native DOM removal and old IE circular-reference limits.

Edit

Cucumber step to manually trigger javascript events in Selenium scenarios (using jQuery)

Selenium can miss browser events such as change during form input; a Cucumber step can fire jQuery-registered events manually with execute_script.

Edit

Autofocus a form field with HTML5 or jQuery

Automatically placing the cursor in a form field improves first interaction and removes an extra click. HTML5 autofocus works in modern browsers; jQuery can provide a fallback.

Edit

Unobtrusive JavaScript and AJAX

AJAX-inserted content needs re-running jQuery behavior bindings; $.unobtrusive() scopes activation to new DOM nodes and activateUnobtrusiveJavascript() triggers it manually.

Edit

A jQuery plugin pattern every jQuery plugin should use

jQuery plugins often need a consistent architecture to stay customizable and extensible. A standard plugin pattern helps avoid rigid, hard-to-maintain implementations.

markdalgleish.com

Edit

Capybara: Waiting for pending AJAX requests after a test

Selenium tests can fail when pending AJAX calls are aborted as Capybara closes the browser tab. Blocking new requests and waiting for in-flight work reduces flaky teardown errors.

Edit

jQuery.cssHooks – jQuery API

Custom $.cssHooks normalize browser-specific CSS properties and extend .css() and .animate() handling for inconsistent style values.

api.jquery.com

Edit

Dynamically uploading files to Rails with jQuery File Upload

Immediate multi-file image uploads in Rails with progress bars, previews, and cached attachments support a single gallery form and responsive UI.

Edit

jQuery: Find a selector in both descendants and the element itself

jQuery find ignores the current element and searches only descendants; findWithSelf returns matching descendants and the element itself.

find_with_self.js

Edit

Date or datetime picker for touch devices

Touch devices often break jQuery UI date and datetime pickers. Mobiscroll or slider access buttons provide a usable mobile alternative.

Edit

Fix multiple CKEditor instances using jQuery adapter - fixed since 4.2

jQuery adapter use can break CKEditor form submission, sending original textarea values instead of edited content when multiple instances share the built-in save path.

ckeditor.com

Edit

Testing drag&drop with Selenium

Selenium webdriver cannot trigger native drag events, making drag-and-drop interfaces hard to test. jQuery-based simulation libraries can emulate sortable interactions in test code.

Edit