I'm making an e-mail service with mailboxer gem.
In my index view I have several links that will lead to inbox/draft... like this:
<%= link_to "Inbox", show_conversations_path, :remote => true %>
...
<div id="content">
</div>
Then my show_conversation js.erb
$("#content").html("<%=escape_javascript(render :partial=>"show_conversations")%>");
the controller (messages_controller)
def show_conversations
#inbox = current_user.mailbox.inbox
respond_to do |format|
format.js
end
end
And there's also a partial view _show_conversations.html.erb (already tested, through a simple render so no errors there).
So my problem is that, when I click on the link, it actually redirects to a blank plage (when it shouldnt, or at least it's not my intention, redirect at all, just show the content on the div).
I've realized that it actually renders its controller, then the erb.js, the partial view, and I Don't know why the controller again but this time as HTML.
A piece of the log:
Started GET "/en/messages/show_conversations"4
Processing by MessagesController#show_conversations as JS
...
Rendered messages/_show_conversations.html.erb (7962.4ms)
Rendered messages/show_conversations.js.erb (23239.0ms)
Completed 200 OK in 23330ms (Views: 23237.9ms | ActiveRecord: 5.0ms)
Started GET "/en/messages/show_conversations
Processing by MessagesController#show_conversations as HTML
Completed 406 Not Acceptable in 8ms (ActiveRecord: 0.5ms)
I know it shouldn't redirect, and I believe it shouldn't call two times to the controller (and the second one as if it was html instead of js), but I don't really know why it's happening nor have I found a similar problem through the forum
Check with below code, if it works
def show_conversations
#inbox = current_user.mailbox.inbox
respond_to do |format|
format.js { render :layout => false }
end
end
Try modifying this line:
$("#content").html("<%=escape_javascript(render :partial=>"show_conversations")%>");
to:
$("#content").html("<%= escape_javascript(render :partial=>'show_conversations') %>");
or make it pretty:
$("#content").html("<%= j render :partial=>'show_conversations' %>");
Related
I have inherited a Rails code base that I do not fully understand. We have a requirement to, when the user hits Submit, render ON THAT PAGE the set of validation failures the user put into the form. I cannot redirect to any other page - we must remain on the page which contains the form upon which they put the invalid input.
Here is my method
def tpr_bulk_update
updated, date_died = update_tprs #it returns 0,0 when there are validation fails
if updated == 0 && date_died == 0
flash.now[:notice] = 'A bunch of errors occurred'
#Here I need to refresh the page. I do not especially want to redirect.
#I want this to perform exactly the same as me hitting the refresh button on my browser.
#The initial form loaded via a very complicated codebase that I do not understand exactly.
#I do have available to me the params from the initial call - but it seems to me hitting refresh on
#the browser implicitly handles repassing to this method with the SAME PARAMS I CAME IN WITH....
#AND it shows my flash.now. So then, I want to refresh the page the same mechanism the browser uses,
#because this is what demonstrably meets my requirement
elsif !date_died
redirect_to tprs_index_vod_assets_path
else
flash[:notice] = "One or more TPR assets were not given valid future dates, so those invalid dates did not save".html_safe
redirect_to tprs_index_vod_assets_path
end
end
The issue is I see no way to do this. Perhaps the browser invoking refresh uses javascript that is impossible to inline in my rails controller?
redirect_to :back
fails on account that the set of params I came in with are not populated - it explodes.
respond_to do |format|
format.js {render inline: "location.reload();" }
end
My method does not output javascript, and neither will it ever output javascript - that is a requirement for the system.
I need whatever is equivalent to the refresh operation my browser (Chrome) performs when I press "Refresh". I want that to happen right after I set my flash.now message. How can I capture what Chrome/what hitting refresh actually does? And how can I perform it within my controller?
This is exactly what AJAX was designed for. By sending an asyncronous request you can send data to the server without reloading the page and update the page with the response. In Rails you can use Server Side Concerns to simply replace a chunk of contents with a rendered view.
Since you don't actually have an example of the form or controller this is a simplefied example that demonstrates the concept:
class ThingsController < ApplicationController
def new
#thing = Thing.new
end
def create
#thing = Thing.new(thing_params)
respond_to do |format|
if #thing.save
format.js
else
format.js { render :new }
end
end
end
end
end
# things/_form.html.erb
# remote: true is the default - its just added for extra clarity here
<%= form_with(model: #thing, remote: true, id: 'my-special-form') do |form| %>
<% if #thing.errors %>
# .. display the errors
<% end %>
# ...
<% end %>
# things/new.html.erb
<%= render partial: 'form' %>
// things/new.js.erb
// Since we want to extract the children of the form element
// we use DOMParser to create a fragment
const node = new DOMParser().parseFromString(
"<%= j render(partial: 'form') %>", // rails renders the template
"text/html"
);
// Find form on page and replace its contents
document.getElementById('my-special-form').innerHTML = node.querySelector('form').innerHTML;
// #todo set flash message
// things/create.js.erb
window.location = "<%= thing_path(#thing) %>";
The way that this works is that Rails UJS listens for submit events on any element with the data-remote attribute. Instead of the normal submit it will send an XHR request with the Content-Type: application/javascript header.
After rails is finished rendering and reponding with your js.erb view it is sent back to the client and Rails UJS takes the response and evals it by popping it into a script tag.
I'm trying to implemet a complex task, and faced with a problem, that my JS code do not work when called from format.js.
I have a link with such code:
= link_to new_user_support_letter_path, {:id => 'contact-us', :remote => true }
In my user_support_letters_controller.rb:
def new
#letter = UserSupportLetter.new
respond_to do |format|
format.js {}
format.html
end
end
In new.js.erb:
alert("rrr");
So, when I click a link nothing happens.
Meaningful logs for clicking a link:
I, [2016-10-19T21:47:41.130608 #1] INFO -- : Started GET "/user_support_letters/new" for 172.18.0.6 at 2016-10-19 21:47:41 +0000
I, [2016-10-19T21:47:41.150411 #1] INFO -- : Processing by UserSupportLettersController#new as JS
I, [2016-10-19T21:47:41.269853 #1] INFO -- : Rendered user_support_letters/new.js.erb within layouts/application (0.1ms)
I, [2016-10-19T21:47:41.344629 #1] INFO -- : Rendered application/_support_email.slim (0.1ms)
...
Can anybody tell what I'm doing wrong? Thanx!
To get this to work you need to set layout to false and declare the content_type you're using.
From what I know/have read this is standard behaviour in rails. Here is a similar post discussing it with a link to a bug log. https://stackoverflow.com/a/1170121/3366016
Change your controller action to this:
def new
#letter = UserSupportLetter.new
respond_to do |format|
format.js { render layout: false, content_type: 'text/javascript' }
format.html
end
end
By default it will try to load in the current layout for the given content type. For JS it typically is smart enough to know not to load a layout. By setting false you are disabling the layout and just telling it to render without a layout.
It seems if you are using some form of templateing it messes with the requests a bit. This answer seems to identify in the comments a specific work around for slim template. This answer describes another solution, basically using the default layout setup. With this, Rails seems to know how to handle it for JS requests.
I'm trying to get my pagination working with Ajax, using either will_paginate or kaminari.
When I hit pagination link my log says
Processing by Instructor::FullDashboardController#pupil_leads as JS
and
Rendered instructor/full_dashboard/pupil_leads.js.erb within layouts/main (0.1ms)
But the js has no effect. So to test it I wrote
console.log("Hello");
<%logger.debug "This is the js file"%>
alert('Hello Rails');
In the js.erb file, in my log I see This is the js file as expected, but there is nothing in js console in my browser and the alert doesn't show. So I know the file is being processed, as my logger.debug works but there is no js.
How can I further troubleshoot this?
Rails 4.1
Ruby 2.1
Full Dash Controller
class Instructor::FullDashboardController < ApplicationController
layout 'main'
...
def pupil_leads
#ivar = Model.where("something = ?", some_object.id).order("created_at desc").page(params[:page]).per(10)
respond_to do |f|
f.js { render :content_type => 'text/javascript' }
f.html
end
end
Add layout: false option to the render block:
def pupil_leads
# some code here
respond_to do |f|
f.js { render layout: false, content_type: 'text/javascript' }
f.html
end
end
For some reason Rails don't recognize request as xhr, I also watched that the views extension (.erb.html or .slim) must be specified in full.
I've been following http://blog.markhorgan.com/?p=522 as a guide to update an image in a form with an ajax callback. Image saves fine but I want to do some clever ajax so the page doesn't refresh.
Here's my code:
edit.html.haml:
#promo-image
= render partial: 'promo_image'
_promo_image.html.haml:
= form_for( #property, remote: true) do |f|
= f.file_field :promo_image, :pattern => "^.+?\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$", :id => 'promo-image-upload'
= f.submit 'Update'
= image_tag #property.promo_image.url(:medium)
properties_controller.rb
def update
#property = Property.find(params[:id])
if #property.update(property_params)
format.js
else
render 'edit'
end
end
update.js.haml:
$("#promo-image").html("#{escape_javascript(render partial: 'promo_image',)}");
With the code outlined above I get error pointing to the format.js line:
ArgumentError in PropertiesController#update too few arguments
Can anyone see where I'm going wrong or perhaps point me in the right direction?
Many thanks!
Steve
UPDATE
Just to be clear, I want to be able to update JUST the Div stated here:
update.js.haml:
$("#promo-image").html("#{escape_javascript(render partial: 'promo_image',)}");
This code works, but refreshes the whole page:
respond_to do |format|
format.html { redirect_to edit_property_path(#property) }
format.js
end
FURTHER UPDATE
Just to be clear on my motives, I want to be able to update an element on the edit page, and not be redirected to a different one, e.g. show or index. This is for UI reasons. The guide above talks about the exact same thing.
FINAL UPDATE
The issue is because I'm using a file upload, this can't be achieved via ajax. For those in a similar situation see here: Rails form_for with file_field and remote => true and format => :js
A solution could lay here, and I will investigate this: https://github.com/JangoSteve/remotipart
Thanks to everyone for helping me work out the error of my ways!
Regarding your first update, you said that this code works, but refreshes the page:
respond_to do |format|
format.html { redirect_to edit_property_path(#property) }
format.js
end
If that is the case, that means the incoming request is an html request, rather than an AJAX request. So the format.html block runs and redirects the browser to the same page, which now has the updated image.
What you need to do is figure out why the page is not sending the request as AJAX. You can see the request format if you look at the terminal output (if running locally). It will say something like:
Processing by ControllerName#action as [format]
Format needs to be JS in order for the format.js to render update.js.haml.
UPDATE:
Now that you mention it, the issue is indeed the file_upload field. Uploading files with AJAX is actually not possible with the Forms Helper. See the docs:
Unlike other forms making an asynchronous file upload form is not as simple as providing form_for with remote: true. With an Ajax form the serialization is done by JavaScript running inside the browser and since JavaScript cannot read files from your hard drive the file cannot be uploaded. The most common workaround is to use an invisible iframe that serves as the target for the form submission.
I did a quick search on Google and found the remotipart gem, which seems to specialize in doing this. I don't have any experience with it though, so you're on your own from here on. :)
Try changing your update action to
def update
#property = Property.find(params[:id])
if #property.update(property_params)
respond_to do |format|
format.html { redirect_to properties_path }
format.js
end
else
render 'edit'
end
end
Source
My rails application is using js.erb views instead of html.erb views for specific windows. This works fine in practice, but when I'm using cucumber tests with capybara it gives me an error of
Missing template admin/groups with {:handlers=>[:erb, :rjs, :builder, :rhtml, :rxml], :formats=>[:html], :locale=>[:en, :en]} in view paths
When I click the button pertaining to this particular view. There is no groups.html.erb but there is a groups.js.erb. I want to somehow tell cucumber/capybara to not try to render the groups.html.erb but still render the groups.js.erb. I would prefer not to generate an unnecessary html file to render the same thing the escape javascript below is doing.
groups.js.erb:
$("#admin_content").html("<%= escape_javascript(render :partial => 'groups') %>");
Relevant admin controller method:
def groups
#groups = Group.all
end
You should use proper MIME type handling for your responses. Try this:
def groups
#groups = Group.all
respond_to do |format|
format.js
end
end
eventually you can be more specific about how to respond :
format.js { render layout: false }
more info on respond_to here.
note: if your controller only manages js responses, you can add respond_to :js at the top of the class, and then use respond_with #object in your actions.