Modal form only works after refresh - ruby

Hi I have a modal form in my application that is spawned by a link in the nav bar. The form seem to only work when the page has been refreshed, if I access a page from a link it wont work until I refresh the page.
Here is my form in aoolication.html.erb:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h1>New Update</h1>
</div>
<div class="modal-body">
<%= form_for :post, url: posts_path do |f| %>
<div class="container">
<p>What have you been working on?</p>
<p>
<%=f.label :title %> <br>
<%=f.text_field :title %>
</p>
<p>
<%=f.label :body %> <br>
<%=f.text_field :body %>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Close</button>
<%= f.submit %>
<%end%>
</div>
</div>
</div>
</div>
From looking into it I've found it could be caused by malformed HTML, but I can't seem to find anything that ould be causing it.
Any help with fixing this would be greatly appriciated.


I've managed to fix it by placing the entire body in form for tags

Related

Partial View Modal popup buttons not calling Controller Action Method

I am trying to implement a modal popup which gives a user two buttons, each pointing to action methods in separate controllers.
Here is the partial view:
<div class="modal fade" id="importOption">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Select Import Option</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="flex-container">
<div class="first">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="BundleNodes" asp-action="Import" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="auto" data-dismiss="modal">Select Node(s)</button>
</div>
</div>
<div class="second">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="Nodes" asp-action="SelectBind" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="select" data-dismiss="modal">Auto Import</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
This partial view is basically a modal popup with a form in the body element which contains two buttons. The buttons were taking up too much space in the parent view so I want to move them into a popup, reducing the number of buttons in the parent view. The problem is, once the buttons are in the partial view they don't trigger their respective controller actions.
I am rendering the partial view in the parent view using this line:
#await Html.PartialAsync("_ImportOptionPartialView")

Bootstap carousel with Ruby keeps showing the last image

