在Rails 4.2.1应用程序中使用javascript实现显示/隐藏到搜索栏

Question

I would like to wait for javascript hide function until my searches are done so that I could make further searches from thereon.

Whenever I make a search then if I press enter, all of sudden my search bar is in hidden state.

For better visualization and understanding, just follow the screen-shot as below;

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;
}

Any suggestions are most welcome.

Thank you in advance.

Answer 1

Actually I got it working after implementing the search through Ajax as it is dynamically changing the data without reloading the page and without hiding the search bar until the searches are done and it only hides when the page is refreshed or reloaded. That's it....