bwatson30 bwatson30 - 7 months ago 58
CoffeeScript Question

ajax won't fire on subsequent modal forms

I've got this index of items listed out on a page, and on this page each item has a link that pops open a unique modal. in this modal i have a :username text field and a corresponding ajax call so when you type @username the usernames of your friends pop up (novel idea, right?). Anyway, it only works for the first item-link-modal combo, then the subsequent item/link/modal combos don't function. here's where i'm stuck, any help greatly appreciated:

modal partial:

<div class="modal fade" id="pirateinvite-<%= x.id %>" tabindex="-1"
role="dialog" aria-labelledby="pirateinviteLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pirateinviteLabel">Invite a friend</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
blah blah

<%= form_for @invitations, :url => invitations_path, :method => 'create', remote: true do |b| %>

<div class="form-group"><center>
<b><%= b.label :username, 'Invite by username:' %></b></center>
<%= b.text_area :username, rows: 1, class: 'form-control', required: true, placeholder: "@user1 @user2" %>
<%= b.hidden_field :event_id, :value => x.id %>
</div>
<div class="text-center">
<%= b.submit 'Send an Invite!', class: 'btn btn-primary btn-sm align-self-center' %>
<% end %></div>

</div>
</div>





invitations.coffee

class @Invitation

@add_atwho = ->
$('#invitation_username').atwho
at: '@'
displayTpl:"<li class='mention-item' data-value='(${image},${name})'><img src=${image}>@${name}</li>",
callbacks: remoteFilter: (query, callback) ->
if (query.length < 1)
return false
else
$.getJSON '/mentionsy', { q: query }, (data) ->
callback data

jQuery ->
Invitation.add_atwho()

Answer Source

Needed to make each textarea id in the modals unique by changing it to <%= b.text_area :username, id: "invitation_username_#{+ x.id}", rows: 1, role: "textarea", class: 'form-control', required: true, placeholder: "@user1 @user2" %>

Needed to change atwho listener to listen for all of those unique text areas like so: $('textarea[id^=invitation_username_]').atwho

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download