Unable to render javascript completely in my Rails app for ajax upload + ajax display

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:-
http://www.railsinside.com/screencasts/295-screencast-easy-rails-file-uploads-using-ajax-and-jquery.html

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| %>
<%= hidden_field_tag :format, ‘js’ %>


Message

<%= f.text_field :message %>

  <%= 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 [email protected]? # 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:-

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…

This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.

| Privacy Policy | Terms of Service | Remote Ruby Jobs