JQuery et librairie filedownload

Bonsoir à tous,

J'ai une page web qui fait un requête http GET sur un servlet et celui-ci se connecte à une BD SQL et effectue des traitements avant de retourner un CSV.

Cela fonctionne bien mais l'utilisateur n'a rien pour lui indiquer que sa requête est en cours de traitement.

Je souhaiterais donc afficher une popup pour faire patienter l'utilisateur jusqu’à l'apparition de la fenêtre de téléchargement ou éventuellement afficher un message d'erreur (Votre requête est trop volumineuse, Votre requête ne contient pas de résultat, ...).

J'ai donc trouvé un librarie jquery.filedownload qui a l'air de réponde à ce besoin cependant je n'arrive pas à la faire fonctionner.

https://jqueryfiledownload.apphb.com/

J'ai donc fait une page HTML minime :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
    <head>       
        <title>TEST</title>           
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/plugins/jqueryLib/jquery-3.2.0.min.js"></script>
        <script type="text/javascript" src="js/plugins/jqueryLib/jquery-ui.js"></script>
        <script type="text/javascript" src="js/plugins/jqueryLib/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/plugins/jqueryLib/jquery.fileDownload.js"></script>
    </head>
    <body>
        <div class="page-content-wrap">
 
                    <script type="text/javascript">
                         $(function () {
                         $(document).on("submit", "form", function (e) {
                                $.fileDownload($(this).prop('action'), {
                                preparingMessageHtml: "We are preparing your report, please wait...",
                                failMessageHtml: "There was a problem generating your report, please try again.",
                                httpMethod: "GET",
                                data: $(this).serialize()
                                });
                                e.preventDefault(); //otherwise a normal form submit would occur
                            });}
                    </script>
 
                    <form role="form" action="http://10.132.180.191:9999/myservlet" method="get" id="requete">
                                    <div class="form-group col-md-2">
                                            <button type="submit" class="btn btn-primary dropdown-toggle"><i class="fa fa-bars"></i>TELECHARGER</button>
                                    </div>
                    </form>
        </div>                     
    </body>
</html>

et coté serveur je traite la requête comme ceci pour mes tests : au bout de 10 seconde je renvois les cookies pour fermer la popup.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    final ScheduledExecutorService executorService = Executors.newSingleThreadScheduledExecutor();
 
    executorService.scheduleAtFixedRate(new Runnable() {
        @Override
        public void run() {
            try {
                displayForDebug(response);
            } catch (IOException e) {
 
                e.printStackTrace();
            }
        }
    }, 0, 10, TimeUnit.SECONDS);
 
 
}
 
private void displayForDebug(HttpServletResponse response) throws IOException{
    response.setContentType("text/html");
    response.setCharacterEncoding( "UTF-8" );
    Cookie MonCookie = new Cookie("fileDownload", "true");
    Cookie MonCookie2 = new Cookie("Path", "/");
    response.addCookie(MonCookie);
    response.addCookie(MonCookie2);
 
}

Le problème est que rien ne se passe lors de l'envoie de la requête, elle est bien envoyé vers le serveur mais aucune popup ne s'affiche :(

Si quelqu'un a une idée car je suppose que mon code javascript coté page HTML est bugé