bwatson30 bwatson30 - 11 months ago 76
CoffeeScript Question

AJAX atwho listen to all textarea id's

I feel like this is so easy i should kick myself. I have this coffeescript:

class @Invitation

@add_atwho = ->
$('#invitation_username_1543').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()


And instead of listening to JUST
#invitation_username_1543
i want to replace that 1543 with any id number on my page. I've got this partial modal rendering as well. The line in question that the coffeescript is listening to is the one with textarea id = "invitation_username_+#{x.id}". it works great for the modal with 1543 id being passed in to it, but nothing else!

<div class="modal fade" id="invite-<%= 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="inviteLabel">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">
Text Text Text<br /><br />

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

<div class="form-group"><center>
<b><%= b.label :username, 'Invite a friend by username:' %></b></center>
<%= b.text_area :username, id: "invitation_username_#{+ x.id}", rows: 1, role: "textarea", 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>
</div>
</div>

Answer Source

You can use attribute begins with selector [attr^=value] to select elements where attr attribute begins with ^= attribute value

$("textarea[id^=invitation_username_]")

or

document.querySelectorAll("textarea[id^=invitation_username_]")
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download