CODEWITHSUNDEEP
ruby-on-rails-3
tvalent2
tvalent2

Reputation: 5009

Rails 3 jQuery UI Tabs issue loading with Ajax

I'm using jQuery UI Tabs to handle tabs my Rails 3 app. One tab is without Ajax, one is with Ajax. I'm new to programming and Rails, and while I got a ton of help from SO thus far I'm having two issues:

  1. Clicking my Ajax link loads the entire site's layout in my div. I want to just load my template.
  2. No matter which profile I view, the content loaded only applies to the current_user's messages.

Here's the container for the tabs:

<div id="tabs">
  <ul id="infoContainer">
    <li><a href="#tabs-1">About</a></li>
    <li><%= link_to "Messages", '/profiles/profile_messages', :remote => true %></li>
  </ul>
  <div id="tabs-1">
  </div>
</div>

The second link is where I see the entire site layout. Ideally what I want is to replace the About div with the my profile_messages template.

My profiles_controller.rb:

def profile_messages
  @profile = User.find(user.id).profile
  @messages = User.find(@profile.user_id).messages
  respond_to do |format|
    format.html # index.html.erb
    format.xml  { render :xml => @messages }
  end
end

My profile_messages.html.erb template:

<div id="tabs-2">
<% for message in @user.messagse %>
  <div class="message">
  </div>
<% end %>
</div>

Here is my routes.rb:

match "/profiles/profile_messages" => "profiles#profile_messages"
resources :profiles do
  get :profile_messages, :on => :collection
end

My jQuery in application.js:

$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "There was an error loading this tab. Please try again." );
            }
        }
    });
});

I also have profile_messages.js.erb:

$( "#tabs" ).html( "<%= escape_javascript( render(@user.messages) ) %>" );

Any ideas on what's going on?

UPDATE: I got the layout to disappear by inserting the following into my profile_messages

def profile_messages
  @profile = User.find(user.id).profile
  @messages = User.find(@profile.user_id).messages
  respond_to do |format|
    format.html { render :layout => nil }
    format.xml  { render :xml => @messages }
  end
end

Upvotes: 0

Views: 1522

Answers (1)

bricker
bricker

Reputation: 8941

The problem is in your controller. A few things about the profile_messages action:

def profile_messages
  @profile = User.find(user.id).profile
  @messages = User.find(@profile.user_id).messages
  respond_to do |format|
    format.html # index.html.erb
    format.xml  { render :xml => @messages }
  end
end

1) where is user.id coming from? You should be sending some parameters with the ajax request, so unless 'user' is a protected method in your controller, you'll need to supply the find method with params[:user_id] or something similar.

2) Use render :layout => false to fix the template issue.

3) As a side note, your first two lines are all over the place. It would be easier (and faster) to do this:

@user = User.includes(:messages, :profile).find(params[:user_id])
@messages = @user.messages # already in memory
@profile = @user.profile # already in memory

Upvotes: 3

Related Questions