CODEWITHSUNDEEP
ruby-on-railsrubymodel-view-controllerviewgif
sr1
sr1

Reputation: 41

Attempting to add a loading gif while a method is running using ruby on rails UPDATED: using javascript now

I am currently trying to add a loading gif whenever a method is running as it takes a few minutes to run.

I have this in my application.js file :

function showProgress() {
  $('.content').hide();
  $('.progress').show();
}

$(document).ready(function () {
  $('.progress').hide();       
  $('.btn-primary').on('click', showProgress);
});

and in my html file (show file for my controller) I have : 

<div class="content">
...
  <%= link_to 'Run Test', runTest_path, :class => "btn-primary", :method => :get%>
...
</div>


<div class="progress">
  <%= image_tag "loading2.gif"%>
</div>

It works as intended however it only works the first time i click the button to run the method and it won't show the gif after that. Also if I don't immediately click the button that runs the method after creating the instance (as it redirects to this show page) and go to another part of the web app then the loading gif appears when I go back to this show page and will only disappear when I refresh. Any suggestions?

Upvotes: 0

Views: 807

Answers (1)

Rockwell Rice
Rockwell Rice

Reputation: 3002

As the comment says, you probably want to use javascript to do this as it ties into the events like page loading.

Here is the javascript

$(function() {
  $(document).on('ready', function() {
    $('.progress').css('display', 'none');
  });
});

In the HTML I have this. I use javascript to hide it once the page is loaded (that is the code above).

<div class="progress">
  <%= image_tag "loading2.gif"%>
</div>

In case it helps, here is the css for the loader class, you should be able to adjust this for your needs.

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1f1f1f;
  z-index: 99996;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
}

Upvotes: 2

Related Questions