'Showing a loader while waiting for server-side code with AJAX [duplicate]

My problem was described in Showing a loader while waiting for server-side code (without a blank page).

To summarize briefly, I want to show the loader before completing server-side jobs: [Loader] -> [Target page]. However, HTML was loaded after the server-side jobs, so I could see the loader after a blank page: [Blank page] -> [Loader] -> [Target page].

Very thankfully someone recommended using AJAX. However, I am not familiar with AJAX system, so I searched related information and wrote codes as below.

HTML code (sample.html),

<body>
    <!-- loading image  -->
    <div id="loading">
        <img id="loading-image" src="/img/loading.gif" alt="Loading..."/>
    </div>
    
    <section id="content">
        <span th:text="${data_list}"></span>
    </section>

    <script type="text/javascript">
        var $loading = $('#loading').hide();
        $(document)
          .ajaxStart(function () {
            $loading.show();
          })
          .ajaxStop(function () {
            $loading.hide();
          });
         
        $.ajax({
            url: "/dataSend",
            type:"POST",
        }).done(function (fragment) {
            
        });
    </script>
</body>

And Java code (Controller.java).

@RequestMapping( method = RequestMethod.GET, path = "sample")
String loadSample(Model model) {
    return "sample";
}

@RequestMapping(method = RequestMethod.POST, value = "/dataSend")
String sendData(Model model) {
    model.addAttribute("data_list", service.getAllData());
    return "sample :: #content";
}

I'm stuck now. Could anyone help me fix the code, or give me some related examples?

javascriptjavaajaxspring-bootthymeleaf


Solution 1:[1]

Something like this would solve your issue:

<script type="text/javascript">
    var $loading = $('#loading').show();
     
    $.ajax({
        url: "/dataSend",
        type:"POST",
    }).done(function(fragment) {
        $('#loading').hide();
    });
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 burakk

Related Questions