I have finally got a JQuery lightbox solution to work in IE and with AJAX form posts with one exception. Here's what I'm trying to do:
- User clicks checkboxes to select users to send message to. (index.haml)
- User clicks submit, which triggers an AJAX post (invites_controller.rb)
- respond_to js opens a hidden div, generated from a partial in a fancybox lightbox (create.js.erb)
- The partial shown in the lightbox contains a text area with a character count which will no longer updates when I type in the field! (_create.haml)
If I render form_partial on a page on its own and type in the text area, the character count updates.
It's clearly something to do with the response from the AJAX post? How do I get this function: "setupNewPostForm(140);" to work after the AJAX post? It's got to be something simple that I'm missing. I feel like I've tried everything. Thanks for your help! Here's the code:
*index.haml * - the form has been omitted, it calls invites > create
#message_create_form{:style => 'display: none;'}
= render(:partial => 'members/invites/invites/create')
%a{:id => "inline", :href => "#message_create_form", :style => 'display: none'}
This link is hidden and triggered by js to open the fancybox lightbox
invites_controller.rb
def create
@invite = params.collect {|k| k[0] unless k[1] != "1"}.compact
RAILS_DEFAULT_LOGGER.error("We're going to invite: #{@invite.flatten}")
@invitee_count = @invite.length
session[:invite] = @invite.flatten
respond_to do |f|
f.js {}
end
end
create.js.erb
<% if @invitee_count < 1 || nil %>
$('.notice').show()
$('#invite_submit').attr("disabled", "true");
<% end %>
$('#friend_count').html("<%= @invitee_count %>")
$("a#inline").fancybox({
frameWidth: 850,
frameHeight: 400,
hideOnOverlayClick: false,
hideOnContentClick: false
}).trigger('click');
setupNewPostForm(140); // how do i get this to call properly???
_create.js.erb
#container
%h1{:style => 'color: #336699'} Compose a message
.clear
%p
tell your friends why they should be on TWYE. We've filled in some suggested text for you to get your creative juices flowing.
- form_tag send_invites_path do
.float_left
= text_area_tag 'message', "Check out Tweetwhatyoueat, it's a Twitter food diary. Here's a link to my diary: #{@shortened_url}", :rows => 8, :style => 'font-size: 1.1em; color: #666; margin-top: 12px; font-family: arial, verdana; width: 400px'
%br
.message_send.float_right a direct message will be sent out to the <span id="friend_count">17</span> friends you selected.
%br
= submit_tag "send message", :class => 'float_right', :id => 'invite_submit'
.clear
.notice{:style => 'display: none;'}
You need to select at least one friend to invite
.float_left{:style => 'margin-left: 20px'}
#character_count_container
%center
%span#character-count 39
.notation characters left
#bitly_container
%center
%h1{:style => 'margin-bottom: 5px'} link to your diary:
/ %h2= link_to @shortened_url, @shortened_url, :target => '_new'
.clear
invites.js
$(document).ready(function() {
setupNewPostForm(140);
});
function setupNewPostForm(limit) {
$('textarea').keyup(function(e) {
updateCharacterCount($(this), limit, '#character-count');
});
}
function updateCharacterCount(textarea, limit, infodiv){
var count = limit - $(textarea).val().length;
$(infodiv).removeClass('invalid').removeClass('warn');
$(infodiv).html(count);
if(count < 0) {
$(infodiv).addClass('invalid');
return false
} else if (count <= 100) {
$(infodiv).addClass('warn');
return false
}
return true
}