0

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 = session['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;
    })
})
boddhisattva
  • 6,908
  • 11
  • 48
  • 72

3 Answers3

1

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.

0

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
James
  • 1,841
  • 1
  • 18
  • 23
  • Hi James.. AJAX iS working, got the bug fixed too. Yep no doubt on refreshing html is being rendered. Why do you feel that a ":remote => true" needs to be given?. The form doesn't seem to be clearing the text field via reset method though... I am not sure why.. . And yes the bug was fixed by removing the extra quotes(") made use while defining the class wrt the stylesheet... Any idea on how to fix the reset button thing? – boddhisattva May 17 '11 at 08:08
  • @boddhisattva, sounds good glad you got it working. About the render=>true part, this has me a little puzzled because I had thought that is what is used to tell the form to use unobtrusive javascript to control the submit behavior (async call). If the current form_for renders the post_message.js.erb (format.js) then how would you render the format.html? I could be wrong, but its my feeling that the reset() doesn't work because the js.erb isn't getting executed. Putting an alert("123"); in the .js.erb file would test that. – James May 17 '11 at 09:30
  • Since the current submit method as per the submit_tag is overridden by the submit method belong to group.js( a file that I created to get ajax working for me.. (will update its contents in the question) ) format.js is called. Its only in cases where one might go wrong in their syntax to display values as in the code of files like post_message.js.erb that html would be rendered(This is completely based on what I have understood and observed, anyone one..kindly correct me if I am wrong). To implement ajax via jquery i used http://railscasts.com/episodes/136-jquery. This might help you.. – boddhisattva May 17 '11 at 09:59
  • @boddhisattva, ok makes sense now! :) I had learned to use the :remote tag in the form_for and it should do something similar to what you did in the .js file. As for the reset(), I tested it on my form too and I noticed that when the "value" tag is set in the input field the reset() doesn't work. I had to edit the html to remove the value. – James May 17 '11 at 20:53
  • I actually posted this as another question on stackoverflow, I got an answer too.. Kindly have a look at:- http://stackoverflow.com/questions/6028413/unable-to-clear-text-field-with-overridden-submit-method-used-for-ajax-implementa – boddhisattva May 18 '11 at 04:26
0

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.

boddhisattva
  • 6,908
  • 11
  • 48
  • 72