Discussion :

[erox44]

Hello,

je soumet mon formulaire côté client comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
		//callback handler for form submit
		$("form[name=formCartoDonnees]").submit(function(e)
		{
		    var postData = $(this).serializeArray();
		    var formURL = $(this).attr("action");
 
			$("#recapContainer").append("<div id=loading>&nbsp;</div>")
			$("#loading").css("width",$("#recapContainer").css("width"));
			$("#loading").css("height",parseInt($("#recapContainer").css("height")+5));
 
		    $.ajax(
		    {
		        url : formURL,
		        type: "POST",
		        data : postData,
		        success:function(data, textStatus, jqXHR)
		        {
		            //data: return data from server
		        	$("#loading").hide();
		        	//window.open(data);
		        },
		        error: function(jqXHR, textStatus, errorThrown)
		        {
		            //if fails     
		        }
		    });
		    e.preventDefault(); //STOP default action
		});

Côté servlet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
35
36
37
				LOGGER.info(request.getParameter("dateDebut"));
				LOGGER.info(request.getParameter("dateFin"));
				LOGGER.info(request.getParameter("typeRecherche"));
				LOGGER.info(request.getParameter("typeDownload"));
 
				String typeGeneration = request.getParameter("typeDownload");
				String strDateFin = request.getParameter("dateFin");
				String strDateDebut = request.getParameter("dateDebut");
 
				String valeurs = request.getParameter("listeValeurs");
				String[] listeValeurs = valeurs.split(",");
 
				// lancement generation
				Cartographie carto = new Cartographie();
				String nomZipSortie = carto.executer(typeGeneration, strDateDebut, strDateFin, listeValeurs, request.getParameter("typeRecherche"));
 
				File file = new File(nomZipSortie);
 
				// construction de la reponse a partir du zip
				if(file.exists()){
 
					byte[] buf = new byte[1024];
					response.setContentType("application/zip");
					response.setHeader("Cache-Control", "cache");
					response.setHeader("Pragma", "cache");
					response.setHeader("Content-disposition",
							"attachment;filename=\"" + nomZipSortie.replaceAll("sortie/", "") + "\"");
					response.setContentLength((int) file.length());
					FileInputStream in = new FileInputStream(nomZipSortie);
					OutputStream out = response.getOutputStream();
					int count = 0;
					while ((count = in.read(buf)) >= 0) {
						out.write(buf, 0, count);
					}
					in.close();
					out.close();
				}

Ce que je souhaite c'est que lorsque je soumet mon form, avoir mon image "loading" le temps du traitemet côté serveur puis une fois fini, on cache le loading et on affiche la fenetre de téléchargement de mon zip.


C'est possible de faire ça?


EDIT:
mon but étant, su mon ihm, je soumet mon form, j'ai un zouli loader, et une fois que mon fichier a été généré côté servlet et renvoyé coté client, je cache le loader et j'affiche la popup de téléchargement.

Car actuellement, lorsque je soumet mon form, la servlet génère un fichier zip et le renvoie, mais j'ai pas de loader, donc si mon traitement dure longtemps, niveau ergonomie, pas top.

Mais à priori d'après ce que j'ai vu , c'est pas faisable en ajax.

[erox44]

Résolu en utilisant la librairie Jquery.fileDownload :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
							// ouverture d'une popup de type "Loader" le temps de la generation du zip via Ajax
						    $.fileDownload($("form").attr("action"), {
						        preparingMessageHtml: "<img src='css/images/loading.gif' /> Génération de l'archive en cours ...",
						        failMessageHtml: "Erreur",
						        httpMethod: "POST",
						        dialogOptions : { position: { my: "center", at: "center", of: $("#bilan") } ,modal: true, dialogClass: "loadingPopup"},
						        data: $("form").serialize(),
						        successCallback: function(){
 
						        	$(".loadingPopup").hide();
						        	$("#bilan").dialog("close");
 
						        	$("input[name=dateDebut]").val("");
						        	$("input[name=dateFin]").val("");
						        	$("#listes input:checked").each( function(){
						        		$(this).attr("checked",false);
						        	});
						        }
						    });

Et côté servlet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
				File file = new File(nomZipSortie);
 
				// construction de la reponse a partir du zip
				if (file.exists()) {
 
					byte[] buf = new byte[1024];
					response.setContentType("application/zip");
					response.setHeader("Cache-Control", "cache");
					response.setHeader("Pragma", "cache");
					// obligatoire - pour le plugin jquery.fileDownload
					Cookie cook = new Cookie("fileDownload","true");
					cook.setPath("/");
					response.addCookie(cook);
					response.setHeader(
							"Content-disposition",
							"attachment;filename=\""
									+ nomZipSortie.replaceAll("sortie/", "")
									+ "\"");
					response.setContentLength((int) file.length());
					FileInputStream in = new FileInputStream(nomZipSortie);
					OutputStream out = response.getOutputStream();
					int count = 0;
					while ((count = in.read(buf)) >= 0) {
						out.write(buf, 0, count);
					}
					in.close();
					out.close();
				}