We Keep Coding

Display Rails error messages inside a Bootstrap modal when using Selectize and Ajax

I'm trying to build an app that allows users to share quotes by artists about other artists. For instance, a quote by Bob Dylan about John Lennon. As such, my Artist model is set up in a way that allows an artist to be both the Speaker and Topic on a Quote, and each Quote belongs_to each Artist as the Speaker or Topic.
I'm having trouble getting a Rails error message to display inside a Bootstrap modal when using Selectize to trigger the modal. I got the modal working by following this demo.
The modal is used to create a new Artist from the quotes/new form, but I can't get the error messages for the Artist model to display in the Bootstrap modal or on the quotes/new page. When I try to create something that triggers an error message (such as validates_uniqueness) in the modal, it just closes the modal and doesn't display the error message. Everything else is working as expected.
What am I missing to connect the Ajax request to the view?
Here's the relevant section of my form:
<%= f.label :speaker, 'Who said it?' %>
<%= f.collection_select :speaker_id, #speakers, :id, :name,
{prompt: 'Select an artist'}, {class: 'form-control selectize-speaker'} %>
Full source for quotes/form.html.erb
Here's the relevant code in my controller:
class ArtistsController < ApplicationController
def create
#artist = current_user.artists.build(artist_params)
authorize #artist
respond_to do |format|
if #artist.save
if request.referer.include?("artists")
flash[:success] = "Artist was successfully created."
format.html { redirect_to #artist }
else
format.json { render json: #artist }
end
else
format.html { render :new }
format.json { render json: #artist.errors.full_messages }
end
end
end
end
Full source for artists_controller.rb
Relevant javascript code:
$(document).on('turbolinks:load', function() {
var selectizeCallback = null;
// Selectize Speaker
$('.speaker-modal').on('hide.bs.modal', function(e) {
if (selectizeCallback != null) {
selectizeCallback();
selecitzeCallback = null;
}
$('#new_speaker').trigger('reset');
});
$('#new_speaker').on('submit', function(e) {
e.preventDefault();
$.ajax({
method: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(response) {
selectizeCallback({value: response.id, text: response.name});
selectizeCallback = null;
$('.speaker-modal').modal('toggle');
}
});
});
$('.selectize-speaker').selectize({
create: function(input, callback) {
selectizeCallback = callback;
$('.speaker-modal').modal();
$('#speaker_name').val(input);
}
}); // end selectize speaker
}); // end document on
Full source for quotes.js.
And my error message partial, shared/_error_messages.html.erb:
<% if object.errors.any? %>
<div id='error_explanation'>
<div class='alert alert-danger'>
<button type='button' class='close' data-dismiss='alert'>×</button>
<p><strong>The form contains
<%= pluralize(object.errors.count, 'error') %>.</strong></p>
<ul>
<% object.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
Additional source files:
models/quote.rb
models/artist.rb
controllers/quotes_controller.rb

Both a successful and unsuccessful save are returning a 200 response, which means that your success callback will be called:
success: function(response) {
selectizeCallback({value: response.id, text: response.name});
selectizeCallback = null;
$('.speaker-modal').modal('toggle');
}
This always toggles the modal, therefore closing it.
If you ensure that the response is a 4xx on validation error, then you can define an error callback which populates your errors list and does not close the modal.
So instead of:
format.json { render json: #artist.errors.full_messages }
Use something like:
format.json { render json: #artist.errors.full_messages, status: :bad_request }
Then, pass an error callback to your AJAX call:
error: function(response) {
// somehow populate your errors list
// display the errors list
}
This won't work right now, though, because the errors container won't exist: you only render it under this condition:
object.errors.any?
Which, on initial load, will always evaluate false. What you can instead do is always render the errors container, default it to some hidden class if there aren't any errors, and in your error callback, remove the hidden class after it's populated.

Rails AJAX returns error

I am trying to understand Rails built in AJAX helper -> remote: true.
I have a link in a view (views/show) that calls a controller via AJAX:
<%= link_to 'My Profile', edit_user_path(current_user), class: 'user-profile', remote: true %>
Which hits the appropriate controller (controllers/users_controller.rb) with the appropriate fields (tested with byebug):
def edit
#user = User.find(params[:id])
respond_to do |format|
format.html { render plain: 'profile' }
format.js { render plain: 'profile' }
format.json { render plain: 'test' }
end
end
And I have my JS (javascripts/users.js) perform an action on ajax success or failure:
$(document).ready(function() {
$('.user-profile').on('ajax:success', function(event) { console.log(event) });
$('.user-profile').on('ajax:error', function(event) { console.log(event) });
});
However, no matter what I try, the ajax:error function always executes and I cannot figure out why. Any ideas?

Rails Ajax Refresh Partial while persisting params

I have a Rails app with a controller/view called "calls". Here is the basic controller action for index:
calls_controller.rb
def index
if params[:region].present?
#assigned = Call.where(region_id: params[:region][:area]).assigned_calls.until_end_of_day
#unassigned = Call.where(region_id: params[:region][:area]).unassigned_calls.until_end_of_day
else
#assigned = Call.assigned_calls.until_end_of_day
#unassigned = Call.unassigned_calls.until_end_of_day
end
end
Here are my views:
index.js.erb
$('#active').html("<%= escape_javascript render :partial => 'calls/assigned_calls', :locals => {:assigned_calls => #assigned} %>");
$('#inactive').html("<%= escape_javascript render :partial => 'calls/unassigned_calls', :locals => {:unassigned_calls => #unassigned} %>");
$(".select").select2({
placeholder: "Select One",
allowClear: true
});
index.html.erb
<div id="active">
<%= render "assigned_calls" %>
</div>
<div id="inactive">
<%= render "unassigned_calls" %>
</div>
<script>
$(document).ready(function() {
setInterval(function () {
$.ajax('calls/<%= params[:region][:area] %>');
} , 5000);
});
</script>
_assigned_calls.html.erb (view code omitted)
<%= form_tag calls_path, :method => 'get' do %>
<p>
<%= select_tag "region[area]", options_from_collection_for_select(Region.order(:area), :id, :area, selected: params[:region].try(:[], :area)), prompt: "Choose Region" %>
<%= submit_tag "Select", :name => nil, :class => 'btn' %>
So what's happening is on page load if I do not have the params of :region passed it sets the calls without being scoped by region. If region_id is present then it scopes calls where region_id is "1" or whatever the Region ID is that is passed from the submit_tag.
This works fine in the controller and view, however here's my problem. My index.html.erb I need to refresh the partials WITHOUT disturbing the params passed. So on setInterval I need to figure out how to reload the partials while persisting the params passed in the URL.
I tried to figure this out using a setInterval method but I'm not sure what I'm doing here 100%.
Can someone give me some advice on how to refresh the partials every 5 seconds while persisting the params so my instance variables persist through refresh?
If you need more context and/or code please let me know.
Update
Trying to rework the javascript based off an answer from a user and here's what I have.
<script>
$(document).ready(function() {
setInterval(function () {
$.ajax({
url: 'calls_path',
type: "GET",
data: { "region": '<%= #region.html_safe %>' }
}), 5000);
});
});
</script>
The page will load but when it tried to trigger in the chrome inspector I get:
calls?utf8=✓&region[area]=3:2901 Uncaught SyntaxError: Unexpected token )
Maybe this is a JS syntax error or I'm not closing the function properly.

If I understood properly, you want to have your parameters somehow pipelined through AJAX call to your controller, back to your js.erb file where it refreshes the partials?
My advice is to set passed parameters as instance variables in your controller like this:
calls_controller.rb
def index
if params[:region].present?
#region = params[:region]
#assigned = Call.where(region_id: params[:region][:area]).assigned_calls.until_end_of_day
#unassigned = Call.where(region_id: params[:region][:area]).unassigned_calls.until_end_of_day
else
#assigned = Call.assigned_calls.until_end_of_day
#unassigned = Call.unassigned_calls.until_end_of_day
end
end
Now your #region instance variable will be available in your index.js.erb
where you can pass it to other partials you are trying to render.
index.js.erb
$('#active').html("<%= escape_javascript render :partial => 'calls/assigned_calls', :locals => { :assigned_calls => #assigned, :region => #region } %>");
$('#inactive').html("<%= escape_javascript render :partial => 'calls/unassigned_calls', :locals => { :unassigned_calls => #unassigned, :region => #region } %>");
_assigned_calls.html.erb
<%= form_tag calls_path, :method => 'get' do %>
<%= select_tag "region[area]", options_from_collection_for_select(Region.order(:area), :id, :area, selected: region.try(:[], :area)), prompt: "Choose Region" %>
<%= submit_tag "Select", :name => nil, :class => 'btn' %>
<% end %>
Also, I think that better practice in your index.html.erb script tag
is to do it like this:
<script>
$(document).ready(function() {
setInterval(function () {
$.ajax({
url: 'calls_path',
type: "GET",
data: { "region": '<%= #region.html_safe %>' }
});
}, 5000);
});
</script>
Please test this out if you're interested and get back to me :)

Ajax Delete request ReactJS and Ruby on Rails

I have a component called Items that lives within a parents called ItemsContainer. When a button in Items is clicked an Ajax function is called to delete that Item.
At the moment however I am receiving a 500 error message and am not sure why.
Item Component
class Item extends React.Component{
constructor(props) {
super()
this.state = {
name: '',
price: 0,
code: '',
id: ''
}
}
componentWillMount() {
this.setState({
name: this.props.data.name,
price: this.props.data.price,
code: this.props.data.code,
id: this.props.data.id
})
}
deleteItem() {
let finalUrl = '/items/' + this.state.id;
$.ajax({
type: "DELETE",
url: finalUrl, /* THIS URL IS CALLING CORRECTLY ie. /items/8 */
dataType: "json",
success: function(response) {
console.log("successfully deleted");
},
error: function () {
console.log("error");
}
})
}
render(){
let itemName = this.props.data.name
let itemCode = this.props.data.code
let itemQuantity = 1
let itemPrice = (this.props.data.price * itemQuantity).toFixed(2)
const itemId = this.props.data.id
return(
<tr>
<td>{itemName}</td>
<td>{itemCode}</td>
<td>{itemQuantity}</td>
<td><button className="btn btn-warning" onClick={this.deleteItem.bind(this)}>Remove</button></td>
<td>£{itemPrice}</td>
</tr>
)
}
}
Rails Items Controller
class ItemsController < ApplicationController
def create
#item = Item.new(item_params)
if #item.save
render partial: 'items/item', locals: {item: #item}
else
render json: #item.errors.to_json
end
end
def destroy
if #item.destroy
render partial: 'items/item', locals: {item: #item}
else
render json: #item.errors.to_json
end
end
private
def item_params
params.require(:item).permit(
:name,
:price,
:code,
:id
)
end
end
Creating a new Item is working as expected but I can't work out why I am receiving my 500 error for my delete action. Any help would be much appreciated.

Please check your destroy method in rail controller.
There is no definition for #item hence 500 internal server error :)

How do I display a JSON status message in a view for a controller action success or failure in Rails?

I send certain data from a view to my controller. The controller action checks to see if the user has enough money, and if so, allows them to buy a tool of a certain price.
Otherwise, it doesnt update their tool.
Either way, I want to send a JSON response back to the view, to display.
How do I display these messages?
Here is my controller:
# Updates dollars and tool id when a user goes shopping in 'store'...
def update_tool
#user = User.find(params[:user_id])
#tool = Tool.find(params[:toolId])
price = #tool.price
# subtract tool price from users dollars
if #user.dollars <= price
respond_to do |format|
msg = { :status => "error", :message => "You do not have enough money!", :html => "<b>NO MONEY!</b>" }
format.json { render :json => msg }
end
else
#user.dollars = #user.dollars - price
# re-assign users tool_id reference ID
#user.tool_id = #tool.id
#store to database
#user.save
#sends a confirmation back to store
respond_to do |format|
msg = { :status => "success", :message => "You purchased a tool!", :html => "..." }
format.json { render :json => msg }
end
end
end
I want to take these status responses and use them to trigger events in my view,
something like this:
success: function(){
window.alert(':message');
},
error: function(){
window.alert(':message');
}
I'm just uncertain how to access the content of the json response message.
UPDATE:
Heres my AJAX request, with my success or failure functions:
function buyTool() {
$.ajax({
type: 'PATCH',
headers: {
'X-CSRF-Token': '<%= form_authenticity_token.to_s %>'
},
url: '<%= update_tool_path %>',
dataType: "JSON",
async: true,
data: {
'user_id' : <%= #user.id %>,
'toolId' : toolId
},
success: function(){
window.alert(":json");
},
error: function(){
window.alert(":json");
}
});
};
Its not working though-- My alert windows just actually displays the text ":json".
Do I need to pass the anon error: function that data?

My preference for this is to use flashes that are triggered by ajax. To do this use the following.
Add the following to your ApplicationController.rb
after_filter :flash_to_headers
#....
private
def flash_to_headers
return unless request.xhr?
response.headers['X-Message'] = flash_message
response.headers["X-Message-Type"] = flash_type.to_s
flash.discard # don't want the flash to appear when you reload page
end
def flash_message
[:error, :warning, :notice, :success].each do |type|
return flash[type] unless flash[type].blank?
end
end
def flash_type
[:error, :warning, :notice, :success].each do |type|
return type unless flash[type].blank?
end
end
And then add a flashes.js.coffee file with the following (This uses bootstrap styled flashes so just change the classes to something with your own styling)
show_ajax_message = (msg, type) ->
if (type == "error")
$("#flash-message").html "<div id='flash-#{type}' class='alert alert-danger'>#{msg}</div>"
else if (type == "success")
$("#flash-message").html "<div id='flash-#{type}' class='alert alert-success'>#{msg}</div>"
else if (type == "notice")
$("#flash-message").html "<div id='flash-#{type}' class='alert alert-info'>#{msg}</div>"
else if (type == "warning")
$("#flash-message").html "<div id='flash-#{type}' class='alert alert-warning'>#{msg}</div>"
$("#flash-#{type}").delay(5000).slideUp 'slow'
$(document).ajaxComplete (event, request) ->
msg = request.getResponseHeader("X-Message")
type = request.getResponseHeader("X-Message-Type")
show_ajax_message msg, type
Finally add somewhere for the flashes to render
# views/shared/_flashes.html.erb
<!-- Id is used for ajax flashes -->
<div id="flash-message">
<% if flash[:notice] %>
<div class="alert alert-success">
<%= flash[:notice] %>
</div>
<% elsif flash[:error] %>
<div class="alert alert-danger">
<%= flash[:error] %>
</div>
<% elsif flash[:alert] %>
<div class="alert alert-info">
<%= flash[:alert] %>
</div>
<% end %>
<% flash.discard %>
</div>
and render it from your layouts/application.html.erb
<%= render 'shared/flashes' %>
After this you can trigger flash messages as you would normally in rails and they will appear.