views:

63

answers:

0

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:

  1. User clicks checkboxes to select users to send message to. (index.haml)
  2. User clicks submit, which triggers an AJAX post (invites_controller.rb)
  3. respond_to js opens a hidden div, generated from a partial in a fancybox lightbox (create.js.erb)
  4. 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
 }