javascript - 如何在Rails中调用JavaScript后期渲染？

这是Facebox弹出内容

<div class="form_container">
  <% form_remote_tag :url => { :action => 'custom', :d=>params[:day], :h=>params[:hour]  },
        :class => 'general-form',
        :update => 'grid['+params[:day]+']['+params[:hour]+']',
        :success => 'handle_success('+params[:day]+','+params[:hour]+')' do -%>
    <table width="300px" style="border:none">
      <% @availability_hash.each_key do |availability_id| %>
        #some view related stuff
      <% end %>
    </table>
    <input type="submit" class="btn" value="Re-assign Coaches" />
  <% end %>
</div>

这是控制器方法

  def custom
    master_scheduler
    h = params[:h].to_i
    d = params[:d].to_i
    render(:partial => "grid_item" , :locals => {:day=>d, :hour=>h})
  end

这是部分（_grid_item.html.erb）

<div class ="left_inner_element">
  <div class="l_upper_element">
    <div class="coaches_committed"><%= data[:committed_coaches] %></div>
    <div class="coaches_available"><%= data[:available_coaches] %></div>
  </div>
  <div class="l_lower_element"><%= data[:classes] %> : <%= data[:avg_attendance] %>
  </div>
</div>
<a id="link[<%= day %>][<%= hour %>]" rel="facebox" href="coach_selector_popup?(bla bla)" >
  <div class ="right_inner_element right_inner_color_<%= data[:color_code] %>">
    #some ui stuff
  </div>
</a>

这是主页中使用的脚本

<script type="text/javascript">
  jQuery(document).ready(function($) {
    jQuery('a[rel*=facebox]').facebox()
    $.facebox.settings.opacity = 0.5
  })

  function handle_success(d,h){
    jQuery(document).trigger('close.facebox');
    var link_div = document.getElementById('link['+d+']['+h+']');
    jQuery(link_div).facebox();
  }
</script>

<div class="master_view">
  <table class="master_scheduler_table" id="master_scheduler_table" >
    <% HOURS_IN_A_DAY.each do |hour| %>
      <tr>
        <td><%= time(hour*2) %></td>
        <% DAYS_IN_A_WEEK.each do |day| %>
          <td id="grid[<%= day %>][<%= hour %>]" >
            <%= render(:partial => "grid_item" , :locals => {:day=>day, :hour=>hour, :data=>@data[day][hour]}) %>
          </td>
        <% end %>
      </tr>
    <% end %>
  </table>
</div>

渲染完成后，我想调用一个javscript。怎么做？我正在从视图中使用form_remote_tag。

渲染部分是在Ajax上下文中完成的，不会发生页面重新加载。 form_remote_tag具有：success方法，可以在其中调用javascript。不幸的是，我放入成功方法中的javascript被称为“渲染完成之前”。但是，我需要在渲染完成后“调用” javascript。

我只是在“问题”中添加了一条警报消息以使其清晰。实际上，我正在渲染的DIV元素上调用facebox（）方法。 facebox（）（jQuery's）方法应在呈现后才应用于DIV元素，然后才有效。

编辑：我已经添加了完整的代码。如果可以看到，一旦Ajax返回，我将调用javascript方法handle_success。 （对于将：success方法放入部分内容，我深表歉意）。在实际渲染完成之前调用handle_success。那应该是在“完成”之后

最佳答案

干得好：

 <!-- IN HTML.ERB FILE -->
    <div class="form_container">
      <% form_tag({:action => :custom, :d => params[:day], :h => params[:hour]}, {:class => "general-form"}) do %>
        <table width="300px" style="border:none">
          <% @availability_hash.each_key do |availability_id| %>
            <tr>
              <td width="50%"><b><%= CoachAvailability.find(availability_id).coach_availability_template.coach.display_name %></b> (X/8)</td>
              <td><%= select_tag('template['+availability_id.to_s+']', options_for_select([["Available", 0],["Scheduled", 1]], :selected => CoachAvailability.find(availability_id).status )) %></td>
            </tr>
          <% end %>
        </table>
        <%= submit_tag "Re-assign Coaches", :class => "btn" %>
      <% end -%>


//In your JS file
$(".general-form").live('submit', function() {
    $.post(this.action, $(this).serialize(), "_method=post");
    return false;
})


#In your controller
def custom
    master_scheduler
    h = params[:h].to_i
    d = params[:d].to_i
    @day = d
    @hour = h
    respond_to do |format|
      format.xml
    end
end

<!-- IN custom.xml.erb -->
<taconite>
    <append select="#div_changed_content">

         What ever changes you want to make. Your code is bit confusing. So i won't go deep into what should come here. You know what changes you want to make. :)

         Maybe you wanted to add this? How did you get data[:commited_coaches] and data[:available_coaches] without passing it through the partial??

         Anyways if you want to pass it now you can do so from the controller itself. By creating a @data_commited_coaches and @data_available_coaches and storing the above in that.



    <div class ="left_inner_element">
  <div class="l_upper_element">
    <div class="coaches_committed"><%= data[:committed_coaches] %></div>
    <div class="coaches_available"><%= data[:available_coaches] %></div>
  </div>
  <div class="l_lower_element"><%= data[:classes] %> : <%= data[:avg_attendance] %>
  </div>
</div>
<a id="link[<%= day %>][<%= hour %>]" rel="facebox" href="coach_selector_popup?(bla bla)" >
  <div class ="right_inner_element right_inner_color_<%= data[:color_code] %>">
    #some ui stuff
  </div>
</a>


    </append>

    <eval>
       // You can call the handle_success here: If i guessed right, this is what you want to do.
       handle_success(<%= @day %>,<%= @hour %>);
    </eval>

</taconite>

我对您添加了&hour和&date表示怀疑。如果检测到萤火虫抛出异常，我建议您将其删除，因为它可能不是有效的xml。如果您确实在firebug中遇到了XML解析错误（在firebug控制台中执行AJAX发布时，请参阅XML标签），只需用错误编辑问题即可。我会调查一下。您也可以向我解释以下代码：
:update => 'grid['+params[:day]+']['+params[:hour]+']'？您要更新页面上的哪个元素？
还可以看到，custom.xml.erb包含一个<taconite>标记。它有一个<append>标记，其ID为div_changed_content。您必须在.html.erb文件中创建一个具有该ID的div标签，该标签才能起作用。