これはフェイスボックスのポップアップコンテンツです
<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>
このレンダリングが完了したら、javascriptを呼び出したいと思います。どうやってするか?ビューからform_remote_tagを使用しています。
部分レンダリングはAjaxコンテキストで行われ、ページのリロードは発生しません。form_remote_tagには、javascriptを呼び出すことができる:successメソッドがあります。残念ながら、successメソッドに入れたjavascriptは、レンダリングが行われる前に「呼び出されます」。ただし、レンダリングが完了した後、JavaScriptを呼び出す必要があります。
質問に明確にするためにアラートメッセージを入れただけです。実際、レンダリングしているDIV要素でfacebox()メソッドを呼び出しています。facebox()(jQueryの)メソッドは、レンダリングされた後でDIV要素に適用する必要があります。そうしないと、効果がなくなります。
編集:完全なコードを追加しました。ご覧のとおり、Ajaxが戻ったら、javascriptメソッドhandle_successを呼び出しています。(パーシャル内に:successメソッドを入れたことをお詫びします)。handle_successは、実際のレンダリングが完了する前に呼び出されます。それは「完了後」でなければなりません