Develop Reference

Ajax record delete not appended to HTML

I am venturing into AJAX and would like to delete a record of a model and followed this thread : How to perform Controller.destroy action asynchronously in rails?
models:
Photographe
Photographephoto
views/photographes/edit.html.erb
<div id="sectionimages" class="gutter-0 row" >
<% #photographe.photographephotos.all.each do |f| %>
<div class="col-md-2 col-sm-3 col-xs-6 col">
<%= link_to professionnel_photographe_photographephoto_path(#photographe.professionnel.id,#photographe.id, f.id), method: :delete, remote: 'true', id: "destruction"+f.id.to_s do %>
<div class="killimage" >
<%= image_tag f.image.url(:small) %>
<%= image_tag 'fatcrosswhite.svg', class: 'imgover' %>
</div>
<% end %>
</div>
<% end %>
</div>
link to Photographephotos#destroy is remote and there's an id like "destruction134"
photographephotos_controller.rb
def destroy
#imagedestroyed = Photographephoto.find(params[:id])
#imagedestroyedid = #imagedestroyed.id
#imagedestroyed.image = nil
#imagedestroyed.save
#imagedestroyed.destroy
respond_to do |format|
format.js
end
end
views/photographephotos/destroy.js.erb
var destroyelement = document.getElementById("<%= "destruction"+#imagedestroyedid.to_s %>");
destroyelement.parentNode.remove();
Problem is the file is indeed deleted but I have to refresh the page to see it removed. It seems the javascript is not effective. (I am trying to remove the parent of the link which is a Bootstrap DIV)

Rails/JS button onclick to re-render partial without entering into DB

I wish to reload a partial-form with a button(Add). I'm new and don't know how to simply display fields in partial like listings one under the other as many times Add button is clicked. I can't find a relevant example. all AJAX examples mention js.erb when object is saved in DB.
<div class="panel-body">
<%= render partial: "degrees/form", :locals => { :f => f } %>
<%= f.link_to (fa_icon 'plus').to_s + " Add Another Qualification ", render(:partial => 'degrees/form', :locals => { :f => f }), class: "btn btn-primary" %>
</div>
Here, #application is the main form trying to display degree fields. Partial is simply two text-fields- one for selecting educational degree and second its detail.Here's partial
<%= f.fields_for [Degree.new], :url => { :action => "index" } do |ff| %>
<div class = "form-group" }>
<%= ff.select :level, options_for_select(Job::EDUCATION, params[:level]), include_blank: "Select Degree", class: 'span-2' %>
<%= ff.text_field :description, :class => 'span5' %>
</div>
<% ff.submit "Add Another Degree", class: 'btn btn-primary' %>

You don't necessary need to save things to pass away to .js.erb... you can just instantiate...
But if your example is precise, you are missing the remote: true flag for the link... And the partial is not defined on the link... you need to make a view responding to the ajax...
Form example
<div class="panel-body">
<%= link_to new_thing_path, remote: true do %>
<i class="fa fa-plus">
Add another qualification
<% end %>
<div class="new-things-container">
</div>
</div>
Controller answering to the ajax request
class ThingsController < ApplicationController
def new
#thing = Thing.new
respond_with #thing
end
end
View for the ajax request rendering a partial inside a specified div
//views/things/new.js.erb
$('.panel-body .new-things-controller').append("<%= render partial: 'degrees/form', locals: { thing: #thing } %>")

Error display on ajax form in rails not working

