Ruby on Rails UJS

Question

即時嘗試將部分渲染直接放入我的頁面，當用戶單擊時，添加玩家排隊，玩家將從可用玩家移動到選定玩家。這個問題已經IM是與jQuery/UJS

時間表這樣做/ _available_players.haml.html

.widget-box 
    .widget-title 
    %span.icon 
     %i.icon-list-alt 
    %h5 Available Players 
    .widget-content.nopadding 
    %table.table.table-bordered.table-hover 
     %thead 
     %tr 
      %th Player 
      %th Position 
      %th Phone 
      %th 
     %tbody 
     - @users.each do |user| 
      %tr 
      %td= full_name(user) 
      %td 
      %td= user.mobile 
      %td.span1 
       .btn-group 
       %button.btn.dropdown-toggle{"data-toggle" => "dropdown"} 
        %i.icon-pencil 
        Selection 
        %span.caret 
       %ul.dropdown-menu 
        %li{:class=>"nav-header"} User Management 
        %li= link_to "Add to #{full_name(user)} lineup", availabilities_path(:availability => {:team_id => @schedule.team_id, :user_id => user, :schedule_id => @schedule.id, :unique_id => availability_unique_id(user,@schedule) }), :remote => true, :method => :post, :class => 'addRecord' 
        %li= link_to "Put #{full_name(user)} on standby", "#" 

時間表/顯示

-title("#{current_user.team.name} :: Schedule") 
/Begin Modal Form 
= render 'schedules/modalform' 
= render 'schedules/modaldelete' 
/Begin Notice Alert 
- if notice 
    #notice.alert.alert-success 
    %button.close{"data-dismiss" => "alert"} × 
    %strong Success: 
    = notice 
.row-fluid 
    .span8 
    .alert.alert-info.alert-block 
     %h4.alert-heading= "#{event_display(@schedule.event)} on #{schedule_time @schedule}" 
     %h5.alert-heading= "#{@schedule.location.name} (#{@schedule.location.address})" 
     %p.times= "Arrived at #{arrive_time(@schedule)}, Ends at #{end_time(@schedule)}" 
     - if can? :manage, @schedule 
     -#%h6.alert-heading Total Attending 
     -#.progress 
     -# .bar.bar-success.tip-top{:style => "width: #{accepted_players(@schedule)/number_of_selected_players(@schedule)}%;", "data-original-title" => "14 out of 17 teammates (82%) have ACCEPTED notifications for this event. Click to see who they are."}= accepted_players(@schedule) 
     -# .bar.bar-danger.tip-top{:style => "width: 10%;", "data-original-title" => "14 out of 17 teammates (82%) have ACCEPTED notifications for this event. Click to see who they are."}= declined_players(@schedule) 
     -# .bar.bar-info.tip-top{:style => "width: 55%;", "data-original-title" => "14 out of 17 teammates (82%) have ACCEPTED notifications for this event. Click to see who they are."}= na_players(@schedule) 
     = link_to "<i class='icon-white icon-book'></i> Close Appointments".html_safe, "#", :class => "btn btn-small btn-primary" 
     = link_to "<i class='icon icon-envelope'></i> Email Attendance Report".html_safe, "#", :class => "btn btn-small" 
     = link_to "<i class='icon icon-pencil'></i> Edit this #{event_display(@schedule.event)}".html_safe, "#modalEvent", :class => "btn btn-small", :data => {:toggle => "modal"} 
     = link_to "<i class='icon-white icon-remove'></i> Delete Event".html_safe, "#modalDelete", :class => "btn btn-small btn-danger", :data => {:toggle => "modal"} 
    = render 'schedules/available_players' 
    #dynamicLoadingPanel 
     = render 'schedules/named_players' 
    .span4 
    .widget-box 
     .widget-title 
     %span.icon 
      %i.icon-locations 
     %h5= "Event Location Map" 
     .widget-content.nopadding 
     %table.table.table-bordered 
      %tbody 
      %tr 
       %td 
       %img{:alt => @schedule.location.address, :src => "http://maps.google.com/maps/api/staticmap?size=300x250&maptype=roadmap&sensor=false&markers=color:blue|label:#{@schedule.location.name}|#{@schedule.location.address}"} 
       .clearfix 
       %span.help-block= "#{@schedule.location.name} (#{@schedule.location.address})" 
    .widget-box 
     .widget-title 
     %span.icon 
      %i.icon-availability 
     %h5= "Availability Summary" 
     .widget-content.nopadding 
     %table.table.table-bordered 
      %tbody 
      %tr 
       %td In 
       %td 
       %span.label.label-success= accepted_players(@schedule) 
      %tr 
       %td Out 
       %td 
       %span.label.label-important= declined_players(@schedule) 
      %tr 
       %td N/A 
       %td 
       %span.label= na_players(@schedule)` 

和js文件
可用性/ create.js。 ERB

`$('#dynamicLoadingPanel').html("<%= escape_javascript(render(:partial => 'schedules/named_players')) %>") 

Answer 1

在我看來像releva NT代碼的問題是這樣的：

#dynamicLoadingPanel 
    = render 'schedules/named_players' 

中某處（而不是在代碼所示），並更新發布到有效性的＃創建，什麼是返回的時間表/ named_players的最新版本，並動態插入進入#dynamicLoadingPanel中的頁面。

這是我的看法：

# _schedules/available_players.html.haml 
#dynamicLoadingPanel 
    AVAILABILTY IS UNKNOWN 

Choose availability: 
#availabilities 
    = link_to 'available', '#', :data => 'available' 
    = link_to 'busy',  '#', :data => 'busy' 

:javascript 
    $(function(){ 
    $('#availabilities a').click(function(){ 
     $('#dynamicLoadingPanel').load(
     "/availabilities", 
     { availability: $(this).attr('data') } 
    ); 
    }); 
    }); 

# availabilities/create.html.haml 
I will be: 
= params[:availability] 

當您單擊可用性環節之一，它創建了一個UJS電話張貼到＃創建（額外的參數才能使它後availabilites，沒有他們，負載（）將執行一個GET。

當可用性＃創建完成後，它呈現create.html.haml，這使得無論是在視圖（這是把= render :partial => 'schedules/named_players'在自己的代碼的地方）。

jquery方法.load（）re將選擇器的innerHTML與帖子返回的內容放在一起。