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')) %>")
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.