I'm using an inline form for users to submit data to a table (note that I'm using CSS rather than html tables to achieve this). When an error is returned by the verification in the model, I want to highlight the input field using the Bootstrap error class and put the error message below the appropriate form field. I'm using AJAX to submit the form.
I'm having problems, this is what I have so far:
Controller:
def create
#travel = Travel.new(params[:travel])
#travel[:user_id] = current_user.id
convert_date # and return
if #travel.save
flash[:notice] = "Successfully saved trip"
#travels = Travel.where("user_id = ?",current_user)
respond_to { |format| format.js }
end
end
JS view:
<% if #travel.errors.any? %>
<% #travel.errors.full_messages.each { |msg| logger.debug(msg) } %>
<% #travel.errors.messages.each do |k,v| %>
<% logger.debug("#tf_#{k}") %>
$(<%= "#tf_#{k}" %>).insertAdjacentHTML("afterbegin","<span class="control-group error"><span class="controls">");
$(<%= "#tf_#{k}" %>).insertAdjacentHTML("beforeend","</span></span>");
$(<%= "#error_#{k}" %>).val("<%= "#{k} #{v}" %>");
<% end %>
<% else %>
$(":input:not(input[type=submit])").val("");
$("#travels_list").html("<%= escape_javascript( render(:partial => "travels") ) %>");
<% end %>
form partial:
<%= form_for #travel, :remote => true, :html => {:class => "form-inline", :id => "new-travel-form"} do |f| %>
<div class="row-fluid">
<span id="tf_city"><%= f.text_field :city, :placeholder => "London, UK", :class => "span3" %></span>
<span id="tf_arrive_date"><%= f.text_field :arrive_date, :class => "span2" %> </span>
<span id="tf_leave_date"><%= f.text_field :leave_date, :class => "span2" %> </span>
<span id="tf_notes"><%= f.text_field :notes, :placeholder => "e.g. staying at the Hilton", :class => "span3" %></span>
<%= f.submit "save", :class => "btn btn-primary span1" %>
</div>
<% end %>
<div class="row-fluid error" id="error_expl">
<span id="error_city" class="help-inline span3"></span>
<span id="error_arrive_date" class="help-inline span2"></span>
<span id="error_leave_date" class="help-inline span2"></span>
<span id="error_notes" class="help-inline span3">test</span>
</div>
The logger.debug in the JS is firing, so I know that the error is getting passed to the JS, but the insertAdjacentHMTL() doesn't seem to be working.

maybe this is not going to answer your question but i hope it could help to improve your code.
First, according to your code i guess you should have some associations like this in the model User:
has_many :travels
And in your model Travel:
belongs_to :user
So, in order to improve your code you can have this in your controller:
respond_to :js, only: [:create]
def new
#travel = current_user.travels.new
end
def create
#travel = current_user.travels.new(params[:travel])
if #travel.save
flash[:notice] = "Successfully saved trip"
#travels = current_user.travels
else
# I guess you should have some code here in case any validation fail. If you dont
# have validations for the model Travel, you don't need the if statement here.
end
end
About your problem, can you clarify what is "#tf_#{k}"?

How can I reset certain fields when my form is submitted?

I have my store form that's created by ajax and want to reset certain fields that it has. Here is my code, starting from where the form is rendered all the way to its own views:
Where its rendered:
pets/index.html.erb
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Store
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active add-store-form" id="tab1">
<%= render "stores/form" %>
</div>
</div>
</div>
How it's created:
Note: Both my new and create view have the same exact code.
new.js.erb & create.js.erb (just this 1 line)
$('.add-store-form').html('<%= escape_javascript(render(:partial => 'stores/form', locals: { store: #store })) %>');
Now on my Store form I want to reset the fields with a # by them:
<%= form_for(#store, :remote => true, :html => { :class => "add-form", :id => "sform" }) do |f| %>
# <%= f.text_field :name %>
# <%= f.check_box :personal %>
<%= f.collection_select :category_id, Category.all, :id, :name, {}, {} %>
# <%= f.text_field :address %>
<%= f.text_field :website %>
# <%= f.text_field :phone_number %>
<%= f.submit "Create" %>
How do I reset these certain fields only?

This is kind of a duplicate question of Clear form fields with jQuery .
So, you should include a js file (not new.js.erb or create.js.erb) that has a function like this:
$('#sform').live('submit', function() {
$('#name').val(""); # this only resets the name field, provided it has the id 'name'
});
You have other examples in the answers to that question I linked to. Just notice that they use the click on a button to reset the fields while I suggested using your form submit event when you click your Create button.

How to reset/clear form within my create.js.erb?

I can't get my form to reset correctly. It submits and it goes to the database but everything remains on the form.
Here is my code:
DogsController
def create
#dog = current_user.dogs.new(params[:dog])
if #dog.save
format.js
else
format.js
end
end
dog/create.js.erb
$('.add-dog-form').html('<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: #dog })) %>');
$('.add-dog-form > form')[0].reset(); // doesn't work
dog/new.js.erb
$('.add-dog-form').html('<%= escape_javascript(render(:partial => 'dogs/form', locals: { dog: #dog })) %>');
dogs/_form
<%= form_for(#dog, :remote => true) do |f| %>
<%= f.label :name, "Name" %>
<%= f.text_field :name %>
<%= f.submit "Add Dog" %>
<% end %>
I create dogs at the Pets view instead of the dogs.
PetsController
def add
#dog = Dog.new
#cat = Cat.new
#bird = Bird.new
end
pets/add.html.erb
I click on the tab which changes it to the Dog Tab using Twitter Bootstraps Tabbable Nav ability
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Cat
</li>
<li>
Dog
</li>
<li>
Bird
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active add-cat-form" id="tab1">
<%= render "cats/form" %>
</div>
<div class="tab-pane add-dog-form" id="tab2">
<%= render "dogs/form" %>
</div>
<div class="tab-pane add-bird-form" id="tab3">
<%= render "birds/form" %>
</div>
</div>
</div>
How can I reset the form if it gets created?

Try giving the form an id:
<%= form_for(#dog, :remote => true, :html => { :id => 'dog_form' } ) do |f| %>
and $('#dog_form')[0].reset();.
Alternatively, you can do $(":input:not(input[type=submit])").val("");.

Well it seems my error was in my files themselves. I had created the js files as partials instead of regular pages. i.e. _create.js.erb should be create.js.erb. I also had to add respond_to do |format| in the controller create action. Now I got everything working correctly.