Search code examples
javascriptjqueryhtmlajaxgrails

HTML element missing after some time of using page without refresh

I am making an application in Grails(in this app I am using AJAX and jQuery) in which I want to put spinner above all page when I change user.

However, it is working perfectly for some time(aprx. 10 minutes) and after some time of using this page without refresh spinner is not appearing anymore. Reason is that HTML element containing spinner is missing.

Can someone give me a clue why is this happening?

Here is shorter version of code:

MAIN PAGE(HTML):

<div class="container">
    <div id="changeUserDiv">
        <g:render template="/changeUser"/>
    </div>

    <div>
        <div id="errorContainer"></div>
        <g:render template="myTemplate"/>
    </div>

    <div id="loadingAllPage" class="modal-background" style="display:none;">
        <i class="fa fa-5x fa-spinner fa-spin"></i>
    </div>
</div>

MAIN PAGE(JS):

$("#changeUserDiv").change(function(){
            $("#loadingAllPage").show();
            ajaxAction();
        });

myTemplate(JS):

function ajaxAction()
{
     // some code
     $.ajax({
          // some code
          success:function(data){
              $("#loadingAllPage").hide();
      });
}
Solution

  • First of all, this is not the correct way to show a loader. You should check some other way to clear this out.

    For this, the issue may be due to the content is changing after some time

    1. Other ajax call from another page with a time intervals

    2. The content of the div updated in some other way