Rails JS Response, hiển thị cả trạng thái và mẫu?

Question

Trong ứng dụng đường ray hiện tại của tôi, tôi đang sử dụng thư viện ajax uploader yêu cầu bạn trả lời bằng json {success:true} để cho biết tệp đã được tải lên thành công.

Trong ứng dụng của tôi, các tệp là hình ảnh và sau khi tải lên, tôi muốn thêm trang này vào trang. Thông thường tôi sẽ làm một cái gì đó như:

respond_to do |format| 
    format.html { redirect_to @resource, :notice => 'Created.' } 
    format.js 
end 

Trong ví dụ trên phản ứng JS của tôi sẽ làm cho mẫu thích hợp, chẳng hạn như create.js.erb mà có thể nói điều gì đó giống như ...

$('#resources').append('<%= escape_javascript(render '@resource') %>'); 

Đây là cách tôi có thực hiện những việc như bình luận Ajax, v.v. trong quá khứ. Bây giờ, để có được người tải lên làm việc respond_to khối của tôi hiện đang thực hiện điều này:

format.js { render :json => { :success => true } } 

Điều này làm cho việc tải lên nhưng dường như ngăn cản tôi thêm partials render để trang như tôi thường làm với một phản ứng Ajax.

Câu hỏi của tôi là, có cách nào để thực hiện cả hai không? Nếu không, bạn sẽ điền trang với các đối tượng được hiển thị sau khi chúng đã được tạo thành công như thế nào?

Answer 1

Bạn không thể thực hiện cả hai trực tiếp từ bộ điều khiển hoặc sử dụng mẫu xem. Dường như người tải lên ajax đang mong đợi một phản hồi có thể được phân tích cú pháp dưới dạng JSON, vì vậy việc thêm bất kỳ phản hồi nào khác bằng mẫu (có nghĩa là không làm format.js { render :json => { :success => true }}) sẽ không gửi lại JSON làm nội dung phản hồi.

Nhìn vào source cho plugin, bạn có thể thấy rằng bạn có thể xác định phương thức chạy onComplete sẽ cung cấp cho bạn phản hồi JSON.

Điều này chưa được kiểm tra, nhưng sẽ giúp bạn gần gũi. Vì vậy, bạn nếu mở rộng đáp ứng JSON của bạn như

format.js do 
    partial = render_to_string @resource 
    render :json => { :success => true, :partial => partial } 
end 

Sau đó, trong javascript của bạn trên trang khi bạn thiết lập uploader ajax của bạn, thêm callback

var uploader = new qq.FileUploader({ 
    element: document.getElementById('file-uploader'), 
    action: '/upload', 
    onComplete: function(id, fileName, responseJSON) { 
    $('#resources').append(responseJSON.partial); 
    } 
});