Rails - May 2011 - Issues implementing jquery-form plugin for displaying image via an ajax call in my rails poc

Hello all,

I am trying to implement a POC wherein I can post a message + image and
get the same working via AJAX to display them both for each new entry
without the page reloading.

I am using a config of Ruby 1.8.7 and Rails 2.0.2 for project specific
purposes.. I am also using a pretty old paperclip commit from github for
this....I had to suit my proj config requirements mentioned previously..
Going forward, once I am able to successfully implement the POC I would
integrate the same in my Rails app.

I am currently facing some issues wherein I guess my project app is some
how not able to detect the jquery.form.js file.... The exact error I am
getting is something like this from my log:-




    ActionController::RoutingError (No route matches
"/javascripts/jquery.form" with {:method=>:get}):
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/actionpack-2.0.2/lib/action_controller/routing.rb:1441:in
`recognize_path''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/actionpack-2.0.2/lib/action_controller/routing.rb:1424:in
`recognize''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/actionpack-2.0.2/lib/action_controller/dispatcher.rb:170:in
`handle_request''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/actionpack-2.0.2/lib/action_controller/dispatcher.rb:115:in
`dispatch''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/actionpack-2.0.2/lib/action_controller/dispatcher.rb:126:in
`dispatch_cgi''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/actionpack-2.0.2/lib/action_controller/dispatcher.rb:9:in
`dispatch''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/bin/../lib/mongrel/rails.rb:76:in
`process''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/bin/../lib/mongrel/rails.rb:74:in
`synchronize''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/bin/../lib/mongrel/rails.rb:74:in
`process''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:159:in
`process_client''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:158:in
`each''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:158:in
`process_client''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:285:in
`run''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:285:in
`initialize''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:285:in
`new''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:285:in
`run''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:268:in
`initialize''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:268:in
`new''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel.rb:268:in
`run''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel/configurator.rb:282:in
`run''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel/configurator.rb:281:in
`each''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel/configurator.rb:281:in
`run''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/bin/mongrel_rails:128:in
`run''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/lib/mongrel/command.rb:212:in
`run''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/mongrel-1.1.5/bin/mongrel_rails:281
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:489:in
`load''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:489:in
`load''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:342:in
`new_constants_in''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:489:in
`load''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/rails-2.0.2/lib/commands/servers/mongrel.rb:64
       
/home/mohnish/.rvm/rubies/ruby-1.8.7-p334/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in
`gem_original_require''
       
/home/mohnish/.rvm/rubies/ruby-1.8.7-p334/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in
`require''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:496:in
`require''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:342:in
`new_constants_in''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/activesupport-2.0.2/lib/active_support/dependencies.rb:496:in
`require''
       
/home/mohnish/.rvm/gems/ruby-1.8.7-p334/gems/rails-2.0.2/lib/commands/server.rb:39
       
/home/mohnish/.rvm/rubies/ruby-1.8.7-p334/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in
`gem_original_require''
       
