I'm adding a new Sale_Contact to my Rails app using a Bootstrap 3 modal and AJAX. It isn't working - I'm getting a 200 OK code returned from the server, and the Object is being added to the database, but because there is no JSON returned (the create action just sends back the create.js.erb file to the JQuery.parse.json action) then I'm firing ajaxError rather than ajaxSuccess, my modal isn't closing and the javascript to update the view with the new sale_contact object is not executed.
I can't work out why my Rails controller is expecting a Json object returned in this instance - I've basically copied this code directly from other objects I also build with modals and AJAX, which all work perfectly. Can anyone help me understand what's going wrong in this instance?
My Controller:
def create
@sale_contact = SaleContact.new(sale_contact_params)
@sales_opportunity = @sale_contact.sales_opportunity
respond_to do |format|
if @sale_contact.save
#format.html { redirect_to @sale_contact.sales_opportunity, notice: 'Sale contact was successfully created.' }
format.js
#format.json { render json :show, status: :created, location: @sale_contact }
else
format.html { render :new }
format.json { render json: @sale_contact.errors, status: :unprocessable_entity }
format.js { render json: @sale_contact.errors, status: :unprocessable_entity }
end
end
end
I've tested this, and I can see that the if @sale_contact.save block is being run. As you can see above I've also commented out the format.html and format.json lines but this doesn't change the outcome.
My create.js.erb file for Sale_Contacts:
console.log('anything at all');
//update the selection list with the new sale contact, and close the modal
$('#sales_opp_sale_contact_modal').modal('hide')
.clear_previous_errors();
resetForm($('#new_sale_contact'));
$input = $('#contact_error');
$input.closest('.form-group').removeClass('has-error').find('.warning-block').html('');
//render the newly added sale contact to the table if the AJAX call succeeded
console.log('fired');
$(document).ajaxSuccess(function() {
$( ".log" ).text( "Triggered ajaxSuccess handler. The ajax response was: " +
xhr.responseText );
$('#sales-opp-key-contacts-table-div').html("<%= escape_javascript(render :partial => 'sale_contacts/table')%>");
//console.log(document);
$('.alert').remove();
$('.navbar-default .navbar-nav > li > a').removeClass('selected');
$('#sale-contacts').DataTable({
retrieve: true,
});
This code is never fired - instead this is passed back to the ajaxError function:
Uncaught SyntaxError: Unexpected token c
jQuery.parseJSON @ jquery.js?body=1:8483
(anonymous function) @ organizations.js?body=1:23
jQuery.event.dispatch @ jquery.js?body=1:4642
jQuery.event.add.elemData.handle @ jquery.js?body=1:4310
jQuery.event.trigger @ jquery.js?body=1:4551
done @ jquery.js?body=1:9286
jQuery.ajaxTransport.send.callback @ jquery.js?body=1:9686
As you can see, the "c" character that starts my create.js.erb file is passed in, which isn't valid JSON, and therefore the parseError is thrown.
I've added some new code to look at the returned items from the ajaxError - in case these help:
$(document).ready(function(){
$(document).on('ajaxError', function(XMLHttpRequest, textStatus, errorThrown){
console.log("some error" + errorThrown);
});
$(document).on('ajaxError', function(req, xhr, err){
console.log('my message' + err + xhr.status);
});
$(document).bind('ajaxError', function(event, jqxhr, settings, exception){
// note: jqxhr.responseJSON undefined, parsing responseText instead
console.log(jqxhr.responseText)
$(event.data).render_form_errors( $.parseJSON(jqxhr.responseText) );
});
The output from this is:
some error[object Object]
my message[object Object]200
console.log('anything at all');
//update the selection list with the new sale contact, and close the modal
$('#sales_opp_sale_contact_modal').modal('hide')
.clear_previous_errors();
resetForm($('#new_sale_contact')); .....
I've edited this for brevity, you can see the first two responses show that I'm sending back objects (how do I find out which?) and the 200 OK code, and the responseText is the create.js.erb file that doesn't get fired.
I'm going crazy trying to work out why this is not working. The only difference between this object and the other objects I'm creating in this way is that my Sale_Contact is a join table (it belongs_to both Sales_Opportunities and Key_Contacts so they have_many_through this table).
In case it matters, here's the model:
class SaleContact < ActiveRecord::Base
validates :key_contact_id, presence: true
validates :sales_opportunity_id, presence: true
belongs_to :key_contact
belongs_to :sales_opportunity
enum role: [ :not_known, :evaluator, :decision_maker, :budget_holder ]
enum preference: [ :unknown, :supporter, :enemy ]
end
And here's my sale_contacts/show.json.jbuilder file:
json.extract! @sale_contact, :id, :key_contact_id, :sales_opportunity_id, :role, :preference, :created_at, :updated_at
Any help would be appreciated
Quick Edit Here's my routes.rb file for the relevant items, I had hoped this might be the issue:
resources :sales_opportunities do
resources :timeline_events, shallow: true
resources :swots, shallow: true
resources :sale_contacts, shallow: true
end
Second edit
Just as an idea that came from writing this post, I ran the same ajax analysis for an ajaxSuccess event in my other modals - they also return the exact same info as above:
some error[object Object]
my message[object Object]200
whatever create.js.erb template was added successfully
So it's not the return from the server that's the issue - something else is going wrong. I'm using Bootstrap 3 modals, so maybe I need to dig into their ajax code to find the problem.
via
Chebli Mohamed
