ActionController::UnknownFormat in rails API fetch request with JavaScript Front-end - javascript

SPA html/JavaScript Rails app with a json API BackEnd to serve up data to the Front. The index page is displayed and built entirely with JS in a javascript_pack_tag. I then both call my own api for json data saved in PG and then to a third party API openweathermap. Everything was working just as I wanted then I attempted to store my openweathermap API key with the gon gem. I was able to do this. However it broke my app. I then undid all of the gon gem stuff and it the app is still broken.
Error
terminal
#ubuntu terminal
ActionController::UnknownFormat (CitiesController#index is missing a template
for this request format and variant.
request.formats: ["application/json"]
request.variant: []):
console
#chrome console
class_mode.js:238 GET http://localhost:3000/cities.json 406 (Not Acceptable)
fetchCityData # class_mode.js:238
(anonymous) # class_mode.js:9
localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
#class_mode.js
line 238> return fetch(BASE_URL).then(res => res.json()).then(function (json) {
From these errors I have traced this back to my controller action returning HTML instead of JSON. Specifically the < indicates html returning in the controller.
Latest attempt to fix in controller
def index
#all = City.all_in_json
respond_to do |format|
format.html { render :index }
format.json { #all }
end
end
I also moved the json logic into the City model as such
def self.all_in_json
#cities = self.all
#returnValue = #cities.map do |city|
if city[:name] === nil
city[:name] = city.to_name
city.save!
city
else
city
end
end
#returnValue.to_json
end
Again this app was working perfectly. I have spend a full day of debugging now and am turning to StackOverflow.
I have attempted to create distinct routes to call my fetch() request to for the retrieval of all the records of the City table/ tried respond_to.

Your controller action does not say what to render, it simply calls the #all variable. Assuming you're correctly asigning #all to a json string, then try changing your controller method it:
def index
#all = City.all_in_json
respond_to do |format|
format.html { render :index }
format.json { render json: #all, status: 200, message: 'bla' }
end
end
Status and message are optional

Related

Kaminari How to process routes as javascript

I have an issue. I had a freelancer do some things with my code and he messed up some things. One of the main things is the pagination doesn't work. I checked my old files and it used to say this
Processing by HomeController#load_more_books as JS
Now it's giving me
Processing by HomeController#load_more_books as JSON
How do I change the processing back to Javascript? Thank you
Change the default format in your routes
get "/some-resource", to: "some_controller#some_method", defaults: {format: "js"}
or in you controller you can tell .json requests to respond to .js
#app/controllers/some_controller.rb
class SomeController
def some_method
respond_to do |format|
format.json { render "some_js_template.js" }
end
end
end

Basic API in Rails

Let's assume I have a Users controller with a returnjson action. Say I want to create an API so when the client calls on that method, it would return the user's data to the client. For example:
https://www.example.com/returnjson?username&password
A get request would be made by JavaScript with that URL and than the rails would than return the user info in a JSON format. How would I got about doing this?
Thanks in advance!
Oh i see, you only want to return the attributes requested in the parameters. Sorry.
First of all, i would just us the show action for this rather than making a new action. The purpose of show semantically is to return data for a single record, so it's the right action for this job.
Your parameters for the request aren't well structured - i would structure them like
https://www.example.com/users/123?required[]=username&required[]=password
which would give you
params = {:required => ["username", "password"]}
I would do it like so:
def show
#user = User.find_by_id(params[:id])
respond_to do |format|
format.html #default to standard 'render the show template'
format.js #default to standard 'render .js file' or whatever
format.json do
#filter out the ones we want
if params[:required]
hash = #user.attributes.slice(params[:required])
else
hash = #user.attributes
end
#this will automatically call `.to_json` on the thing we pass to it (`hash` in this case)
render json: hash
end
end
end
You can add extra security things in here, for example to limit the fields which you make accessable via the api.

Rails update.js.erb not executing javascript

I am building a form in rails that will edit an existing question via ajax.
After the form is submitted and the question has been updated, the update method in the controller renders update.js.erb, which will hide the form again.
My problem is that the javascript code in update.js.erb is not executing at all.
I know that the file is rendering because it shows up in the server output, and when I put a
<% raise params %>
into it, it works.
However, even the simplest
alert('hello');
has no effect in the same file.
I've ruled out javascript and jquery configuration issues because the same code works perfectly in my edit.js.erb file. It's just not working in update.js.erb.
What am I missing?
Edit:
Firebug shows no errors. Here is the response in firebug's network panel:
alert('hello');
$('#question_body').replaceWith('<h4><p>jhsdfjhdsb k jdfs j fjfhds <strong>jfshaflksd;hf sdldfs l fdsalkhdfskhdfs</strong>;fd lfdksh hfdjaadfhsjladfhsjadfs ;df sjldfsj dfas hafdsj fdas ;ldfas ldfs df dl;hdf fdh ;fdj ;lfads</p></h4>');
def update
Edit 2:
This is the controller action:
def update
respond_to do |format|
if #question.update_attributes(params[:question])
format.html { redirect_to #question, :flash => { :success => 'Question was successfully updated.' } }
format.json { head :no_content }
format.js {}
else
format.html { render action: "edit" }
format.json { render json: #question.errors, status: :unprocessable_entity }
end
end
end
In your $.ajax call make sure to set the dataType option to "script" otherwise the response could be interpreted in other ways and thus not executed as JS.
Do you work with haml, or html.erb? If the former, then this might be the solution:
respond_to do |format|
...
format.js {render layout: false}
end
I had the exact same problem, found this question early on, took another hour or so of Googling to find this question on StackOverflow that led me to it: jQuery + Ajax + Haml. js.erb files not firing
In your update.js.erb file you need to escape javascript wherever you execute ruby code.
$('.container').empty().append('<%=
escape_javascript(
render 'update'
)
%>')
This is what solved it for me ...
This issue isn't just because of Controller side. It is also can be in the View side which is you didn't clarify the data-type of your post request.
Make sure in your console that the request is treated as JS.
Reference: Similar issue
I ran into the same issue and found this page. I tried methods listed here but found no luck. While later the following method solve my issue.
My originally code was:
$('#html_id').html('<%=#ruby_variable%>');
And I updated it to:
$('#html_id').html('<%=raw #ruby_variable.to_json%>');
Now it works as expected.
Found out what it is! 😊 (solution for rails 4)
If you have in your ajax call parameters that are not in your permitted list, the record gets saved, you get no error messages about the 'not permitted' parameters, but the update.js.erb won't run - even though your terminal will feed back 'Rendered update.js.erb etc'
If the extra parameter is an attribute in your model, just permit it.
The simplest way to permit non model parameter is to add in your model:
attr_accessor :paramKeyTroublesome
Then you can also permit it in the controller.
in the $ajax call, data needs to be hashed up properly:
data: {model_name: {paramKey1: value, paramKeyTroublesome: value}}
One more problem to be aware of is an error in your update.js file. Nothing will execute if there are any syntax errors. You can check this by going to your browser inspector and enabling Log XMLHttpRequests Then reviewing the output js file.

Accessing JSON information from Rails in d3.js

I'm trying to incorporate d3.js into my project and am having trouble figuring out how to access a JSON object, which is being served from my Ruby on Rails backend.
Here is my Controller code:
class CoursesController < ApplicationController
respond_to :html, :json
def course
#course = Course.find(params[:id])
respond_with #course do |format|
format.html
format.json {render json: #course}
end
end
I've been trying both in the console and in my view to figure out how to access the information. (by the way, if I scrap the respond_with block and just keep the render JSON block, I can see that the JSON object is, in fact, a response object).
Here is what I've been trying (in the view):
<%= javascript_tag do %>
var data = d3.json('<%= #course %>');
console.log(data);
<% end %>
This returns an object, but the object is undefined, so when I call:
dataset[0].course.course_name;
I get the following error:
TypeError: Cannot read property 'course' of undefined
I've also tried something like the following in the console:
var url = '/courses/1';
var dataset = d3.json(url);
dataset[0].course.course_name;
But get the same error.
I'm relatively new to js, so I'm likely making a rookie mistake, but, whatever it is, I can't see it!
Thanks in advance for the help!
The issue is that the d3.json function (https://github.com/mbostock/d3/wiki/Requests#wiki-d3_json) with one parameter returns the request. You would then have to issue that request.
The 'typical' use is to have a second parameter, with a callback function. This is an asynchronous callback, so you can't assign the return value to a var.
Here is what I suggest:
var url = '/courses/1';
d3.json( url, function( error, data ) {
console.log( data );
// do all actions required now that the data is retrieved
} );

How does "respond_with_navigational" work?

I'm working with Devise and DeviseInvitable to manage authentication in my app and I'm having some trouble adding AJAX support to InvitationsController#update. The controller in DeviseInvitable looks like this:
# invitations_controller.rb
# PUT /resource/invitation
def update
self.resource = resource_class.accept_invitation!(params[resource_name])
if resource.errors.empty?
set_flash_message :notice, :updated
sign_in(resource_name, resource)
respond_with resource, :location => after_accept_path_for(resource)
else
respond_with_navigational(resource){ render_with_scope :edit }
end
end
This works well when resource.errors.empty? == true and we execute:
respond_with resource, :location => after_accept_path_for(resource)
(i.e. invitations/update.js.erb is rendered and my javascript calls are made). The problem is that when resource.errors.empty? == false, and we execute:
respond_with_navigational(resource){ render_with_scope :edit }
the server says:
Rendered invitations/update.js.erb (1.4ms)
but my javascript calls are not being run. Can anyone explain what respond_with_navigational is supposed to be doing? I've been googling for hours and I haven't found an explanation of this api anywhere.
Thanks!
OK, I figure out what respond_with_navigational is doing. It's defined in the Devise base classes as such:
def respond_with_navigational(*args, &block)
respond_with(*args) do |format|
format.any(*navigational_formats, &block)
end
end
and, navigational_formats is defined in Devise as well:
# Returns real navigational formats which are supported by Rails
def navigational_formats
#navigational_formats ||= Devise.navigational_formats.select{ |format| Mime::EXTENSION_LOOKUP[format.to_s] }
end
So, it's basically a wrapper for respond_with(). In order to get this to work, I had to add the following to my InvitationsController:
respond_to :html, :js
and now, update.js.erb is being rendered properly.

Categories