I am working on a dinamic photos carousel using Ruby and bootstrap ligthbox carousel, but i cannot make it work properly. when clicking on an image of the carousel to open that image in a modal keeps showing the last closed photo and not the photo I am clickin on. Any help will be appreciated, thanks.
<div class="container">
<div class="row d-flex flex-wrap align-items-center" data-toggle="modal" data-target="#lightbox">
<% #photos.each do |photo| %>
<div class="col-12 col-md-6 col-lg-3">
<img src="<%= cl_image_path photo.photo.key %>"/>
</div>
<% end %>
</div>
<!-- Modal -->
<div class="modal fade" id="lightbox" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right p-2" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div id="myCarousel" data-ride="carousel" class="carousel slide">
<ol class="carousel-indicators">
<% #photos.each_with_index do |photo, n| %>
<li data-target='#MyCarousel' data-slide-to="#{n}" class="#{'active' if n == 0}"></li>
<% end %>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="<%= cl_image_path #photos.first.photo.key %>">
</div>
<% #photos.drop(1).each do |photo| %>
<div class="carousel-item">
<img class="d-block w-100" src="<%= cl_image_path photo.photo.key %>">
</div>
<% end %>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
`

Rails Ajax Refresh Breaks Modal Upload Form Submit

I have a list of items that gets refreshed on create and update, I have a form that allows you to add elements, remove, adjust pricing inline. If you'd like to edit whom the task is assigned to, it pops up a modal which contains a partial with the form once again but to edit the object. Everything works fine and refreshes as it should.
The Problem
On the same line I have a paperclip and a camera that also open up modals that contain forms to upload a document or click camera to upload a picture. These work fine from the page if it's on load but after an ajax refresh the submit buttons will not work.
The Code
Index Partial:
<div class="row">
<div class="col-md-12">
<% if work_order.tasks.any? %>
<ul class="task-table">
<% work_order.tasks.each_with_index do |task, index| %>
<li class="row task-table-row">
<%= bootstrap_form_for(task, remote:true) do |f| %>
<%= render(partial:'tasks/task', locals:{task:task, f:f, index: index}) %>
<% end %>
</li>
<%= render(partial:'work_orders/modal_forms', locals:{task:task, index:index}) %>
<%= render(partial:'tasks/attachments', locals:{task:task, index: index}) %>
<%= render(partial:"tasks/edit", locals:{task:task, index:index})%>
<% end %>
<li class="row">
<div class="table-total">
<div class="col-md-6 col-md-push-6 column">
<div id="total-wrap">
<h3>Est. total: <span id="subTotal"></span></h3>
</div>
</div>
</div>
</li>
</ul>
<% else %>
<li class="row task-table-row">
No tasks currently exist.
</li>
<% end %>
</div>
</div>
<div class="button-margin">
<%= render(partial:'tasks/new', locals:{work_order:work_order})%>
</div>
<div id="placeHolder"></div>
<%= link_to "Mark as Complete", work_order_path(work_order, work_order:{completed: true}), class:"btn btn-block btn-danger btn-outline b-r-xs", method: :put, remote:true %>
Task partial:
<div class="col-md-4 column">
<div class="pull-right column inline">
<p class="assign inline"><small class="text-muted">
<% if task.assignable_id.present? %>
<%= truncate(task.assignable.name, length:7) %>
<% else %>
assign
<% end %>
</small></p>
<a href="#" class="text-muted inline" data-toggle="modal" data-target="#editModal<%= index %>">
<i class="fa fa-pencil"></i>
</a>
</div>
<p class="inline"><%= truncate(task.location, length:20) %></p>
</div>
<% if task.labor.present? && task.materials.present? %>
<!-- if labor or materials are both available -->
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{labor:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class="fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.labor) %></span>
</p>
</div>
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{materials:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.materials) %></span>
</p>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<a id="deleteTask">
<i class="fa fa-remove text-danger pull-right" > </i>
</a>
<a data-toggle="modal" data-target="#imageModal<%= index %>">
<i class="fa fa-camera text-success pull-right"></i>
</a>
<a class="text-primary" data-toggle="modal" data-target="#attachmentModal<%= index %>">
<i class="fa fa-paperclip pull-right"></i>
</a>
<% if task.task_photos.any? || task.attachments.any? %>
<a class="text-green" data-toggle="modal" data-target="#attachments<%= index %>" tooltip="View Attachments">
<i class="fa fa-eye pull-right" > </i>
</a>
<% end %>
</div>
<% elsif task.labor.blank? && task.materials.present? %>
<!-- Else if labor is blank and materials are present -->
<div class="col-md-3 column">
<%= f.text_field :labor, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Labor" %>
</div>
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{materials:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.materials) %></span>
</p>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>
<% elsif task.materials.blank? && task.labor.present? %>
<!-- Else if materials is blank and labor is present -->
<div class="col-md-3 column">
<%= link_to work_order_task_path(task.work_order, task, task:{labor:nil}), method: :put, remote:true, class:" text-muted pull-right" do %><i class=" fa fa-pencil"></i><% end%>
<p class="inline pull-right">
<span class="text-success currency"><%= number_to_currency(task.labor) %></span>
</p>
</div>
<div class="col-md-3 column">
<%= f.text_field :materials, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Material" %>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>
<% else %>
<!-- Else materials and labor are both blank -->
<div class="col-md-3 column">
<%= f.text_field :labor, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Labor" %>
</div>
<div class="col-md-3 column">
<%= f.text_field :materials, hide_label:true, prepend: "$", append: ".00", placeholder:"Est. Material" %>
</div>
<div class="col-md-2 column task" data-task="<%= task.id%>">
<%= f.submit "Save", class:"btn btn-outline btn-success b-r-xs submitTask pull-right" %>
</div>
<% end %>
The Modals That Wont Submit
<!-- attachments modal -->
<div class="modal inmodal fade" id="attachmentModal<%= index %>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Attach Documents</h4>
<small class="font-bold">Upload quotes, sales orders, receipts and invoices.</small>
</div>
<div class="modal-body">
<div class="row">
<%= bootstrap_form_for [task, Attachment.new] do |f| %>
<div class="col-md-4">
<%= f.text_field :name %>
</div>
<div class="col-md-4">
<%= f.text_field :amount, prepend: "$", append: ".00", label:"Total (optional)" %>
</div>
<div class="col-md-4">
<%= f.file_field :file %>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<%= f.submit "Add Attachment", class:"btn btn-primary btn-outline b-r-xs" %>
<% end %>
</div>
</div>
</div>
</div>
<!-- end attachments modal -->
<!-- images modal -->
<div class="modal inmodal fade" id="imageModal<%= index %>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Attach Images</h4>
<small class="font-bold">Upload images and descriptions.</small>
</div>
<div class="modal-body">
<div id="target">
</div>
<%= bootstrap_form_for [task, TaskPhoto.new] do |f| %>
<div class="field">
<%= f.hidden_field :property_manager_id, value:current_manager.id %>
</div>
<div class="field">
<%= f.file_field :photo %>
</div>
<div class="field">
<%= f.text_field :description %>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white btn-outline b-r-xs" data-dismiss="modal">Close</button>
<%= f.submit "Add Photo", class:"btn btn-primary btn-outline b-r-xs" %>
<% end %>
</div>
</div>
</div>
</div>
<!-- end images modal -->

Turns out that having the submit in my modal footer was causing the error.
Although it works just fine on initial page load, it was causing error when it was refreshed by ajax. Moving the submit button into the modal-body with the rest of my form fixed my problem.
Hope this helps someone in the future!

bootstrap 3 modal breaking on AJAX response - mvc4

My bootstrap modal footer just doesn't show up.
Main View
<div class="modal fade" id="ModalId">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal">Log</button>
</div>
<div class="modal-body">
<div id="form">
<div id="ModalBodyId">
#Html.Partial("PartialViewName");
</div>
</div>
</div>
<div class="modal-footer"> // this part doesn't show up
<button type="button" data-dismiss="modal" onclick="SaveNow()";>Edit</button>
</div>
</div>
</div>
</div>
Here is what loads the partial view into the modal. I had to add the below code for the validation to work. The validation works fine now, however i do not see the button which is contained inside the modal footer.
$("#ModalId").click(function () {
var form = $("#ModalBodyId").closest("form");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
$.ajax({
url: "/ControllerName/ActionName",
type: "GET",
data: $("#ModalBodyId").serialize(),
cache: false
});
});
If i remove the #Html.Partial("PartialViewName"); from modal-body then the modal-footer shows up.

How to render partial on bootstrap modal using ajax

I want to display sign in form on bootstrap modal when we click on the button in nav bar.Here is my code
Here is my new.js.erb
$("#myModal").before("<%= escape_javascript(render "new", :formats => [:html]) %>");
$("#myModal").modal('show');
Here is my _top_nav.html.erb
<li><%= link_to 'LOGIN', new_user_session_path, remote: true %></li>
Here is my _new.js.erb
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby= "myModalLabel" aria-hidden="true" id="login">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">times;</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="well">
<div class="row">
<div class="col-lg-10">
<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), html: { class: 'form-horizontal', role: 'form' }) do |f| %>
<h1 id="h1id">Member Login</h1>
<legend>
<h4>If you are not a member yet please become a member <%= link_to 'here', new_user_registration_path %> to Sign In</h4></legend>
<%= f.input :email, :required => false, :autofocus => true, placeholder: ' Email', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'} %>
<%= f.input :password, :required => false, placeholder: 'Password', input_html: {class: 'form-control'}, label_html: {class: 'col-sm-2 control-label' }, wrapper_html: {class: 'form-group'} %>
<%= f.button :submit, "Sign in", style:"margin-left:17%", class:"btn btn-primary" %>
<% end %>
</div>
<div class="col-lg-2">
<%= image_tag('logolatinfoods-01.png', size: '300x70', class: 'logo-style') %>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
I am unable to understand where i am making mistake.Ajax call is working but modal is not displaying.I am new to ajax.Can any one explain what went wrong here.

_new.js.erb should probably be _new.html.erb

Resources