如何使用 Rails 3 和 jQuery 在 Facebox 中渲染部分内容
我正在尝试使用 jQuery 的 Facebox 插件在模态窗口中渲染部分内容,但是当模态出现时,我首先看到我期望从 index.js.erb
文件中看到的内容,但是然后紧随其后的是同一文件中的原始代码。 (屏幕截图)我做错了什么?
routes.rb
resources :brands, :only => [:index, :show], :via => [:get] do
resources :promotions, :controller => 'brand_promotions', :only => [:index], :via => [:get] do
collection do
get :index
end
end
end
app/views/brands/show.html.erb
<% content_for :head do %>
<%= stylesheet_link_tag 'facebox', :media => 'screen, projection' %>
<%= javascript_include_tag 'facebox' %>
<script type="text/javascript">
$(document).ready(function() {
$('#show-all-promotions').facebox({
loadingImage : '/images/loading.gif',
closeImage : '/images/closelabel.png',
});
});
</script>
<% end %>
...
<section id="brand-promotions">
<header>
<h3>Featured Savings</h3>
<% if @brand.promotions.count > @promotions.count -%>
<%= link_to 'View all ' + pluralize(@brand.promotions.count, 'promotion'), brand_promotions_path(@brand), :class => 'right', :style => 'margin-top: -1.5em', :id => 'show-all-promotions' %>
<% end -%>
</header>
<% if [email protected]? -%>
<%= render :partial => 'brand_promotions/promotions', :locals => { :promotions => @promotions } %>
<% else -%>
<p><%= @brand.name %> has not posted any promotions... yet!</p>
<% end -%>
</section>
app/views/brand_promotions/_promotions.html.erb
<ul class="promotions">
<% promotions.each_with_index do |promotion, index| -%>
<% if index == 0 && promotion.format == BrandPromotion::FORMATS[:wide] -%>
<li class="span-15 last promotion">
<% else -%>
<li class="span-7 <%= cycle('first', 'push-1 last', :name => 'promotion_styles') %> promotion">
<% end -%>
<%= image_tag promotion.image.small.url, :class => 'promo_image' %>
<div class="promotion_container">
<% if !promotion.price.blank? %>
<span class="promotion-price"><%= raw promotion.price %></span>
<% end %>
<h4><%= raw promotion.name %></h4>
<p><%= raw promotion.content %></p>
</div>
</li>
<% end -%>
</ul>
app /controllers/brand_promotions_controller.rb
def index
@brand = Brand.find(params[:brand_id])
@promotions = @brand.promotions.all
@page_title = "Savings from #{@brand.name}"
respond_to do |format|
format.html # index.html.erb
format.js {render :layout => false}
end
end
app/views/brand_promotions/index.js.erb
$('#facebox .content').html("<%= escape_javascript(render :partial => 'promotions', :locals => { :promotions => @promotions }) %>");
public/javascripts/application.js
// This seems to be required based on
// https://github.com/rails/jquery-ujs/commit/fbbefa0773d791d3a67b7a3bb971c10ca750131b
$(function() {
jQuery.ajaxSetup({
beforeSend: function(xhr) {
xhr.setRequestHeader("Accept", "text/javascript");
}
});
});
I'm trying to use the Facebox plugin for jQuery to render a partial in a modal window, but when the modal appears I see first what I expect to see from my index.js.erb
file, but then immediately following that is the raw code from that same file. (screenshot) What am I doing wrong?
routes.rb
resources :brands, :only => [:index, :show], :via => [:get] do
resources :promotions, :controller => 'brand_promotions', :only => [:index], :via => [:get] do
collection do
get :index
end
end
end
app/views/brands/show.html.erb
<% content_for :head do %>
<%= stylesheet_link_tag 'facebox', :media => 'screen, projection' %>
<%= javascript_include_tag 'facebox' %>
<script type="text/javascript">
$(document).ready(function() {
$('#show-all-promotions').facebox({
loadingImage : '/images/loading.gif',
closeImage : '/images/closelabel.png',
});
});
</script>
<% end %>
...
<section id="brand-promotions">
<header>
<h3>Featured Savings</h3>
<% if @brand.promotions.count > @promotions.count -%>
<%= link_to 'View all ' + pluralize(@brand.promotions.count, 'promotion'), brand_promotions_path(@brand), :class => 'right', :style => 'margin-top: -1.5em', :id => 'show-all-promotions' %>
<% end -%>
</header>
<% if [email protected]? -%>
<%= render :partial => 'brand_promotions/promotions', :locals => { :promotions => @promotions } %>
<% else -%>
<p><%= @brand.name %> has not posted any promotions... yet!</p>
<% end -%>
</section>
app/views/brand_promotions/_promotions.html.erb
<ul class="promotions">
<% promotions.each_with_index do |promotion, index| -%>
<% if index == 0 && promotion.format == BrandPromotion::FORMATS[:wide] -%>
<li class="span-15 last promotion">
<% else -%>
<li class="span-7 <%= cycle('first', 'push-1 last', :name => 'promotion_styles') %> promotion">
<% end -%>
<%= image_tag promotion.image.small.url, :class => 'promo_image' %>
<div class="promotion_container">
<% if !promotion.price.blank? %>
<span class="promotion-price"><%= raw promotion.price %></span>
<% end %>
<h4><%= raw promotion.name %></h4>
<p><%= raw promotion.content %></p>
</div>
</li>
<% end -%>
</ul>
app/controllers/brand_promotions_controller.rb
def index
@brand = Brand.find(params[:brand_id])
@promotions = @brand.promotions.all
@page_title = "Savings from #{@brand.name}"
respond_to do |format|
format.html # index.html.erb
format.js {render :layout => false}
end
end
app/views/brand_promotions/index.js.erb
$('#facebox .content').html("<%= escape_javascript(render :partial => 'promotions', :locals => { :promotions => @promotions }) %>");
public/javascripts/application.js
// This seems to be required based on
// https://github.com/rails/jquery-ujs/commit/fbbefa0773d791d3a67b7a3bb971c10ca750131b
$(function() {
jQuery.ajaxSetup({
beforeSend: function(xhr) {
xhr.setRequestHeader("Accept", "text/javascript");
}
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论