AJAXy action accessible via "normal" request - javascript

Greetings,
I have an application which contains a calendar as alternative index view for Courses (Project has_many Courses). There I have two arrows for navigating to the next/previous month, it works via AJAX. Now, that's my action for updating the calendar:
def update_calendar
#project = Project.find params[:id]
#date = Date.parse(params[:date]).beginning_of_month
#courses = #project.courses.all(:conditions => {:date => (#date - 1.month)..(#date + 1.month)})
respond_to do |format|
# format.html { redirect_to :action => 'index' }
format.js { render :partial => 'calendar', :locals => {:calendar_date => #date, :courses => #courses} }
end
end
The important part is format.js { ... }. I thought it should just answer js/AJAX requests, but it doesn't. It renders the partial when I hit the URL http://localhost:3000/projects/1/update_calendar?date=2010-08-01 for example. I don't want that behaviour, I just want it to answer correctly when it's coming in via AJAX. Do I need to use request.xhr?? And what is format.js { ... } supposed to do than?
Best regards
Tobias

You need to tell it what you want to happen when someone goes to that action with an html request, ie you need to put your format.html block back in. If you don't have the braces it will do the default behaviour which is to show the update_calendar view. You probably want to redirect to a different action though.

Related

How to execute JS after saving a model in DB in Rails 6?

I’m Rails beginner and I’m a bit overwhelmed by the quite simple problem. I would like to do something like this:
Users fills in a form.
Taps on the submit button
Model is saved into database.
If the save operation was successful, execute a javascript.
The questions is: how to accomplish that in the best way possible in Rails 6? Should I use .js.erb files? Or should I have javascript put into webpacker?
I tried so far the following code, but without any success:
controller/jobs_controller.rb
def create
#job = current_user.jobs.build(job_params)
respond_to do |format|
if #job.save
format.html { redirect_to #job, notice: 'Success!' }
format.js {}
else
format.html { render :new }
format.json { render json: #job.errors, status: :unprocessable_entity }
end
end
end
views/jobs/create.js.erb
alert('hello');
As it was pointed out by #max-pleaner I was missing remote: true in the form tag.

Problems submitting AJAX request in Rails 4

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

Easy AJAX HTML element replacement with Rails controllers?

I would love to be able to have an ERB partial like this:
<ul id='things-index'>
<% #things.each do |t| %>
<li><%= t.name %></li>
<% end %>
</ul>
And be able to update it in the controller like so:
class ThingsController < ApplicationController
def create
#thing = Thing.new(params[:thing])
#thing.save
respond_to do |format|
format.html
format.js do
#things = Thing.all
page.replace('things-index')
end
end
end
end
Meaning that JavaScript would be sent as a response without me having to explicity write a js.erb template like the following create.js.erb:
$('#things-index').replaceWith('<%= escape_javascript(render("things/index")) %>')
There may be something like this already, either built in to Rails or available as a gem, but if there is, I'm not aware of it.
I suppose ideally, it would re-render the 'index' action via JS and send the update to the browser, so it might look more like this:
respond_to do |format|
format.html
format.js do
render 'index'
end
end
And know to replace #things-index (or allow me to explicitly specify it).
Update
Whoops...Apparently there was page.replace_html when Prototype was part of Rails, but that functionality has been replaced by the .js.erb template method. That seems much less DRY to me (tons of near-identical js.erb templates), so if anyone has a solution, I'd appreciate it.
You can pass whatever you want to your js.erb, including what to replace, and with what.
$('<%= #id %>').replaceWith('<%= escape_javascript(render(#renderable)) %>')
Note Even in 2012 this wasn't really a recommended way of doing things like this. These days (early 2015) I'd say it's even less recommended given the great client-side technologies available.
Another solution would be to send back just the data, for the client to render as it choses:
respond_to do |format|
format.html
format.json do
#things = Thing.all
render :json => #things
end
end
And on the client side:
function updateList(data){
var $item,
$list = $('#things-index');
$list.find('li').remove();
$.each(data, function(i, item){
$item = $('<li />').text(item.name);
$list.append($item);
});
}
$.getJSON('/my/route.json', function(data){
updateList(data);
});

Query rails database, and update highcharts using Javascript

I have a page which shows a highchar. I'd like to use Javascript to fetch several pieces of information for a specific user. I want to fetch from my database and place it on the highcharts graoh. I have set up a JSfiddle which shows static data. But
What I am trying to do is:
Make javascript call a Rails action with parameters.
Query the rails database(projectHours table).
Rails returns the response.
Javascript updates highcharts and maps the information stored in the projectHours table.
So my question is What if I want to use information from my db?
Two of the following models
Effort.rb
class Effort < ActiveRecord::Base
belongs_to :project_task
belongs_to :user
end
Users.rb
class User < ActiveRecord::Base
has_many :projects
has_many :efforts
A further note, I think that in my efforts controller I may need to add some form of render action
rails reponds_to do |f| f.json
{ render :json => some_hash
}
end
You can use jQuery's get function in order to send a GET request to your rails app like so
$.get("/efforts/24", { name: "John", time: "2pm" } );
And in your controller you could do something like
def show
#effort = Effort.find(params[:id])
# or find by some of the name of time params
respond_to do |f|
format.json { render :json => #effort }
end
end
Depending on how you want to render the results you can either let javascript handle the ajax:success by adding in to the original jQuery get
$.get("/efforts/24", { name: "John", time: "2pm" } ).success(function(data) {
alert(data)
// Or do whatever you want :)
});
Or you can change the respond_to to
respond_to do |f|
format.html { render :nothing => true }
format.js
end
And create a show.js.erb in your app/views/efforts directorty. In this file you can use the responded object
$('body').html("<h1><%= escape_javaScript(#effort.title) %></h1>").append("
<%=escape_javaScript(#effort.content) %>");
Some good tutorials
Rails and jQuery
jQuery GET

Rails double render

I know this isn't valid code, but is there a way to do something like this in Rails?:
render "$('#dialog').replaceWith(#{render :action => 'new.html.erb'});"
What I'm trying to do basically is replace the contents of a JS dialog with what is/would be returned from calling render 'new.html.erb'.
Edit for #Devin M:
controller action:
def new
#act = Act.new(:user_id => current_user.id)
end
def create
#act = Act.new(params[:act])
if #act.valid?
#act.save
else
render :action => :new
end
end
new.js.erb:
$('#dialog').replaceWith("<%= escape_javascript(render(:action => 'new.html.erb')) %>");
Full error:
Showing app/views/acts/new.js.erb where line #1 raised: undefined method `formats' for nil:NilClass
You should split this code out into a seperate view since including it in the controller would go against the ideas of MVC. I would update the controller to respond to JS requests using some code like this in the action I wanted to modify:
respond_to do |format|
format.html { redirect_to #item }
format.js
end
And create a view like this with the extenstion .js.erb:
$('#dialog').replaceWith("<%= escape_javascript(render :partial => "new.html.erb", :locals => { :act => #act }) %>");
You can then trigger this JS with a remote link to the action or by adding your own UJS.

Categories