I am trying to create a loading page so that a 'loading' gif shows up after pressing the search button. The gif is showing up just fine but I want everything else to disappear when this happens so just the gif shows on the page. I have read a bunch of the other topics on this type of thing and so far have:

html:

<body>
<img src="{% static 'images/333.GIF' %}" style="display: none;" id="animated-gif"/>
<div class="hover_background" id="disappearing_div">

  <div class="starter-template" id="disappearing_div">
    <h1>Heading</h1>
    <p class="lead">paragraph</p>
  </div>

  <div class="row search">
    <div class="col-sm-8 col-sm-offset-2">
     <form id="search-id" method="GET">

        <button type="submit" name="submit" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Search
        </button>
     </form>
    </div>
  </div>
</body>

Script:

    <script>
    $('#search-id').submit(function() {
    $('#animated-gif').show();
    document.body.style.background = 'white';
    document.getElementById("disappearing_div").style.display = 'none';
    });
    </script>

It seems to be working for my navbar, which I have in base.html (a separate html file that I have block/extended to this file. In base.html I have id="disappearing_div" for the navbar and this seems to work. But for the divs in the html code above, it doesn't work.

Could someone explain? I'm pretty new to this ...

Thanks!

1 Answers

0
Damian Silva On

Change the dissapearing_div ids to classes if the names must remain the same.