Rails Edit action not updating and not work properly using Ajax - javascript

I am trying to do two things:
With Ajax render Edit form when a user clicks on Edit link/button
Then after editing and they click on Update link/button, hide the form.
...but unfortunately, it didn't behave that way. It perfectly renders the form through Ajax but...
it renders the form on all of the rows.
after edit and you click update it doesn't hide the form.
Below is the code:
controller
before_action :set_clock_entry, only: [:edit, :update]
def edit
end
def update
respond_to do |format|
if #clock_entry.update(clock_entry_params)
format.js { flash.now[:notice] = 'Clock entry was successfully updated.' }
format.html { redirect_to #clock_entry, notice: 'Clock entry was successfully updated.' }
format.json { render :show, status: :ok, location: #clock_entry }
else
format.html { render :edit }
format.json { render json: #clock_entry.errors, status: :unprocessable_entity }
end
end
end
edit.html.erb
<h1>Editing Clock Entry</h1>
<%= render 'form', clock_entry: #clock_entry %>
<%= link_to 'Back', clock_entries_path %>
_form.html.erb
<%= simple_form_for clock_entry, remote: true do |f| %> # I am setting remote: true here
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<div class="form-inputs">
<%= f.input :purpose %>
</div>
<div class="form-actions">
<%= f.button :submit, class: 'btn btn-primary btn-block btn-lg' %>
</div>
<% end %>
edit.js.erb
$('#edit-clock-entry a').hide().parent().append("<%= j render 'form', clock_entry: #clock_entry %>")
html edit link
<tr>
<td>
<div id="edit-clock-entry">
<%= link_to 'Edit', edit_clock_entry_path(clock_entry), remote: true %>
</div>
</td>
</tr>
This is the image - it renders on all ids

I give it all/dedicate it to #bkunzi01's comment under the post to the problem/question and that is what helped me solved it. So this is how I eventually solved it:
Error 1:
So according to what was suggested as I mentioned earlier, I had to redefine my edit.js.erb file to handle unique id of the edit in the row. So my edit.js.erb becomes:
$('#edit-clock-entry-<%= #clock_entry.id %> a').hide().parent().append("<%= j render 'form', clock_entry: #clock_entry %>")
Error 2:
I did not create update action with ajax and that made it behaved the way it behaved. So I created a file called update.js.erb to handle what happens when users hit the update button. So my update.js.erb becomes:
$('.refresh').bind('ajax:success', function () {
$(this).hide().parent();
})
So this is what I have now shown in the image
Log also shows the right record was updated
This fixed it for me.

Related

Rails submitting a form through ajax

There is some problem with using ajax in rails. I want to create new post in my wellcome/inex page. But when I push the botton it show
No route matches [POST] "/welcome/index"
wellcome/index.html
<b>Projects</b>
<ul id="projects">
<% #projects.each do |project| %>
<h2><%= project.title %></h2>
<% end %>
</ul>
<br>
<%= form_for :project do |f| %>
<%= f.text_field :title, :placeholder => ' Enter new project here..' %>
<but><%= f.submit 'Add Project'%></but>
<% end %>
welcome_controller.rb
class WelcomeController < ApplicationController
def index
#projects = Project.all
#project = Project.new
end
def create
#project = Project.new(project_params)
respond_to do |format|
if #project.save
format.html { redirect_to #project, notice: 'project was successfully created.' }
format.js
format.json { render json: #project, status: :created, location: #project }
else
format.html { render action: "new" }
format.json { render json: #project.errors, status: :unprocessable_entity }
end
end
end
private
def project_params
params.require(:project).permit(:title)
end
end
create.js.erb
$('#projects').html("<%= escape_javascript (render 'projects') %>");
routes project
Prefix Verb URI Pattern Controller#Action
project_index GET /project(.:format) project#index
POST /project(.:format) project#create
new_project GET /project/new(.:format) project#new
edit_project GET /project/:id/edit(.:format) project#edit
project GET /project/:id(.:format) project#show
PATCH /project/:id(.:format) project#update
PUT /project/:id(.:format) project#update
DELETE /project/:id(.:format) project#destroy
Spent a lot of time updating this with AJAX but failed everytime. Any there to help? Thanks in advance
You have to add remote: true into form.
<%= form_for #project, url: project_index_path, remote: true do |f| %>
<%= f.text_field :title, :placeholder => ' Enter new project here..' %>
<but><%= f.submit 'Add Project'%></but>
<% end %>
If you want integrate Ajax and Ruby you need to add the line below inside your link action
remote:true
also you can check this about Ajax and Ruby
How Ajax works with ruby on rails

Rails Ajax Jquery

I'm working on an dynamic edit of an article using rails. On each articles can be added paragraphs. I wanted to use Ajax with Jquery following the 136-jquery-ajax-revised tutorial from railscast. I created the template for the form and the new.js.erb response but I keep geting same error:
ParagraphsController#new is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []
This is the link that request the new form from view/article/show
<%= link_to 'New Paragraph', new_article_paragraph_path(#article), remote: true, class: 'uk-button uk-button-primary' %>
view/paragraph/_form
<div class="article-form-container">
<%= form_with scope: :paragraph, url: article_paragraphs, remote: true do |f| %>
<%= f.text_field :title, class: 'uk-input', placeholder: 'Title of paragraph (optional, can be a subtitle of the article)' %>
<%= f.text_area :text, class: 'uk-textarea', placeholder: 'Content of paragraph' %>
<%= f.hidden_field :position, :value => 3 %>
<div class="submit-button">
<%= f.submit class: 'uk-button uk-button-primary' %>
</div>
<% end %>
</div>
routes
resources :articles, only: %i[show update destroy create]
resources :articles do
resources :paragraphs, only: %i[new create update destroy]
end
view/paragraphs/new.js.erb
$('div#article-control-panel').hide("fast", function () {
$('div#article-control-panel').after('<%= j render 'form' %>')
})
controllers/paragraphs_controller
class ParagraphsController < ApplicationController
def new
#paragraph = Paragraph.new
end
def create
#paragraph = Paragraph.new(paragraph_params)
#article = Article.find(params[:article_id])
if #article.user == current_user
#paragraph.article = #article
#paragraph.save
end
respond_to do |format|
format.html { redirect_to #article }
format.js
end
end
def paragraph_params
params.require(:paragraph).permit(:title, :text, :position)
end
end
Can't figure out what the problem is. The error happens in the article page, after I press the link button.
Edit
Strange thing is that if i try to change the url of orm in something like article_path it will work...
Your controller is missing a respond_to. Your new function should look like this:
def new
#paragraph = Paragraph.new
respond_to { |format| format.js }
end
This respond_to allows rails to call the relevant .js.erb file, in this instance your new.js.erb file.
Just keep in mind that when you want to perform an ajax call, you require these few elements:
A respond_to { |format| format.js } in your controller action
Your js.erb file needs to be the same name as your controller action (foo.js.erb)
A partial to render through your js.erb file, typically named the same as your js file. (_foo.js.erb)
If it is a link, you need remote: true. If it is a form and you're using rails 5, you could use form_with or simply include remote: true too.

How do I render a partial containing a form_for for an edit function?

I have a div in a parent view that renders a show partial. In this show partial, I have a button that should change the parent's partial to render the 'form' partial to edit the object, but I keep getting jammed up because it seems that the 'form' partial's form_for is missing the #project object.
How can I pass this object to the 'form' partial? Am I missing something else?
I am rather new to using AJAX. Happy to provide more information if you need.
The error I am getting in the server terminal is
ActionView::Template::Error (First argument in form cannot contain nil or be empty):
routes.rb
get 'switchProjectView', to: 'projects#switch_main_view'
resources :projects
projects_controller.rb
class ProjectsController < ApplicationController
def new
#project = Project.new
end
def create
#project = Project.new(project_params)
if #project.save
flash[:success] = "New Project Added"
redirect_to #project
else
flash[:danger] = "Project Not Added. Please Try Again"
end
end
def show
#project = Project.find(params[:id])
end
def index
#projects = Project.all
end
def update
#project = Project.find(params[:id])
if #project.update_attributes(project_params)
redirect_to #project
else
render 'edit'
end
end
def edit
end
def switch_main_view
respond_to do |format|
format.html
format.js
end
end
def project_params
params.require(:project).permit(:main_contact_name, :id, :main_contact_phone, :main_contact_email, :project_name)
end
end
show.html.erb
<div class="body">
<div class="center jumbotron heading-jumbo">
<h1><%= #project.project_name %></h1>
</div>
<div class="body-jumbo jumbotron" id='project-details'>
<%= render "projects/show" %>
</div>
</div>
switch_main_view.js.erb
$('#project-details').html("<%= j render :partial => 'projects/form' %>");
_form.html.erb
<%= form_for(#project) do |f| %>
<%= f.label :project_name %>
<%= f.text_field :project_name, class: 'form-control'%>
<%= f.label :main_contact_name %>
<%= f.text_field :main_contact_name, class: 'form-control'%>
<%= f.label :main_contact_phone %>
<%= f.text_field :main_contact_phone, class: 'form-control'%>
<%= f.label :main_contact_email %>
<%= f.text_field :main_contact_email, class: 'form-control'%>
<%= f.submit 'Save Project', class: 'btn btn-primary'%>
<% end %>
_show.html.erb
<div class='text-center center'>
<h3><strong>Project Information</strong></h2>
</div>
<h2>Start Date: Launch Date:</h1>
<span class='pull-right jumbo-btn-span'><%= link_to "Edit Project Information", switchProjectView_path(#project), remote: true, class:'btn btn-primary jumbo-btn' %></span>
<h2>Primary Conact's Name: <%= #project.main_contact_name %></h2>
<h2>Primary Conact's Phone: <%= #project.main_contact_phone %></h2>
<h2>Primary Conact's Email: <%= #project.main_contact_email %></h2>
Well, with each request, you need to re-initialize the variable in your controller method. In your case, you need to do the following:
def switch_main_view
#project = Project.new
respond_to do |format|
format.html
format.js
end
end
Doing so will enable you to get rid of the error: First argument in form cannot contain nil or be empty, but that won't enable you to do what you are actually trying to do.
When you use link_to, by default it goes for an HTML request as you can see in Rails logs, something like following will appear:
Processing by ProjectsController#switch_main_view as HTML
In order to get the JS response, you need to tell link_to that you are up for a JS response, not for an HTML response, and you can do by passing format: :js in link_to like:
<%= link_to "Edit Project Information", switchProjectView_path(#project, format: :js), remote: true, class:'btn btn-primary jumbo-btn' %></span>
remote: true will be there to make sure that you aren't reloading the contents of the page, rather you are trying to fetch something from the server in the background.
Your request "switchProjectView_path(#project)" only send object id to server, so you need to load the object to present it in view for response.
1. First the route should look like this so that, the url could contain object id:
get 'switchProjectView/:id', to: 'projects#switch_main_view', as:"switchProjectView"
2. You have to load the object in controller:
def switch_main_view
#project = Project.find(params[:id])
respond_to do |format|
format.html
format.js
end
end
Try passing the variable when calling the partial:
$('#project-details').html("<%= j render :partial => 'projects/form', locals: {project: #project} %>");

Rails 3 Trigger AJAX Submit On Radio Button Change is rendering html response

rails 3 form partial
<%= form_for(answer, :remote => true) do |f| %>
<% if answer.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(answer.errors.count, "error") %> prohibited this answer from being saved:</h2>
<ul>
<% answer.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.hidden_field :conduct_evaluation_id, :value => conduct_evaluation.id %>
</div>
<div class="field">
<%= f.hidden_field :question_id, :value => question.id %>
</div>
<div class="field">
<%= f.hidden_field :program_block_id, :value => conduct_evaluation.program_block_id %>
</div>
<div class="field">
<%= f.radio_button :answer, true, :onchange => "$(this.form).trigger('submit.rails');" %>yes<br/>
<%= f.radio_button :answer, false, :onchange => "$(this.form).trigger('submit.rails');" %>no<br/>
</div>
<div class="actions">
<%= f.submit "Answer" %>
</div>
<% end %>
controller actions
# POST /answers
# POST /answers.json
def create
#answer = Answer.new(params[:answer])
#answer.user = current_user
#answer.conduct_evaluation = ConductEvaluation.find(params[:answer][:conduct_evaluation_id])
respond_to do |format|
if #answer.save
format.js { }
format.html { redirect_to #answer, notice: 'Answer was successfully created.' }
format.json { render json: #answer, status: :created, location: #answer }
else
format.js { }
format.html { render action: "new" }
format.json { render json: #answer.errors, status: :unprocessable_entity }
end
end
end
# PUT /answers/1
# PUT /answers/1.json
def update
#answer = Answer.find(params[:id])
respond_to do |format|
if #answer.update_attributes(params[:answer])
format.js { }
format.html { redirect_to #answer, notice: 'Answer was successfully updated.' }
format.json { head :no_content }
else
format.js { }
format.html { render action: "edit" }
format.json { render json: #answer.errors, status: :unprocessable_entity }
end
end
end
Can anyone tell me what I am doing wrong to make the javascript submit via ajax? When I use the submit button, the request is sent via ajax. If I use the onchange event for the radio button and attempt to submit the form via javascript, it thinks the request is HTML.
Any help would be much appreciated!
-J
EDIT:
So when I use the form submit button, the request is slightly different:
Processing by AnswersController#create as JS
Parameters: {"utf8"=>"✓", "authenticity_token"=>"IcJkV1GnIOEGRs7kaRuVQsp0sTNtHQw0Q+HMM7m/mV0=", "answer"=>{"conduct_evaluation_id"=>"15", "question_id"=>"1", "program_block_id"=>"1", "answer"=>"true"}, "commit"=>"Answer"}
versus using the onchange javascript to trigger a rails.submit event:
Processing by AnswersController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"IcJkV1GnIOEGRs7kaRuVQsp0sTNtHQw0Q+HMM7m/mV0=", "answer"=>{"conduct_evaluation_id"=>"15", "question_id"=>"1", "program_block_id"=>"1", "answer"=>"true"}}
Does anyone know why this may be occurring? Do I need to specify additional parameters when triggering the submit.rails event? Please help! :-D
EDIT 2:
So I found a workaround. It works if I bind the change event for the radio buttons to actually clicking the submit button. This is not the ideal solution, but at least it works.
EDIT 3:
I have decided on the following coffeescript:
$(document).ready ->
$('#my_form input:submit').hide()
$('#my_form input:radio').change ->
$.ajax
type: $(this.form).attr('method')
url: $(this.form).attr('action')
data: $(this.form).serialize()
dataType: 'script'
This allows the corresponding js action file to be returned as the response and be automatically executed on success.
Using onchange() bypasses Rails magic so it won't submit the form as you wish. Write your own change method, f.e.:
$('input.radio_button_selector').change( function() {
$.ajax({
url: $('#my_form').attr('action'),
data: $('#my_form').serialize()
});
});

Ajax/Rails Nested Comments

I have an application where book_comments belongs_to books.
My routes file :
resources :books do
resources :book_comments
end
I have a book_comment form on show.html.erb for books.
def show
#book = Book.find(params[:id])
#new_book_comment = #book.book_comments.build
end
I'm using ajax to post the book_comments to the book show page via a partial: _book_comment_form.html.erb :
<%= form_for([#book, #new_book_comment], remote: :true) do |f| %>
<div class="field" style="margin-top:60px;">
<%= f.text_area :comment, rows: 3 %>
<%= f.submit "Add Comment" %>
</div>
<% end %>
When #new_book_comment is called it refers to a book_comments_controller create action:
def create
#book = Book.find(params[:book_id])
#book_comment = current_user.book_comments.build(params[:book_comment]) do |f|
f.book_id = #book.id
end
if #book_comment.save
respond_to do |format|
format.html { redirect_to #book }
format.js { render :layout => false }
end
end
end
The book_comment is saved but my problem comes in when trying to render via ajax in the _book_comments partial:
<div id="comments">
<% #book_comments.each do |book_comment| %>
<%= render 'comment', :book_comment => comment %>
</div>
<% end %>
</div>
via: create.js.erb in the book_comments folder
$("div#comments").append("<%= escape_javascript(render('books/comment'))%>")
To sum, I'm having trouble making the create.js.erb in book_comments render to the book show page. Why wouldn't create.js.erb in the book_comments folder know to look at the objects in the and infer the new book comment should go inside the div?
My error message:
undefined method `comment' for nil:NilClass
don't understnd why. Seeing that I'm passing the instance variable to the comment partial.
Your partial's doing it wrong. You're passing a not referenced value (comment) to a not used variable (book_comment).
Instead of:
<% #book_comments.each do |book_comment| %>
<%= render 'comment', :book_comment => comment %> ....
you should do:
<% #book_comments.each do |book_comment| %>
<%= render 'comment', :comment => book_comment %>

Categories

Resources