/home/mohnish/.rvm/rubies/ruby-1.8.7-p334/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in
`require''
        script/server:3


I in a way am aware that I need to add my javascripts(jquery.js and
jquery-form.js) in my layout file as also mentioned in one of the
Railscasts by Ryan Bates.

I have done the same/similar in my app/views/layouts/posts.html.erb.
Basically it is said that we need to make changes in your
application.html.erb as per the Rails cast.. but I don''t have any such
thing.. Do I need to have one..?( I am sorry please bear with my being a
novice to Rails, this way).

My posts.html.erb file looks like this:-

    <%= yield  %>
    <%= javascript_include_tag ''jquery''
,''group'' %>
    <%= javascript_include_tag
''jquery.form'',''group'' %>

I just had one doubt here.. am I supposed to make use of `yield`.. or it
should be removed..? Kindly direct me in case I am not using the right
syntax for adding `jquery.form` to my project app.


I also was able to find in more detail.. some errors using firebug that
comes along with Mozilla.. I am not fully adept in using firebug to deal
with these issues/debug their root cause yet..I also understand that I
would also need good knowledge on other things to fix this..

The current errors I am facing using firebug look something like this:-

    jQuery is not defined
    group.js?1306319739()group....6319739 (line 1)
    [Break on this error] jQuery.ajaxSetup({
    group....6319739 (line 1)
    Ajax is not defined
    (?)(Object { name="e"})group....6319739 (line 43)
    handle(Object { name="a"})jquery...6302351 (line 63)
    add()jquery...6302351 (line 57)
    [Break on this error] dataType: ''script''
    group....6319739 (line 43)
    $(this).ajaxSubmit is not a function
    [Break on this error] dataType: ''script''


My group.js file in public/javascripts is like this:-

jQuery.ajaxSetup({
    ''beforeSend'' : function(xhr) {
        xhr.setRequestHeader("Accept","text/javascript")
        }
})


$(''#post_msg input'').val('''');

$(document).ready(function() {
    $(''#uploadForm'').bind(''submit'',
function(e) {
      e.preventDefault();
      $(this).ajaxSubmit({
        //target: ''#output''
                                dataType: ''script''
      });
    });
  });



Generally,
I tried doing some research/homework on some work arounds by referring
to :-

http://stackoverflow.com/questions/988008/how-to-use-jquery-form-plugin-with-rails-js-erb-template
http://stackoverflow.com/questions/2973452/jquery-form-plugin-rails-file-upload-plain-text-respond-instead-of-html

http://stackoverflow.com/questions/2973452/jquery-form-plugin-rails-file-upload-plain-text-respond-instead-of-html

This in a way atleast helped me make sure , I don''t repeat this
mistakes... in my case..

I would like to mention how I am currently making things working for me
via html rendering:-

I have the home page from where i have a link to a "new post" which
directs me to a partial of my "new" method.
Once there onclick I get fields to enter every time:- a new message +
image.. onsubmit a call is made to my create method which takes the
message and image as params, saves it and redirects to the partial
displaying the latest post made with the image that is uploaded if any..
I once again can then like in a loop post new image+message and redirect
to this after getting it saved in my create method.

To best explain this , I would like to add the code for my create
method, the _common.html.erb parital that I am rendering and finally the
create.js.erb which I want to get working for me.. provided I am able to
fix my current issues..

**create method:-**

      def create
        @post = Post.new(params[:post])

        respond_to do |format|
          if @post.message
            @post.save
            flash[:notice] = ''Post was successfully created.''
            @posts = Post.find(:all, :order=>''created_at
DESC'')
         #   render :partial => ''new'', :object => @posts
         #   format.html { redirect_to(@post) }
            format.html { render :action => ''new'', :object
=> @posts }
            format.js { render :content_type => Mime::HTML.to_s }
            #{ render :partial => ''new'', :object =>
''posts''} # :text =>
@post.photo.url,
            #format.xml  { render :xml => @post, :status => :created,
:location => @post }
          else
            format.html { render :action => "new" }
            format.xml  { render :xml => @post.errors, :status =>
:unprocessable_entity }
          end
        end
      end


My _common.html.erb file looks like this:-

    <%= javascript_include_tag ''jquery.form'',
''group'' %>

    <% remote_form_for(:post, :url => { :controller =>
"posts", :action
=> :create }, :html => { :method => :post, :id =>
''uploadForm'',
:multipart => true }) do |f| %>
      <p>
        <b>Message</b><br />
        <label id="post_msg"><%= f.text_field :message
%></label>
      </p>
      <%= f.file_field :photo %>

      <p>
        <%= f.submit "Create" %>
      </p>
    <% end %>


     <div id = "latest_post"></div>
     <% for post in @posts %>
        <%= image_tag post.photo.url(:thumb) %>
      <table>
        <tr><td><%=h post.message %></td></tr>
      </table>
      <br/>  <hr/>
    <% end %>


My create.js.erb file looks like this:-

    <%= javascript_include_tag ''jquery.form'',
''group'' %>

    <textarea>
    $("#latest_post").prepend("<br/> <%if
!@post.photo_file_name.to_s.empty? %>
    <br/>  <%= image_tag @post.photo.url(:thumb) %>
      <%end%>  <%= @post.message
%><br/><br/><hr/>");
    </textarea>

    $(''#post_msg input'').val('''');
    $(''#uploadForm'').clearForm();


I am working on it from my end..Trying to find a fix around this..

In the meantime.. I would be really glad to get any
inputs/suggestions/directions on what I am doing wrong in order to
correct my bad.. it would really help..

Thank you..

-- 
Posted via http://www.ruby-forum.com/.

-- 
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.