Question

I have this if statement in my video show view:

<% if @video.user == current_user && current_user != nil && @video.comment_titles.count < 3 %>
    <%= link_to "Add Comment Title", "#", :id => "comment_title_link", :class => "edit" %>
    <%= simple_form_for @video, :remote => true do |f| %>
     <%= f.input :comment_title_names, :label => false, :placeholder => "Add a Comments Title" %>
      <%= f.button :submit, :value => 'Add', :id => 'add_comment_title' %>
      <div class='hint'>Let your listeners know what comments you want by adding a guiding title for them. Pose a question, ask for feedback, or anything else!</div>
    <% end %>
<% elsif @video.comment_titles.count == 3 && @video.user == current_user && current_user != nil  %>
    <p> You have reached your limit of comment titles. You can always add a new one by deleting one of your old ones. </p>
<% end %>

This if statement essentially evaluates @video.comment_titles.count to determine if the if statement or the elsif statement is true. I let users add comment_titles with ajax and so by the time @video.comment_titles.count == 3 is true, it won’t correctly evaluate the if statement since the if statement, which is in my video show view, is only called after a page reload.

I want the if statement to be called dynamically every time the number of comment_titles changes, which is equivalent to saying whenever the AJAX call for updating comment_titles is triggered. However, I’d rather do this on the client side than have to do it in a .js.erb file. How would I trigger this on the client side?

OK so no one has answered, so I’m assuming either I have not provided enough code, I have not been clear in what I am trying to do, or it is impossible. Which is it?

Answer 1

After reading your question again with your comment in mind, I assume that

• There is a javascript event handler for the event ‘new comment title has been added’.
• The provided fragment resides withing a container of sort e.g.<div id="add_comment_title_action">fragment</div>
• The fragment should be refreshed every time the event handler is executed
• You’ve seen that is possible to load the fragment by $('#add_comment_title_action').load('fragment_url') but you rather just do it within the client

Let’s assume that the event handler looks something like

$('#add_comment_title_form').submit(function(e) {
   e.preventDefault();
   $.post( 'url',
          { 'title': 'Lorem ispum dolor sit amet'}
   );
   updateFragment();       
});

Then you could have a function for updating the fragment

updateFragment() {
  // Let's assume that @video.user == current_user && !current_user.nil?
  if($('.comment_title').size() < 3) {
     // NOP add something here to handle case when a title is deleted
  } else {
     $('#add_comment_title_action').html('<p> You have reached your limit of comment titles. You can always add a new one by deleting one of your old ones. </p>'); 
  }
}

How the code can be made better:

• There should be some callback to check if the post request has succeeded and proceed accordingly
• You could handle the two different states of the fragment by simply hiding and showing the options depending on the state (if you can assume all the users have enabled javascript and css)
• If you decide to replace the fragment with .html(...) then the event handlers for the elements within the fragment should be bound with .live(event, handler) so that you can enable adding new comment titles after a delete has been performed

Note that every check done in the client side must be done in the server side also.

See history for completely different answer 🙂