1

I've a simple todo list app,and in the main page I've a button that brings up a new simple_form to add a new task. I'm using ajax so that the form appears in the same page (i.e. the main page).

My question is this, how to show validation error in the same form on the same page (i.e. the main page) without showing the form in another page (already done that).

My files are ,

items_controller.rb

def create  
  @item = Item.new(secure_params)
if @item.save
  flash[:notice] = "Form submitted by #{@item.title}"
  if flash[:isUpdate]
     @var = Item.find(flash[:toDestroy]).destroy
  end
redirect_to root_path
else
    respond_to do |format|

        format.html {render action: "_add"}

    end 

end

end

home.html.erb

   <div class="table-responsive">
   <table class="table">
    <thead>
    <tr>
        <th><%= sortable "title"%></th>
        <th><%= sortable "work_time"%></th>
        <th>Creation Date</th>
        <th>Expiration Date </th>
    </tr>
    </thead>
    <tbody>
    <% @items.each do |item|%>
<tr>
    <td><%= link_to simple_format("#{item.title}"), items_show_single_record_path(:id =>item.id), remote: true%></td>
    <td><%= item.work_time%></td>
    <td><%= item.creation_date%></td>
    <td><%= item.expiration_date%></td>
</tr>
<% end %>
    </tbody>
</table>
</div>
<div id="items-modal"></div>

_add.html.erb

<div class ="modal-dialog modal-content modal-body">
<%= simple_form_for @item do |form|%>
<%= form.error_notification %>
<%= form.input :title%>
<%= form.input :creation_date, :readonly => true %>
<%= form.input :expiration_date%>
<%= form.input :work_time %>
<%= form.input :completed %>
<%= form.button :submit, 'Submit', class: 'submit' %>
<% end %>
</div>

add.js.erb

$("#items-modal").html("<%= j render 'add' %>")
$("#items-modal").modal("add")

I've looked at different answers here but no luck. Also, I'm new at this, so explanation and/or resources are appreciated.

An update:

I've added remote: true to the form in _add.html.erb, now if there's an error in the form and I click submit, it displays the form in the same view, but it doesn't show the errors!

jouzef19
  • 63
  • 4
  • 11
  • by page you mean the url and the view? – aks Jul 11 '17 at 11:50
  • yes, same url and view – jouzef19 Jul 11 '17 at 11:51
  • @jouzef19 You said you are using AJAX to submit the `simple_form_for` above? I assume then you are not using Rails built-in data-remote? I do not know how you handle the AJAX, but if you are using `remote: true`, it would look something like [THIS](https://stackoverflow.com/questions/26808696/rails-4-rendering-a-partial-with-ajax-jquery-remote-true-and-respond-to). The form (which includes the new validation errors) would be rendered through your add.js.erb code above. Yours would look like `<%= simple_form_for @item, remote: true do |form| %>` – Jay-Ar Polidario Jul 11 '17 at 12:07
  • @Jay-ArPolidario I'm using remote: true, it works fine when I'm submitting a correct form, but if my form has any error (e.g. blank input that should be non-blank) then it will return the form with error but in a different url and view, and I want the form to be rendered with the errors in the original view and url that generated it in the first place (i.e. home.html) – jouzef19 Jul 12 '17 at 06:24
  • You said you're using `remote: true`? But your `simple_form_for` does not contain a `remote: true`. Are you perhaps referring to your `link_to simple_format... remote: true`? The link and the form are different. If you add `remote: true` to a link, then that link (when clicked) will call an AJAX request (and will not open a new page). Same goes if you add `remote: true` to a form, then that form (when submitted) will call an AJAX request (and will not open a new page... which is what you want right?) – Jay-Ar Polidario Jul 12 '17 at 08:34
  • @Jay-ArPolidario sorry for the late response. I've `remote: true` in both the form and `link_to`. but the problem now is that whenever I submit a wrong entry (e.g. I leave the **title** blank whereas its mandatory), the forms reload but without showing the error (i.e. the title should not be blank ). – jouzef19 Jul 15 '17 at 10:12
  • 1) What does `.modal('add')` do in `$("#items-modal").modal("add")`? If you remove that line, do the error messages now show up after form submit? 2) Try adding `<% puts @item.errors.full_messages %>` just right below `<%= simple_form_for @item do |form|%>`, then try submitting the form again. That will print out any error messages on your `rails server` terminal window. If you don't see any error message then probably something's wrong with your `Item` model validations. If you see error message, then either `$("#items-modal").modal("add")` is the problem, or some other JS code is the problem – Jay-Ar Polidario Jul 15 '17 at 15:35

0 Answers0