Tự động hiển thị chế độ xem theo một phần với Rails và jQuery

Question

Trong ứng dụng của tôi, tôi có một trang tiểu sử người dùng có ba tab và một div trống bên dưới nó. Có một tab mặc định có màu trắng và hai tab khác tối hơn và "không được chọn".

Tôi muốn làm cho nội dung trong div bên dưới hiển thị một phần dựa trên tab nào được chọn.

Tôi đã có nó làm việc đến mức mà jQuery cho phép tôi bấm vào các tab khác nhau và nó thay đổi màu sắc của các tab mà không làm mới trang.

Tuy nhiên, tôi bị kẹt về cách lấy phần để hiển thị chính xác. Bất kỳ suy nghĩ về điều này? Tôi bị mắc kẹt về cách tự động gọi một phần dựa trên tab nào được chọn trong jQuery và thực sự không chắc chắn nếu tôi cần một tệp khác để tương tác với điều này để làm cho nó hoạt động. Tôi tương đối mới với jQuery trong một ứng dụng đường ray vì vậy tôi không chắc chắn nếu tôi đã làm tất cả mọi thứ tôi cần.

tài trang hồ sơ: Ứng dụng> xem> show.html.erb

<ul class="profile-tabs">  

     <%= link_to "<li class=\"tab selected\">Tab 1</li>".html_safe, userprofile_users_path, remote: true %> 
     <%= link_to "<li class=\"tab\">Tab 2</li>".html_safe, userprofile_users_path, remote: true %> 
     <%= link_to "<li class=\"tab\">Tab 3</li>".html_safe, userprofile_users_path, remote: true %> 

    </ul> 

<div id="profile-content"> 

<!--content goes here --> 

</div> 

jQuery: Ứng dụng> tài sản> javascripts> userprofile.js

$(function() { 
     $("li.tab").click(function(e) { 
      e.preventDefault(); 
      $("li.tab").removeClass("selected"); 
      $(this).addClass("selected"); 
      $("#profile-content").html("<%= escape_javascript(render partial: 
"How can I make this partial name be generated based on the value of the selected li?")%>"); 
     }); 
    }); 

Người dùng điều khiển: Ứng dụng> Bộ điều khiển> users_controller .rb

class UsersController < ApplicationController 

def show 
    @user = User.find(params[:id]) 
end 

def userprofile 
    respond_to do |format| 
     format.js 
    end 
end 
end 

Có ba phần tương ứng với ba tab và tôi cần jQuery bằng cách nào đó tự động thay đổi một phần được gọi dựa trên tab đã chọn.

Tôi thực sự đánh giá cao một số trợ giúp với điều này hoặc nếu có một tài nguyên khác có thể trả lời câu hỏi của tôi. Tôi đã không thể tìm thấy bất cứ điều gì trực tiếp trả lời những gì tôi đang cố gắng làm.

Cập nhật ------

tôi đã sử dụng các giải pháp cung cấp rails_has_elegance nhưng không được xuất hiện trong div Tôi đang nhắm mục tiêu. Tuy nhiên, tôi thấy điều này trong đầu ra đường ray máy chủ, mà có vẻ như nó đang làm những gì tôi muốn:

Started GET "https://stackoverflow.com/users/currentoffers" for 127.0.0.1 at 2013-03-28 21:20:01 -0500 
Processing by UsersController#currentoffers as JS 
    Rendered users/_offers.html.erb (0.1ms) 
    Rendered users/currentoffers.js.erb (0.8ms) 
Completed 200 OK in 4ms (Views: 3.7ms | ActiveRecord: 0.0ms) 
[2013-03-28 21:20:01] WARN Could not determine content-length of response body. Set  content-length of the response or set Response#chunked = true 

Answer 1

Nếu bạn muốn tránh được rất nhiều thông số, chỉ cần thực hiện 3 hành động khác nhau trong điều khiển của bạn, một cho mỗi tab, mỗi tab trả lời js. Sau đó tạo một [hành động] .js.erb cho mỗi hành động trong quan điểm với một cái gì đó như thế này:

$("#tab_content").html("<%= escape_javascript(render('tab1')) %>"); 

Bạn thực sự cần phải giao tiếp với máy chủ thông qua một yêu cầu ajax, trong khi chức năng onclick của bạn sẽ tải trước đó một phần và bạn không còn điều gì từ xa nữa.

Answer 2

viết hành động trong bộ điều khiển có ba điều kiện cho 3 tab khác nhau. gọi ajax bằng cách nhấp vào bất kỳ tab nào, chuyển thông số nhận dạng nói 'tab1' hoặc 'tab2' hoặc 'tab3' và cũng có các tham số bắt buộc nếu bạn cần. trong bộ điều khiển, nhận thông số và chức năng mô hình cuộc gọi có chứa logic nghiệp vụ thực tế.

được dẫn đến một bộ điều khiển và chỉ làm một phần trong một div bên dưới tất cả 3 tab sử dụng js.erb