Ruby on Rails UJS

Question

im trying to have a partial rendered straight into my page, that when a user clicks, add player to line up, that the player will be moved from available players and into selected players. the issue im having is doing this with jquery/ujs

schedules/_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", "#"

schedules/show

-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)`

and js file
availabilities/create.js.erb

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

Answer 1

It looks to me like the relevant code to the question is this:

#dynamicLoadingPanel
  = render 'schedules/named_players'

And that somewhere (not in code shown), and update is posted to Availabilities#create, and what is returned is a fresh version of schedules/named_players and dynamically insert that into the page within #dynamicLoadingPanel.

Here's my take:

# _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]

When you click one of the availabilities links, it creates a UJS call to post to availabilites#create (the extra parameters are required to make it a post, without them, load() will perform a get.

When availabilities#create is done, it renders create.html.haml, which renders whatever is in the view (this is the place to put = render :partial => 'schedules/named_players' in your own code).

The jquery method .load() replaces the innerHTML of the selector with what is returned from your post.