Hello all,
I am building a POC in my rails app for ajax image upload and ajax
display using GitHub - adamlogic/jquery-jaxy: A jQuery plugin to complement jquery-form, making ajax and working with forms as effortless as possible. 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(jQuery Form Plugin),
jquery.jaxy.js(GitHub - adamlogic/jquery-jaxy: A jQuery plugin to complement jquery-form, making ajax and working with forms as effortless as possible.)…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…