Topic: Issues implementing jquery-form plugin for displaying image via ajax

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

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..

Last edited by boddhisattva (2011-05-25 21:32:31)