2012-11-12 80 views
-6

即时尝试将部分渲染直接放入我的页面,当用户单击时,添加玩家排队,玩家将从可用玩家移动到选定玩家。这个问题已经IM是与jQuery/UJSRuby on Rails 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')) %>") 
+1

这里有很多代码,很少描述你正在遇到什么问题。 “你用jquery/ujs做这件事的问题”是什么意思?是否有JavaScript错误?表单是否正确呈现?删除与问题无关的代码并更多地描述UJS问题。 –

回答

4

在我看来像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与帖子返回的内容放在一起。