-6

我试图将部分内容直接呈现到我的页面中，当用户单击时，将播放器添加到队列中，该播放器将从可用的播放器移动到选定的播放器中。我遇到的问题是用 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')) %>")
4

1 回答 1

4

在我看来，问题的相关代码是这样的：

#dynamicLoadingPanel
  = render 'schedules/named_players'

并且在某处（未在代码中显示），更新被发布到 Availabilities#create，返回的是一个新版本的 schedules/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#create（需要额外的参数才能使其成为帖子，如果没有它们，load() 将执行获取。

完成availabilities#create 后，它会渲染create.html.haml，它会渲染视图中的任何内容（这是放置= render :partial => 'schedules/named_players'您自己的代码的地方）。

jquery 方法 .load() 将选择器的 innerHTML 替换为从您的帖子返回的内容。

于 2012-11-20T21:58:09.640 回答