Problem using link_to with remote option in rails 3 - ajax

I'm working on rails 3 with link_to remote option.
This is my code structure.
View/punch/report.html.erb :
<%= link_to 'Punch report', punchreport_punch_index_path, :remote => true%>
<div id="punchform"> </div>
View/punch/punchreport.js.erb :
$("#punchform").html("<%= escape_javascript(render(:partial => "reportform"))%>");
and created a form inside
View/punch/_reportform.html.erb
and controller :
controller/punch_controller.rb
def report
end
def punchreport
respond_to do |format|
format.html { render report_punch_index_path }
format.js
end
end
note : punchreport_punch_index_path : /punch/punchreport
report_punch_index_path : /punch/report
I don get the ajax request working. instead of that, it redirects the page.
Any help
Thanks in advance

Sounds like your :remote => true is not being handled by an unobstrusive javascript event handler...
Do you have something called jquery-rails in your project? it should set a handler on "data-remote" attribute. Can you find it and post back what you have there?

Related

Remote Form Renders as HTML instead of JS

I have a simple form:
<%= form_for [current_user, #bookcase], :id => "shelf_update_form", :remote => true, :html => { :multipart => true} do |f| %>
<input id="bookcase_image" class="file" type="file" name="bookcase[image]" size="13">
<% end %>
That automatically uploads when a file has been selected:
$("#shelf_update_form").change(function() {
$("#shelf_update_form").submit();
});
I want the update action to render js view, but by default it renders html instead. I try forcing it to render js like so:
respond_to do |format|
format.js
end
But then I get this error:
NetworkError: 406 Not Acceptable
Even then, my log reports:
Processing by BookcasesController#update as HTML
How can I get it to process as JS instead?
UPDATE:
The view:
triggerAjaxHistory("<%= #href %>", false);
I get the same results with a more generic view, too:
alert("I work now!")
In the controller, do
respond_to do |format|
format.js if request.xhr?
end
Is your view named as .js.erb?
Can you check using firebug in your browser what exactly you are getting as the response? Turn on net logging and look at the response.
Also do you have the following in your layout?
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
Can you put in logger.info whatever_message commands to make sure you the controller action executes and you go into the correct view?
What happens if you specify the js format specifically in the controller as
class UserController < ApplicationController
respond_to :js, :only => :update, :layout => 'false`
What happens if you specify the format in form_for as :format => :js
Is your form nested within another form?

Rendering ajax result in different view Rails 3

Given that I have the routes.
root :to => 'pessoas#index'
post '/pessoas' => 'pessoas#create'
And my view app/view/pessoas/index.haml has the following view code. (Submit here will post to pessoas#create)
= form_tag "/pessoas", :method => :post, :remote => true, :id => "participe" do
...
= button_tag "Sign up", :class => "envia"
And my create.js.erb view is.
$('#user-feedback').html('<%= #message %>');
And the controller code simply saves the model.
def create
#pessoa = Pessoa.new(params[:cliente])
if #pessoa.save
#message = "Success"
else
#message = "Failure"
end
respond_to do |format|
format.js
end
end
Then I go to the root path /
And I fill the form and click on submit.
Then the element p#user-feedback haven't been changed. Why?
I notice in app's log: that the request was done right and the jquery also but it render at /pessoas response but not at current view (index).
What can I do? Or should I just forget about this and make this with $.ajax way?
I want a way to provide feedback to the users.

Uploading file yields 406 (Not Acceptable) error

I am trying to upload a file using sample code. I am not getting any compilation errors but a 406 Not Acceptable error message. What does this mean?
POST request:
Started POST "/files/upload" for 10.15.24.38 at 2012-06-22 21:18:11 -0400
Processing by FilesController#upload as HTML
Parameters: {"utf8"=>"รข", "authenticity_token"=>"wfpBi3Y8KgmqitXrh4fZ3xfun73mWOfXiTQ+J7bdfWU=", "user_id"=>"231",
"button"=>"", "upload"=>{"datafile"=>"ws_1920x1080.jpg"}}
View:
<%= form_tag files_upload_path, :remote => true, :method => :post, :multipart => true do %>
#The form has some other values too. I am keeping it short here.
<p>
<label for="upload_file">Select File</label> :
<%= file_field 'upload', 'datafile' %>
</p>
<% end %>
Controller:
def upload
#The controller has some other values too, that are not related to file upload.
if params[:datafile]
uploaded_io = params[:upload][:datafile]
File.open(Rails.root.join('public', 'uploads', uploaded_io.original_filename), 'w') do |file|
file.write(uploaded_io.read)
end
end
if params[:user_id]
#do some extra stuff
end
respond_to do |format|
format.js
end
end
Error:
Completed 406 Not Acceptable in 2736ms (ActiveRecord: 3.2ms)
There isn't enough information to provide the answer but you're clearly missing :multipart => true in our form_for call as in:
<%= form_for #upload, :multipart => true do |f| %>
Your form code here
<% end %>
And the not acceptable error happens because you're asking for HTML rendering but there is probably not a respond_to piece answering to HTML.
You are not allowed (in direct way) to upload files through remote request. Take a look here: How can I upload files asynchronously?
I guess you cant upload a file using ajax just by specifying remote => true you need some sort of plugin or something like it to do it like
remotipart , plupload , uploadify or something like it .
so if you are not using any plugin then even if you specify remote => true the form would be sent as normal HTML request instead of XMLHttpRequest
Now since in your controller you have removed
format.html part as you are assuming that it would be an ajax request but in reality it is not (HTML request)
becoz Rails cannot find the appropriate format to respond back it is reporting 406 Not Acceptable
Do your self a favor log the request.xhr? method in your controller.
something like
logger.info "******************** #{request.xhr?} *********************"
If request.xhr? return nil that specify that request is not an ajax request

RoutingError when using jQuery UI tabs with ajax

I'm getting ActionController::RoutingError in Profiles#show when I click a link to render a layout as part of my implementation of jQuery UI tabs. Here's my link_to:
<%= link_to "Messages", :controller => 'profiles', :action => 'profile_messages', :remote => true %>
My ProfilesController:
def profile_messages
#messages = User.find(#profile.user_id).messages
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => #messages }
end
end
My profile_messages erb layout:
<div id="tabs-2">
<% for message in #user.messages %>
<div class="message-1">
</div>
<% end %>
</div><!-- end messages -->
Routes.rb:
resources :messages do
get "messages/profile" => :profile_messages
resources :responses
end
What I want to happen is: when you click the link created by my link_to, the layout in profile_messages.html.erb shows and loads the messages in that specific layout. What's going on here?
UPDATE: Adding the new line in Routes.rb gives me a new route:
message_messages_profile GET /messages/:message_id/messages/profile(.:format) {:action=>"profile_messages", :controller=>"messages"}
So I tried this in my Profiles show.html.erb I put:
<li><%= link_to "Messages", message_messages_profile_path, :remote => true %></li>
This gives me a RoutingError in Profiles#show -- No route matches {:action=>"profile_messages", :controller=>"messages"}. Even when I add the following into my MessagesController:
def profile_messages
#message = #user.messages.find(params[:user_id])
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => #messages }
end
end
get "messages/profile" => "messages#profile_messages", :as => profile_messages
resource :messages do
resource :responses
end
You don't have a route for that controller action. Rails doesn't map ":controller/:action/:id" by default any more. You can also just enable that route if you want. You could be able to reference this via profile_messages_path.
It's assuming 'show' is actually an id for messages here I think. The default routes for a resource are listed here: http://guides.rubyonrails.org/routing.html#crud-verbs-and-actions. Make sure you list your routes first!
resource :messages do
collection do
get :profile_messages
end
end
in your view
<li><%= link_to "Messages", "/messages/profile_messages", :remote => true %></li>
Thanks to the combined efforts of folks here on SO I was able to get this to work. Check out these questions for more code:
Exclude application layout in Rails 3 div
Rails 3 jQuery UI Tabs issue loading with Ajax

link_to remote=>true not updating with ajax

Using rails3 and prototype (rails.js)
I have a simple list of products with edit and delete links as images.
When deleting a product, the list is not updated. Refreshing the page shows that the product has indeed been deleted.
/app/views/products/list.rhtml
<div id="product_list">
<%= render :partial => 'list' %>
</div>
/app/views/products/_list.rhtml
<%= link_to image_tag("delete.png"), { :controller => 'products', :action => 'destroy', :id => product }, :method => :delete, :confirm => "Are you sure?", :remote => true %>
/app/controllers/products.rb
def destroy
Product.find(params[:id]).destroy
#products = Product.all
end
/app/views/products/destroy.rjs (not sure what to do with that...)
$(document).ready(function() {
$("#product_list").html("<%= escape_javascript( render(:partial => "list") ) %>");
});
So the remote link seems to work fine.
I'm not sure how to use the ajax callback to update #product_list
I tried to put the following in the head of the page:
$(document).ready(function(){
$('#product_list').bind("ajax:success", function(evt, data, status, xhr){
alert('hello');
})
});
But it's not executed (that's probably not a valid code for prototype) and I wouldn't know anyway what code to put inside so that my list gets updated after destroying a product
Any help (other than "use jQuery") is greatly appreciated!
EDIT: Here is the server log for the delete action (after I moved the javascript above to destroy.js.erb)
Started POST "/products/destroy/3" for 127.0.0.1 at .....
Processing by ProductsController#destroy as JS
Parameters: {"_"=>"", "id"=>"3"}
[1m[36mProduct Load (0.0ms)[0m [1mSELECT `products`.* FROM `products` WHERE (`products`.`id` = 3) LIMIT 1[0m
[1m[35mSQL (0.0ms)[0m BEGIN
[1m[36mSQL (0.0ms)[0m [1mDELETE FROM `products` WHERE (`products`.`id` = 3)[0m
[1m[35mSQL (78.1ms)[0m COMMIT
[1m[36mProduct Load (0.0ms)[0m [1mSELECT `products`.* FROM `products`[0m
Rendered products/destroy.js.erb within layouts/standard (31.2ms)
Completed 200 OK in 312ms (Views: 62.5ms | ActiveRecord: 78.1ms)
Processing by ProductsController#destroy as JS so the remote link works
[36mProduct Load (0.0ms)[0m [1mSELECT products. FROM products* The #products = Product.all is executed
Rendered products/destroy.js.erb within layouts/standard the javascript fie is rendered
So now I guess it's a problem with the javascript code:
$(document).ready(function() {
$("#product_list").html("<%= escape_javascript( render(:partial => "list") ) %>");
});
Is that kind of code supported by prototype? I don't use jQuery...
Found the answer on my own:
/app/controllers/products.rb
def destroy
Product.find(params[:id]).destroy
#products = Product.all
respond_to do |format|
format.js { render :layout=>false }
end
end
/app/views/products/destroy.js.erb
$("product_list").update("<%= escape_javascript(render(:partial => "list")) %>");
Why is there NO tutorial, code example or anything clear about the ajax thingy in rails3?
I had to use code parts from 5 different blogs, forums and casts, and mix them all together until I find the right combination... sigh
on repecmps lines,
just insert :content_type to represent part of content downloaded, like this:
format.js { render :layout=>false, :content_type => 'application/javascript' }
with complete part of repecmps responses:
def destroy
Product.find(params[:id]).destroy
#products = Product.all
respond_to do |format|
format.js { render :layout=>false, :content_type => 'application/javascript' }
end
end
/app/views/products/destroy.js.erb:
$("product_list").html("<%= escape_javascript(render(:partial => "list")) %>");
and, I found this to night.
I think your destroy action is doing too much, as it is destroying the product and list all the products. You could do something like:
/app/controllers/products.rb
class ProductsController < ApplicationController
respond_to :html, :js
def destroy
#product_id = params[:id]
Product.find(#product_id).destroy
respond_with do |format|
format.html { redirect_to posts_path }
end
end
end
/app/views/products/destroy.js.erb
$("#product_<%= #product_id %>").remove()
As long as your product element in the index uses something like dom_id, here's an example:
<ul id="products">
<% #products.each do |product|
<li id=<%= dom_id product %>>...</li>
<% end %>
</ul>
This way your destroy action will only destroy the intended product, and if the client has no JS it fallback the HTML request which will redirect to the products index which will be updated accordingly.
Hum... I'm going to try to help you.
Are you sure after clicking on the delete link, the request is handled as JS ?
Check on the log.
Is you file "app/views/products/destroy.rjs" is rendered ?
Rjs doesn't exist anymore in rails3. The new name is UJS.
Try to rename the file to destroy.js.{haml or erb}
Is it better ?

Resources