I've spent this afternoon moving code around, trying different things, etc but am unable to solve my (probably simple) problem. I have a button on my index layout that displays a partial form in a modal dialogue to a) create new entries or b) edit existing ones. I'm using the materialize, simple form and client side validation gems.
When I click the button for a new entry the modal appears twice, which looks a bit rubbish but more importantly when I try to save an entry two POST requests are made.
Obviously, I just want the form partial to be rendered once... but I can't work out why its happening twice.
Thanks all for your help, let me know if you need any more than what I have provided below.
This is the button code in the index.html.erb layout
<div class="fixed-action-btn">
<%= link_to "<i class='material-icons'>add</i>".html_safe,
new_patient_path, :remote => true, :id => 'new_patient_link',
:class => "btn-floating btn-large red" %>
</div>
Which then loads the javascript in new.js.erb
$('#modal_partial').html('<%= escape_javascript(render('form')) %>');
That subsequently renders the _form.html.erb partial into the following div (which is stored in a shared/_footer.html.erb partial and sits at the bottom of the index page.
<div id="form_modal_wrap">
<div id="modal_partial" class="modal modal-fixed-footer">
</div>
</div>
And the _form.html.erb partial:
<div id="edit_patient_modal" class="";>
<%= simple_form_for @patient, validate: true, remote: true do |f| %>
<div class="modal-content" style="padding: 0px;">
<h4 class="col s12" style="margin: 0px; padding: 10px 25px;">New Patient</h4>
<%= f.error_notification %>
<div class="row">
<div class="col s12" style="padding: 0px;">
<ul class="tabs" style="padding: 0px;">
<li class="tab col"><a class="active" href="#demographics">Demographics</a></li>
<li class="tab col"><a class="active" href="#admission">Admission</a></li>
<li class="tab col"><a href="#presentation">Presentation</a></li>
<li class="tab col"><a href="#jobs">Jobs</a></li>
<li class="tab col"><a href="#results">Results</a></li>
</ul>
</div>
<div id="demographics" class="col s12" style="padding: 20px;">
<%= f.input :nhs, :label => "NHS" %>
<%= f.input :fname, :label => "Firstname" %>
<%= f.input :lname, :label => "Lastname", validate: { presence: true, uniqueness: false } %>
<%= f.input :dob, :label => "DOB", as: :date, start_year: Date.today.year - 110,
end_year: Date.today.year - 12,
order: [:day, :month, :year] %>
<%= f.input :mrn, :label => "MRN" %>
</div>
<div id="admission" class="col s12" style="padding:20px;" >
<%= f.association :location %>
<%= f.input :bed, :label => "Bed" %>
<%= f.association :team, input_html: { multiple: true } %>
</div>
<div id="presentation" class="col s12" style="padding:20px;">
<%= f.input :dx, :label => "Dx" %>
<%= f.input :pmh, :label => "PMH" %>
</div>
<div id="jobs" class="col s12" style="padding:20px">
<p>This job list is shared between all teams.</p>
<%= f.input :jobs, :label => "Jobs" %>
</div>
<div id="results" class="col s12" style="padding:20px;">
<table>
<tr>
<th>Group</th>
<th>Result</th>
<th>Date</th>
</tr>
<% @patient.results.each do |result| %>
<tr>
<td>
<%= Investigation.find(result.investigation_id).group %>
</td>
<td>
<%= Investigation.find(result.investigation_id).short %>
<%= result.value %>
</td>
<td>
<%= result.date %>
</td>
</tr>
<% end %>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<a id="modal_close" href="#!" class="modal-close waves-effect waves-pink btn-flat">Cancel</a>
<%= f.button :submit, :class => "waves-effect btn" %>
</div>
<% end -%>
The following javascript is in the bottom of the _form.html.erb partial:
$(document).ready(function(){
$('#modal_partial .tabs').tabs();
$('#modal_partial select').formSelect();
$('#modal_partial').modal();
$('#modal_partial').modal('open');
$('form').enableClientSideValidations();
});
$("#modal_close").on("click", function(e) {
e.preventDefault();
$('#modal_partial').modal('close');
});
</script>
So I worked out what I'd done in the end...
in application.js I had added both of the following:
//= require jquery_ujs
//= require rails-ujs
By removing either one of these the modals only appeared once. After reading the documentation I only need rails-ujs as it performs the same functions as jquery_ujs, but without having a dependency upon jquery. It does not mean that you can't still have jquery as an independent requirement (as I still do).
So the solution was to delete the line //= require jquery-ujs and just have the following:
//= require rails-ujs
Thanks lacostenycoder for you help