Could you please help me figure out how to delay the JavaScript hide function until after my searches have been completed? This way, I can continue making further searches without any interruptions.
Every time I try to make a search and press enter, my search bar suddenly disappears from view.
To better understand the issue, take a look at the screenshot below;
https://i.sstatic.net/Q2Ig1.png
index.html.erb
<a href="#" class="toggle-formed" style="float: right;" >Search</a>
<div id="sample" class="<%= @xvaziris_data.present? ? 'hidden' : '' %>">
<%= form_tag xvaziris_path, method: 'get', class: "form-group", role: "search" do %>
<p>
<center><%= text_field_tag :search, params[:search], placeholder: "Search for.....", class: "form-control-search" %>
<%= submit_tag "Search", name: nil, class: "btn btn-md btn-primary" %></center>
</p>
<% end %><br>
<% if @xvaziris.empty? %>
<center><p><em>No results found for.</em></p></center>
<% end %>
</div>
search.js
$(document).on('page:change', function () {
$("div#sample").hide();
// | === HERE
$("a.toggle-formed").click(function(event) {
event.preventDefault();
$("div#sample").fadeToggle();
});
});
general.scss
.hidden {
display: none;
}
I would appreciate any suggestions or feedback on this matter.
Thank you in advance.