After completing Hartl's tutorial I'm trying to implement #replies for the Micropost model.
I wanted the reply button on a micropost to render the micropost form right there under said post a la twitter. I also wanted to pass the :micropost_id of said post to the reply so that I could later reference which post it was a reply to, again a la twitter.
I've been trying to implement some of that based on the answer to this question.
My microposts controller has
def reply_form
respond_to do |format|
format.js
end
end
The link in the view is
<%= link_to 'reply', 'shared/reply_form', remote: true, locals: { object: :id } %>
With my attempt there to pass on the micropost :id
After a post I have this for the partial to be rendered in:
<div id="ReplyContainer"></div>
I then have _reply_form.js.erb
$('#ReplyContainer').html('<%=j render partial: 'shared/reply_form', locals: { object: :id } %>')
It's not throwing errors but clicking the 'reply' link has no effect and does not render the _reply_form.html.erb partial.
My ultimate goal is you click reply, that renders the micropost form, with #username at the start of the message (derived from the micropost_id?) submitting that form then saves the new micropost including the micro post_id of the original post in the reply_to column that I've created in my microposts table. Any nudges in the right direction much appreciated. Don't want to be barking up the completely wrong tree. Thanks.
EDIT: I'm currently getting a routing error when clicking the reply link.
(No route matches [GET] "/shared/reply_form")
But as far as I can see everything is in the right place.
Ok, sorry, I've just read better your question and the problem is related to the wrong structure.
you have a controller with an action that will render the post
your post page will be composed by the "post" and many replies
each reply I guess is made of a partial (let's say a _reply.html.erb file).
The structure of the page will be then the following:
<div>
... my post here...
</div>
<div id='repliesContainer'>
<%- #replies..each do |id| -%>
<%= render :partial => "shared/reply", :locals => { :object => id} %>
<%- end -%>
</div>
And we call it post.html.erb.
This is will be your shared/_reply.html.erb file:
// note here that the id of the div contains the ID of the reply: each ID must be unique in the page....
<div id='ReplyContainer-#{object}'>
...reply content here...
</div>
Now, your post.js.erb file contains the following:
$('#repliesContainer').append("<%= escape_javascript( render :partial => 'shared/reply', :locals => { :object => id}) -%>");
The content of the append() function will be rendered on the server as a string from the partial.
You have several problems here:
As you discovered, the route to your reply form is incorrect. Until you get this fixed, you won't be able to debug the rest of the system. Run rake routes | grep reply_form to find the URL for it (it won't be under /shared most likely), then see what the response is for that URL. I bet it throws an error (see #2).
Your reply form file has the wrong name: _reply_form.js.erb is a partial but it needs to be 'reply_form.js.erb'. If you hit the correct route for that controller, you'll get a 'Missing Template' error because it is looking for a normal template, not a partial.
Finally, the reply_form.js.erb code needs to point to the shared reply_form partial, so if is really in shared/_reply_form.html.erb then the JS response should be rendered correctly.
Having said that...I really dislike sending Javascript back to the browser, in part because it makes debugging JS much harder - how are you going to find the returned code in your browser debugger? There may be some use cases for this type of design but they are probably very rare.
The better / more idomatic solution is to send JSON data (eg. the rendered text) back to the browser and have some handler parse the JSON and update the DOM. This way all of your JS code is present in the browser and all you are receiving is data. This will be much easier to debug.
Related
I have a model called Question, and it has action create;
My goal is to display a flash message instantly, using a helper method (show_alert for example) when the instance is not valid.
question_controller.rb
def create
question = Question.new(question_params)
if question.save then
redirect_to show_question_path(question.id)
else
show_alert(:warning, question.errors)
end
end
application_controller.rb
helper_method :show_alert
def show_alert(type, message)
#type = type; #msg = message
respond_to do |format|
format.js { render :template => 'alert.js.erb'}
end
end
alert.js.erb
var div = $('<div></div>').addClass(`alert alert-${#type}`)
$('<ul></ul>').append( $('<li></li>').html(#msg)
div.append(ul)
$('#alerts').html(div)
But instead of displaying the flash, I get only the partial's code on the white screen.
see the screenshot
Since I've used respond_to I got another error: ActionController::UnknownFormat
I need the snippet of code in alert.js.erb to be executed, in order to render the flash, I think the trick is somewhere in the render function, but two hours of googling were just a waste of time.
Please help! Thank you in advance
ActionController::UnknownFormat error is showing up because the browser is sending HTML request to Rails server, but the respond_to block has only specified what to do in case of a javascript request from web server.
You will need to add a little bit of Ajax to achieve what you want. See this tutorial on Ajax. https://www.tutorialspoint.com/ruby-on-rails/rails-and-ajax.htm
Ajax will send a js request to browser in the background (i.e the browser will not refresh or show any signs of loading). This js request will be sent to Rails server and it will return the .js.erb file containing the script back to the browser. Now since this script was returned as a response to Ajax request by browser, the browser will already know that it is javascript that needs to be executed.
If you do not wish to implement Ajax, you have the alternate of doing something like this in your create controller:-
def create
question = Question.new(question_params)
if question.save then
redirect_to show_question_path(question.id)
else
redirect_to new_question_path(error: question.errors) #new_question_path is the action that displays the question form to the user
end
end
and then you can initialize an error variable in the action that displays the question form. e.g.
def new
#error=params[:error]
#rest of the code...
end
And then in somewhere in your new.html.erb (or whatever the html.erb file name is)
<script>
<% if #error %>
var div = $('<div></div>').addClass(`alert alert-<%= #type %>`)
$('<ul></ul>').append( $('<li></li>').html(<%= #msg %>)
div.append(ul)
$('#alerts').html(div)
<% end %>
// you might need to tweak the variable names in controller or the above code
</script>
(This code above may not be perfect. its just to give u an idea)
However this approach will not be as quick and beautiful as ajax because when the user will submit their question, the entire page will load again to display the error warning.
By default, all output from helpers is escaped. To show the HTMl as-is, you need to use the html_safe method (https://apidock.com/rails/v4.2.1/String/html_safe). See Using helpers in a view escapes the html?
I cannot be sure this without seeing your alert.js.erb but it could be that you need to use escape_javascript in your alert.js.erb
Something like (and I haven't tested this out) in your alert.js.erb
$('<%= escape_javascript("#{type} - #{msg}") %>').appendTo("#alert")
You can read more about it on Rails Guides - Working With Javascript in Rails
Hope this helps!
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
This is my first time trying AJAX request on Ruby on Rails. I followed the RoR guide to come up with this script. My code is as follows.
course_controller
def index
#course = Course.all
respond_to do |format|
format.html{}
format.js {}
end
end
views/courses/index.js.erb
$('#dummy_div').hide();
views/courses/trial.html.erb (view from where I am calling the AJAX / index controller)
<body>
<%= form_for(Course.new, :method => :get, remote: true) do |f| %>
<%= submit_tag "Search", :name => 'course_list' %>
<%end%>
<div id = "dummy_div" style = "width:100px; height: 100px;background-color:black;"></div>
</body>
My expected result is that the div should disappear once I have submitted the Search function. However, this does not happen. I have not put in embedded ruby because I am just testing whether plain JS works in the first place. My intention is to put in erb later (just to be clear that I am testing this for AJAX). Why does the JS in the index.js.erb file not get executed?
Additionally, how do I debug AJAX requests in Ruby on Rails?
What I have done above was absolutely correct and should be the correct way to route to the js file. This was actually an issue with initializing the model object course and had nothing to do with the code above (I had a small typo mismatch with the model name - Course).
A better way to test the ajax than making the div disappear is using the console.log("i'm at: views/courses/index.js.erb"); or alert("i'm at: views/courses/index.js.erb"); as mentioned by John in the comment above.
I've got the following form:
<%= form_for [#commentable, Comment.new], :remote => true do |f| %>
<%= f.text_area :body %>
<%= f.submit "Add your comment" %>
<% end %>
Then the controller (heavily stripped down to the basic part):
def create
respond_with(#comment) do |format|
format.html { redirect_to params[:return_url] }
format.json { render :layout => !request.xhr? }
end
end
Then here is the javascript for handling the form AJAX:
$('#new_comment')
.bind('ajax:success', function(evt, data, status, xhr){
var $this = $(this);
// Append response HTML (i.e. the comment partial or helper)
$('#comments ol').append(xhr.responseText);
$('#comments ol li:last-child').effect("highlight", {}, 3000);
// Clear out the form so it can be used again
$this.find('input:text,textarea').val('');
// Clear out the errors from previous attempts
$this.find('.errors').empty();
})
.bind('ajax:error', function(evt, xhr, status, error){
// Display the errors (i.e. an error partial or helper)
$(this).find('.errors').html(xhr.responseText);
});
The form submits fine and the comment gets appended as it should, but Safari's Web Inspector shows a SyntaxError: Parse error on line 1 (which is just the doctype) of whatever page I'm on when the comment form is submitted, and I can't figure out why.
Not even sure where to start with this one.
I have gotten that error and it was because the remote ajax call was expecting JavaScript and I was returning html. The .ajax call was defaulting to dataType 'script' so when it got the ajax result, it tried to evaluate it and any < tags caused the error.
I got rid of the error by changing the view from .js.erb to .html.erb and adding 'data-type' => 'html' to the link that contained :remote => true.
In some cases, it may make sense to have the form itself be a JavaScript snippet - something like:
$('#container').replace("<%= escape_javascript(render(...)) %>");
Then you can omit the data-type from the link.
More information about data-type here.
Try putting your bind call on the same line as the new_comment reference:
$('#new_comment').bind('ajax:success', function(evt, data, status, xhr){
I think you're looking at the wrong line 1 - are you including your JavaScript files, it might mean line 1 of one of them. It might also mean line 1 of what's being sent back.
To be honest - try Chrome and switch on the debugging, Chrome is much better at saying which file gave it the problem and where.
You don't need to put all the JQuery in your file anyway - you can write a response in a view if you have the right gems installed - not sure if that would help.
Do you have a div on the page with class "errors"? I was having a very similar problem, and found this question while searching for a solution.
My issue was that we were trying to write back to a div that didn't exist (because of an unless .empty? on the page). When we solved that, the success callback worked.
Lately i have run into a few applications that are using js.erb and i am not really sure how to use it ...here is the code below. Can someone help me understand how this works?
in the routes.rb file
map.resources :player_emails
my controller player_emails_controller.rb in the create action
def create
#player_email = PlayerEmail.create(params[:player_email])
if #player_email.save
#response_txt = "The player has been emailed."
PlayerEmailsMailer.deliver_pattern_email(#something, #player_email, request.host_with_port)
#error = false
else
#error = true
#response_txt = "Please make sure you entered your name and a valid email address."
end
end
then i have the file player_emails/create.js.erb
$('#player_email_ind').hide();
$('#player_email_submit').show();
$('#player_response_msg').html("<%= escape_javascript #response_txt %>").fadeIn();
<% unless #error %>
$('#player_email_form')[0].reset();
<% end %>
i know what the jquery is going but i dont know how this is doing the ajax call. Does it just automatically do an ajax call when there is a js.erb...can someone explain the way this works and why i dont need a respond_to in the controller action telling it this is format.js
If a js (ajax) request is made it will respond by rendering the js.erb file and viceversa.
This is the default behaviour that is being performed:
respond_to do |format|
format.js{
render :template => 'create.js.erb'
}
format.html{
render :template => 'create.html.erb'
}
end
When the form is submitted, it does a POST to /player_emails. The resource declaration in routes.rb ensures the request is handled by PlayerEmailsController#create.
The controller is responsible for handling each format it receives. In the case of an AJAX call, the format is 'js', and is set by explicitly adding the format string to the end of the URL (/player_emails.js) or (more likely) by deducing the format from the request header.
In your case, the create action does not expect anything other than AJAX, so it takes a shortcut and omits the respond_to and format blocks. The controller has already figured out that the format is 'js', so when create is complete it takes the default action of rendering the appropriate template for the format (create.js.erb).
Does your form submit button have a :remote => true on it? If so, there might be some JavaScript in rails.js or application.js that automatically submits via AJAX. Bottom line is, there has to be some JavaScript somewhere that is making an AJAX call and asking for a js or JSON response, otherwise it would be an html request.
As for why you don't need a respond_to block, I'm not entirely sure. Maybe since the call is always being made by AJAX and there is a js.erb template available, it just does its thing without complaining. Is there an html.erb template at all? If not, try doing a regular form submit and see if it complains.