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?
starter-template? You have duplicate IDs. IDs have to be unique. Remove one of yourdisappearing_divids.