如何使用 Rails 3 和 jQuery 在 Facebox 中渲染部分内容

发布于 2024-12-02 16:33:37 字数 3767 浏览 1 评论 0原文

我正在尝试使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文