Question

Does anyone know where I can find some example code for implementing ajax tabs with jquery ui in Ruby on Rails 3? I’m unable to find anything I can’t seem to get it to work based on examples I have found for form and comment processing. Mind you, I am very new to ruby on rails.

Based on the jquery ui tabs with ajax example from the jquery site, I have the following code:

simple controller – maps_controller.rb

  def index
  end

  def test1
    @test = "test string"
  end

associated view – index.html.erb

<script>
        $(function() {
            $( "#tabs" ).tabs({
                ajaxOptions: {
                    error: function( xhr, status, index, anchor ) {
                        $( anchor.hash ).html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                            "If this wouldn't be a demo." );
                    }
                }
            });
        });
        </script>



<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#content_area">Preloaded</a></li>
        <li><%= link_to "Test1" , test1_path %></li>
    </ul>
    <div id="content_area">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

</div><!-- End demo -->

test1.html.erb

<%= @test %>

The ajax functionality seems to work. When clicking the test1 tab, the entire page in loaded into the div with the appropriate data. Obviously this isn’t the functionality desired – I just want the test1.html.erb to show, not it rendered with application.html.erb.

I also have found various rails specific examples that use the convention of having a .js.erb file. (http://blog.bernatfarrero.com/jquery-and-rails-3-mini-tutorial/)

Any input on this would be great.

Answer 1

Put your javascript code in application.js file, include it in your view and you are good to go.