Question

已搜索此问题但未能找到解决方案。

我有一个表单，其中的元素被partials替换，具体取决于表单中先前元素的选择（例如 - 一旦用户选择了“Origin”，表单将更新“Destinations”collection_select并提供任何目的地从选定的原点）。这很好..除了我希望表格在Facebox弹出窗口中以模态方式显示。

目前facebox弹出窗口正确加载表单，但表单元素上的onchange动作似乎没有更新......

在视图中
<%= link_to "New Delivery", new_delivery_requests_path, :remote => true %>

远程调用（views / delivery_requests / new.js.erb）：
$.facebox('<%= escape_javascript(render 'new') %>')

新布局（views / delivery_requests / new.html.erb）：

<%= form_for @price_update do |f| %>
    <% if @price_update.errors.any? %>
    <h2>Errors:</h2>
    <ul>
        <% @price_update.errors.full_messages.each do |message|%>
        <li><%= message %> </li>
        <% end %>
    </ul>
    <% end %>
    <br />
    <table>
        <tr> 
            <td><%= f.label "Select origin location: "%> </td> 
            <td><%= collection_select(:route, :origin_id,  @origins,  :id, :name, 
            { :prompt   => "Please select an origin" },
            { :onchange => "#{remote_function(
                :url  => { :action => "update_destinations"}, 
                :with => "'origin_id='+value")}",
                :id => "origin_select"} )%>
            </td>
        </tr>
        <tr>
            <td><%= f.label "Select destination location: "%> </td>
            <td><div id="destinations">
                <%= collection_select(:route, :destination, 
                @available_routes, :id, :destination, 
                { :prompt   => "Please select an origin first" }, { :disabled => "disabled" })%></div></td>
        </tr>               
        <tr>
            <td><%= f.label "Current Prices: "%> </td>
            <td>
                <div id="current-prices-table"></div>
            </td>
        </tr>   
        <tr>
            <td><%= f.label "Please select price option" %></td>
            <td>
                <div id = "price-selection"></div>
            </td>
        </tr>
        <tr>
            <td><%= f.label "Priority" %></td>
            <td><%= f.label "Price Per Gram" %></td>
            <td><%= f.label "Price per cm3" %></td>
        </tr>
        <tr>
            <td><div id="priority-label"></div></td>
            <td><%= f.text_field :new_price_per_gram, :id => "price_per_gram_textfield" %></td>
            <td><%= f.text_field :new_price_per_vol, :id => "price_per_vol_textfield" %></td>
        </tr>
    </table>
    <br />
    <%= f.submit "Update Prices"%>  
<% end %>

以及delivery_requests控制器中的更新目标操作：

def update_destinations
    # updates the available list of destinations after an
    # origin location has been chosen when making a new delivery request
    sel_origin = Location.find(params[:origin_id])
    @available_routes = Route.find_available_routes(sel_origin.name)
    render :update do |page|
      page.replace_html 'destinations', :partial => 'destinations_select', :object => @destinations
    end
  end

我对rails非常陌生 - 任何建议都会被认可。

Answer 1

我今晚一直在努力解决这个问题，最后想出了答案。您需要引用已打开的facebox。这就是你要做的事情。

def update_destinations
# updates the available list of destinations after an
# origin location has been chosen when making a new delivery request
sel_origin = Location.find(params[:origin_id])
@available_routes = Route.find_available_routes(sel_origin.name)
render :update do |page|
    page << "jQuery('#facebox .content #destinations').replaceWith(#{(render :partial => 'destinations_select', :object => @destinations).to_json})"       
end
end

我要感谢jQuery .on not working with dynamic DOM/HTML导致我https://github.com/ihower/facebox_render/blob/master/lib/facebox_render.rb我在那里构建了答案。

Rails / Facebox - 使用远程功能进行更新

1 个答案: