Topic: Unable to render javascript completely in my Rails app for ajax upload

Hello all,

I am building a POC in my rails app for ajax image upload and ajax display using https://github.com/adamlogic/jquery-jaxy plugin. My config is pretty much outdated - Rails 2.0.2 and Ruby 1.8.7. I am using this for project specific purposes. I am making use of paperclip as my image attachment plugin. I also had to break my head figuring out the kinda exact commit of this plugin that would suit my app's requirement..(:))Finally.. I found a suitable commit..

The tutorial I am referring to is:-

railsinside adam logic ajax upload screencast..( I was unable to include the exact url due to some issues with bbcode.. I couldn't fix.. kindly google this..its the first link under the same..)

I am working on the basic idea of integrating this feature into my project app once the POC works for sure for me.

I have one initial doubt to start off with..Does every Rails app need a typical

application.html.erb

?, as in the app/views/layouts.. I actually have a

posts.html.erb

file in which I am including my js files...Would that be a compromise in any way affecting my app's performance..?... doesn't sound so.. just wanted to verify(kindly bear with my being a novice..)

Before I talk about anything else, I would like to give an idea of my poc workflow( I have tried to make it as concise I could ) of how I am trying to make my poc work.. I am trying to implement it in this way.. in the similar terms as to how.. my project app is structured..

I have an

index(index.html.erb)

page where I display each post which comes along with a message. So this gives me

1 message below each post

, thus for n messages I kinda have n posts, each

separated with an hr tag

.

Towards the end of the page, I have a new page option which redirects me to my new method.. as a result

new.html.erb

is rendered.. Here I am calling a partial called

"common"(_common.html.erb)

, leaving my new.html.erb with only 1 line of code which is calling the partial...

In this partial, I am taking inputs via a

text field

(for every message) and a

file field

(for every image)..Also at this very page I am displaying the all the posts+images available till now..all taken from the DB..in the same way as in the case of index.html.erb

Now the basic idea which I am trying to implement is ajax upload + ajax display i.e., on the very same page I need to upload a new picture and on submit I need to display the same picture+message without page reloading(or to put it in other words.. HTML rendering....). Kindly find below code for the included partial:-

     <%=error_messages_for :post%>
    
     <% form_for :post,@post, :url => {:action => :create}, :html => { :multipart => true } do |f| %><!-- 1st post represents a symbol the other one an object, (, :id => 'uploadForm' ) => removed it as not reqd. as per the screen cast -->
     <%= hidden_field_tag :format, 'js' %><!-- Telling rails the format of the request is js -->
      <p>
        <b>Message</b><br />
        <%= f.text_field :message %>
      </p>
    
      <%= f.file_field :photo%>
      
      <p>
        <%= f.submit "Create" %>
      </p>
    <% end %>
    
     <div id ="latest_form" ></div>
     <% for post in @posts %>
        <%= image_tag post.photo.url(:thumb) %>
      <table>
        <tr><td><%=h post.message %></td></tr>
      </table>
      <br/>  <hr/>
    <% end %>

As you can see the method to be called is create..Kindly find the code below for the same:-

     def create
        @post = Post.new(params[:post])
    
        if !@post.message.empty? # if post is not empty.....
            @post.save
            flash.now[:notice] =  "#{@post.message} Post was successfully created."
            @posts = Post.find(:all, :order=>'created_at DESC')
          else
            flash.now[:notice] = "Post wasn\'t successfully created."
          end
    
    
        respond_to do |format|
    
          format.html { render :action => 'new', :object => @posts }
          format.js  #{render :partial => 'common', :object => @posts}
          
        end

Whats happening for me as of now is that in my create.js.erb file is called no doubt.. but it only is rendering a view something like this:-

alert('posting a new message Post was successfully created.')


('#latest_form').prepend("
    <img alt="Winter" src="/photos/214/thumb/Winter.jpg?1306764241" />

    <tr><td>posting a new message</td></tr>

  <br/>  <hr/>
")

The code in my

create.js.erb

looks like this:-

    alert('<%= flash[:notice] %>')
    <%#*alert('this works friend!..finally..')%>
    
    ('#latest_form').prepend("
        <%= image_tag @post.photo.url(:thumb) %>
    
        <tr><td><%=h @post.message %></td></tr>
    
      <br/>  <hr/>
    ")

So to

finish off with my workflow 

I am just trying to [prepend the latest post+image to the already existing images+posts..This way I am trying to avoid page reloading and fetching of all existing DB records once again..

Finally the last peice of code I would like to add is my

application.js

:-

    $(function() {
        $('form').jaxy();
    })

But it doesn't seem to be working and I am unable to figure out where I am going wrong.. everything else is pretty much fine, implemented as per the tutorial..(to the best of my knowledge)

Before finishing off, I would like to add, I have added jquery.js( using version 1.4.4 ), jquery.form.js(http://jquery.malsup.com/form/#download), jquery.jaxy.js(https://github.com/adamlogic/jquery-jaxy).....in my public/javascripts..

I really am kinda lost on what I am doing wrong.. I actually even checked if JS is enabled in my chromium and firefox browser.. all seems well there..

Not too sure where I am going wrong..Kindly help with any insights/suggestions..

Thank you very much..