The main thing you're doing wrong is confusing your server and client code.
Are you debugging a server issue or a client issue? If it's a JavaScript/HTML/CSS problem, then it's a client issue. Sure, you can use Rails and whatever server-side plugins you want to *generate* the code that is sent down to the browser, but by the time the browser sees it, it is no longer Rails or ERB or Ruby or any such thing. It is just HTML and CSS and JavaScript, and the server technology is no longer part of the picture. So if you are looking at JavaScript problems, forget about your Rails code. Just look at it from the brower's point of view. Do a View Source so you see what the browser sees. Use browser-based debugging tools such as Firebug and the Web Developer Toolbar. Then when you see what you need to change in the JavaScript or HTML or CSS code in the browser, you can go back to your Rails code and figure out how to make it generate that code. -Mike On Mon, May 30, 2011 at 7:44 AM, boddhisattva <[email protected]>wrote: > 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| %><!-- 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 [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:- > > http://www.flickr.com/photos/63497072@N06/5776427494/ > > 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.. > > -- > To view archived discussions from the original JSMentors Mailman list: > http://www.mail-archive.com/[email protected]/ > > To search via a non-Google archive, visit here: > http://www.mail-archive.com/[email protected]/ > > To unsubscribe from this group, send email to > [email protected] > -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/[email protected]/ To search via a non-Google archive, visit here: http://www.mail-archive.com/[email protected]/ To unsubscribe from this group, send email to [email protected]
