Follow Along as I Stumble on the Path to Learning RoR

Posts tagged “javascript

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:

<%= , 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).


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.

Scrolling Text

I wanted to scroll some text and came across two options:

using java:

with html:

I ended up using html since it was easier and less to load on page load.

Links for using :remote for Ajax and Javascript in Rails 3

Some good articles on how to use Ajax/Javascript with Rails 3:

Easy Mouseover Tooltips

unitinteractive shares an easy javascript tooltip that shows a grey (background) tooltip when you hover over it.  all you need to do is download (and then include) the javascript and css, and then in your html where you want to put the tooltip, put this html:

<a class “tip” href=”#” title=”hi”>mouseover me and i’ll say ‘hi’! </a>