Question

确定。在用户控制器的展示页面上，我有<div/>：

<div class="globalwidth" id="picshow">
</div>

<div class=fadecontent></div>

此外，在用户页面上，我有：

<% @photos.each do |p| %>
<%=  link_to image_tag(p.image(:medium)), photo_path(p), remote: true %>
<% end %>

以上链接假设将用户带到照片控制器的show动作（_show.html.erb），该动作显示更大版本的图像。我希望使用ajax在用户页面中使用id <div/>在#picshow内部分加载，同时使其看起来像弹出窗口。

我在照片目录中创建了一个show.js.erb ...

$('#picshow').html('<%=j render partial: 'photos/show' %>')
loadPopup()

而且我也在我的application.js文件中调用了这个函数，这样它就像一个淡入淡出的弹出窗口.... FYI，fadecontent是我在用户节目中的另一个div，应该让弹出窗口后面的一切都消失了。

var popupStatus = 0;

function loadPopup() {
    if(popupStatus==0) {
        $(".fadecontent").fadeIn("slow");
        $(".largepic").fadeIn("slow");
        popupStatus = 1;
    }
}

function disablePopup() {
    if(popupStatus==1) {
        $(".fadecontent").fadeOut("slow");
        $(".largepic").fadeOut("slow");
        popupStatus = 0;
    }
}

这是照片的节目控制器和动作：

def show

@photo = Photo.find(params[:id])
  respond_to do |format|
  format.js
    end 
 end

这就是我在照片控制器中的_show.html.erb中所拥有的内容

<div class="largepic">
    <div class="largeimage left">
        <%=image_tag @photo.image(:large) %>
    </div>
</div>

这是CSS

.largepic {
    position: absolute;
    z-index: 10;
    margin: 125px auto;
    left: 15px;
    width: 930px;
    display: none;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.largeimage {
    padding: 18px;
}

.largeimage p {
    font-size: 75%;
    line-height: 19px;
    width: 450px;
}

基本上，我希望将部分照片/节目渲染为div中的部分，其ID为“picshow”，同时看起来像一个可以转义或xed的弹出窗口。默认情况下它没有显示。 loadPopup函数中的fadeIn使其显示。

Answer 1

由于您已经提到AJAX是您主要关注的问题，因此这是一个有效的示例。此示例最初加载较小的图像。单击较小的图像后，使用AJAX加载较大的图像，并在转义键上将照片重置为较小的图像。您应该能够修改它以实现您的目标。

应用程序/视图/照片/ index.html.erb

<div id="photo-image">
    <%= render partial: 'photos/photo_image', locals: { width: 50, height: 64 } 5>
</div>

应用程序/视图/照片/ _photo_image.html.erb

<%= link_to image_tag('rails.png', width: "#{width}", height: "#{height}", photo_path(1), remote: true %>

应用程序/视图/照片/ show.js.erb

$('#photo-image').html("<%= escape_javascript(render partial: 'photos/photo_image', locals: { width: '110', height: '128' }) %>")

$(document).keyup(function(evt) {
    if (evt.keyCode == 27) {
        $('#photo-image').html("<%= escape_javascript(render partial: 'photos/photo_image', locals: { width: '50', height: '64' }) %>")
    }
});

应用程序/控制器/ photos_controller.rb

class PhotosController < ApplicationController
    def show 
        respond_to do |format|
            format.js
        end
    end
end

我希望这能解决你的问题。如果您需要任何解释，请发表评论。

更新：您的问题是“在弹出窗口中加载部分内容”，但在说明中没有您说“弹出窗口”。如果您想在弹出窗口中显示部分内容，则需要更新app / views / photos / show.js.erb。我希望你能想出那一个。

在弹出窗口中加载部分内容，正确的方法是什么？

1 个答案: