Follow Along as I Stumble on the Path to Learning RoR

Posts tagged “jquery

Triggering jQuery on Page Load

I had some jQuery on a page that changes with a change to a field in a form, like so:

<%= tax.select(:state , Order::STATES ,{:prompt => ‘Select State’}, :id => “state”,:onchange => “render_sales_tax()”) %>

The issue was that when a user received an error with the form and the user populated the field again (ie :state), then when the view was rendered again (ie format.html { render :action=>”new” }  ), the  jQuery would not be triggered again because the field was already populated when rendered again (so no onChange event).

To fix this, I had to add this line above the jQuery function in the <script> section of the page:

window.onload = render_sales_tax();

This way the jQuery triggered and then onChange it would update again (if necessary).


Rounded Image Corners

I wondered how Twitter made all of the uploaded images have rounded corners. I found a wonderful jQuery script, jQuery corners which does just this:

http://jquery.malsup.com/corner/

apply an id to your picture, like so

:id=>”rounded_corners”

then add this script:

$(‘#rounded_corners’).corner();


Sliding Panel

I implemented a sliding panel where users could click a link and see links to FAQs.  I was able to implement it in just a few minutes using this awesome demo and tutorial by John Phillips:

http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/

Sliding panels are a great way to save space on pages, yet make info or a form easily available to your users (with no page refresh).


Switching from jQGrid to Data Tables

Was finding using jQGrid was becoming way more complicated than it should be. Moved to data tables, which also runs on jQuery. For me, what was nice was that someone did a tutorial on how to integrate it with Twitter Bootstrap (which I was already using) to make it look good as well. If you don’t use Twitter Bootstrap, you can also use the jQuery UI roller to make a style and color scheme to make the table look nice.

Data tables included the functionality I needed – search and pagination and all I had to do was point the javascript to my html table code. Simple.

http://datatables.net/blog/Twitter_Bootstrap