jQuery links and elements not reloading in rails

Leave a comment

If you have a page of jquery that works the first time you load it, but disappears thereafter
(except for full page refreshes) see if you need to add this gem to your project:

https://github.com/kossnocorp/jquery.turbolinks

Turbolinks is a gem used in rails asset pipeline to make your apps fast. It does this by caching only body and title on your pages.

But javascript won’t get reloaded. So if you are using jquery you need something to keep your javascript bind events alive.

That’s what this gem does.

You can read more about jquery and turbolinks here:

https://github.com/kossnocorp/jquery.turbolinks
https://github.com/rails/turbolinks#jqueryturbolinks

Advertisement

How to add jquery-ui theme to your rails app

Leave a comment

Assuming you’ve already installed jquery-ui this is how you now add a theme.

Go and select a theme at http://jqueryui.com/themeroller/
Download it.

Unzip it and copy the javascript themed file

jquery-ui-rails-js

into your rails javascript dir

jquery-ui-rails-javascript-dir

Copy the theme ‘redmond’ and everything inside

jquery-ui-rails-redmond-css

to your css dir

jquery-ui-rails-css-dir

If all goes well you should have something that looks like this:

jquery-ui-theme-datepicker

Links that help:
http://www.railsdeveloper.net/2010/06/rails-and-jquery-how-to-integrate-jquery-ui-into-your-rails-app/

How include jquery-ui in your rails app

3 Comments

jquery-ui is a separate project from jquery. You don’t get jquery-ui by default with a new rails app. So to add it do the following.

Gemfile
gem ‘jquery-ui-rails’

application.js
//= require jquery.ui.all

https://github.com/joliss/jquery-ui-rails

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <script>
      $(function() {
          $( "#datepicker" ).datepicker();
      });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>

<%= yield %>

</body>
</html>

How to do an jQuery ajax call from a dropdown using Rails

6 Comments

Here is a simple example I got going that refreshes a text box based on the user changing the selection from a drop down box.

1. Setup jQuery

Download or add a link to the jQuery CDN as shown below.

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Blog</title>
  <%= stylesheet_link_tag    "application" %>
  <%= javascript_include_tag "application" %>
  <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

2. Create a view.

This view will populate a textbox with a ‘hello’ message whenever it’s selection has changed.

/views/foo/bar.html.erb

<div class="field">
  <label>Category</label><br />

  <select name="category[id]" id="category_id">
    <option value="1">art</option>
    <option value="2">bikes</option>
  </select>
</div>

<input type="text" size="57" id="category_textbox">

3. Create a controller.

Our controller doesn’t do much at the moment.

class FooController < ApplicationController
  def bar

  end
end

But to get it to work we need to add one route to our route table.

routes.rb

match ':controller(/:action(/:id(.:format)))'

Once we do that we should see this:

3. Add the ajax.

To detect the change in the drop down, we will use jQuery to register for the select ‘change’ event. Once caught, we will then do an ajax GET to the backend to retrieve our JSON response.

/views/foo/bar.html.erb

 <script type="text/javascript">
jQuery(function($) {
  $("#category_id").change(function() {
    var state = $('select#category_id :selected').val();
    if(state == "") state="0";
    jQuery.getJSON('/foo/bar/' + state, function(data){
        $("#category_textbox").val(data.message);
    })
    return false;
  });
})
</script>

<div class="field">
  <label>Category</label><br />

  <select name="category[id]" id="category_id">
    <option value="1">art</option>
    <option value="2">bikes</option>
  </select>
</div>

<input type="text" size="57" id="category_textbox">

Note: This isn’t my preferred method of embedding javascript and I read that if I used the jQuery live method to register for events I should be able to extract this code into it’s own javascript file but I wasn’t able to get it going. Would love it if someone could show me what I am doing wrong – more information here (http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/).

4. Send back the response.

Now we just need to configure our controller to send back a json response, as well as handle the original html response.

class FooController < ApplicationController
  def bar
    @msg = { "success" => "true", "message" => "hello"}

    respond_to do |format|
      format.html
      format.json { render json: @msg }
    end
  end
end

Once it’s all working, your show see something like this using Google Developer Tools:

It’s not perfect, but this example at least shows how to hook up jQuery and make an ajax call to a rails backend. I will update this once I learn more about the rails Asset Pipeline and why I wasn’t able to put the javascript into it’s own file.

%d bloggers like this: