Question

我试图在成功调用Ajax之后在submitted_picture div中呈现用户提交的图片。我的控制器和代码工作，但我的问题是我无法弄清楚如何添加另一张图片而不渲染上一个（例如：第二张图片将加载前一张图片）。我在rails框架和咖啡脚本上使用ruby，但我可以翻译jQuery语法，我只需要一个想法如何解决这个问题。

<div id="submitted_picture"></div>  

($ '#new_picture').on 'ajax:success', (evt, data, status, xhr) =>
  ($ "#submitted_picture").load "/picture/#{xhr.responseJSON.id}/load_div"

Answer 1

如果您正在使用RoR，我会考虑使用paritals进行AJAX调用，这是一种非常常见的模式。例如，如果您的部分_pictures.html.erb看起来像这样：

<% @pictures.each do |pic| %>
  <div id="submitted_picture"><img src="#{pic}"/></div>
<%end%>

然后您可以在控制器中执行以下操作：

html = render_to_string(partial: 'pictures')
respond_to do |format|
  format.json { render json: {html: html} }
end

然后在你的coffeescript中抓住这样的回复：

$.post 'my/url',
  (data) ->
    $('#picture-container').html(data.html)

现在您已经有效地提交了请求并使用了HTML的更新部分，而不是尝试添加它。您已使用更新的html替换整个图片容器，而不是添加到其中。如果您正在使用AJAX来更新内容，这是IMO更好的方法。

.load事件之前.load jquery事件

1 个答案: