Ajax functionality seems to fail when on adding a div tag to my .js.erb file

I am doing some styling in my code where I want to display the time a message is posted on a groups forum in my app. Currenlty posting of every message in this forum works with AJAX functionality implemented via Jquery 1.4.

On including the div tag in my post_message.js.erb file, i find that the message doesn't post on the groups home page( the place where I have all the group specific discussions - a functionality similar to what one would get to see in FB groups ).

The message gets saved in my DB and on refereshing the page I get to see the latest message posted.

The code in post_message.js.erb looks like this:-

$("#new_post").before('<div id ="new_post"><%= escape_javascript(flash.delete(:notice)) %></div>');<!--TO-DO the flash messages aren't yet enabled/working-->
$("#latest_post").prepend("<%= @group_post.message %> by <%=  Investor.find(@group_post.post_by).first_name %>  <%=  distance_of_time_in_words(@group_post.created_at,Time.now) %> ago <br/><br/><hr/>");
$("#new_post")[0].reset();

The above code stops functioning properly when I change the second line to:-

$("#latest_post").prepend("<%= @group_post.message %> by <%=  Investor.find(@group_post.post_by).first_name %> <div class ="contentdispgrp"> <%=  distance_of_time_in_words(@group_post.created_at,Time.now) %> ago </div><br/><br/><hr/>");

The part of the code corresponding the above in _common.html.erb file( this is a partial view where I have all the html tags and id's which I am eventually using in my .js.erb file) looks like this:-

<table>
<tr>

<%if @current_user.is_an_existing_member_of_group(@investor_group)%>
<%form_for  :group_post, @group_post, :url => {:action => :post_message, :id => params[:id]},:html => {:multipart => 'true', :id => 'new_post'} do |f| -%>
    Start Discussion:<br><%=f.text_field :message%>
   <!--<%=f.file_field :photo%> -->
   <%=submit_tag "Post"%></p>
  <%end%>

   <div id = "latest_post"> </div>


<%for a in @group_all_posts %>
<%= a.message %> by <%=  Investor.find(a.post_by).first_name %> <div class ="contentdispgrp" id="style_chck"> <%=  distance_of_time_in_words(a.created_at,Time.now) %> ago </div><br/><br/> <hr/>

        <%end%>


</tr>
<%end%>
</table>

My post_message method in my groups controller looks like this:-

 def post_message 
      @investor_group = InvestorGroup.find(params[:id])


      unless @current_user.is_an_existing_member_of_group(@investor_group)
        flash[:notice] = "Please join this group to participate in discussions"
        redirect_to :action => :show, :id => @investor_group and return # try to find out what exactly does this command do with return stmnt
      else
        @group_post = GroupPost.new(params[:group_post])
      end
      #@group_post = GroupPost.new(params[:group_post])

      investor_id = s开发者_运维问答ession['investor_id']
      @group_post.investor_group_id = @investor_group.id
      @group_post.post_by = investor_id
      if @group_post.save
        flash[:notice] = 'Post was successfully created.'
       # redirect_to :action => :show, :id => params[:id] - removed after trying to implement ajax via jquery
      else
        flash[:notice] = 'Post was not successfully created.'
      end


      respond_to do |format|
        format.html {redirect_to :action => "show", :id => params[:id]}
        format.js
      end

  end

How can I fix this without refreshing the page? I am not sure of what I am doing wrong. Kindly help.

Thanks.

[EDIT]

group.js file code:-

jQuery.ajaxSetup({
    'beforeSend' : function(xhr) {
        xhr.setRequestHeader("Accept","text/javascript")
        }
})

$(document).ready(function(){
    $("#new_post").submit(function(){
        $.post($(this).attr("action"),$(this).serialize(),null,"script");
        return false;
    })
})

I was able to fix this problem by adding another tag to the page surrounding the controls I wanted to conceal or reveal.

I could not get either a div's display:none to work programatically, or an asp:Panel to toggle its visibility.

ASP.NET was rendering the page, in paticular the parts of it I wanted to conceal or reveal, before AJAX was able to change the display parameters. UpdateMode="Always" signaled to AJAX update other parts, too.

Can you confirm your ajax is working? I would have expected to see a ':remote => true' in your form tag. If its not there I wouldn't think your format.js response would get called.

form_for  :group_post, @group_post, :remote=>true ...

I think that when you do a page refresh it isn't calling the js code it's just calling the format.html instead. To check you could check your log or put a print statement in the format block and see if it gets printed.

format.js do
    puts "I am here"
end

The bug was fixed by removing the extra quotes(") made use while defining the class wrt the stylesheet, there were already a pair of quotes with the prepend method.. in post_message.js.erb.