Mon inputFile ne fonctionne qu'une seule fois

**MrBiscotto** · 09/08/2019, 10h40

Bonjour,
Je développe une petite application web en java ee (JSF).
Dans celle-ci, il est possible d'ajouter une image via un inputFile, cependant comme dit dans le titre lorsque j'ai ajouté une photo, mon inputFile ne veut plus s'ouvrir :/

Voici le code xHtml :

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
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:b="http://bootsfaces.net/ui"
	xmlns:p="http://primefaces.org/ui">
 
<head>
	<script>
	$(document).ready(function() {
		$("#test\\:image").click(function () {
			console.log('ah');
		    $("#test\\:input").trigger('click');
		});
	});
	</script>
 
</h:head>
 
            <h:form id="test" enctype="multipart/form-data">
				<h:inputFile id="input" style="display:none" value="#{etudiantController.image}">
					<f:passThroughAttribute name="accept" value="image/png"/>
					<f:ajax event="change" listener="#{etudiantController.imageUpload()}" execute="@form" render="@form"/>
				</h:inputFile>
				 <h:graphicImage id="image" value="#{etudiantController.path}" />
				     <p:tooltip id="toolTipGrow" for="image" value="Taille recommandée 240px sur 240px"
               showEffect="clip" hideEffect="explode" position="left" trackMouse="true"/>
			</h:form>
 
</html>

Au clic de mon image, mon inputFile s'ouvre (javaScript).
Comme vous pouvez le constater j'ai un form contenant mon inputFile et ma graphicImage. Lorsque je change d'image, je fais appel à ajax qui s'occupe de mettre à jour l'image. A la première validation, tout se passe correctement l'image est bien affichée, cependant pour de nouveau changer l'image, il faut recharger la page :/
Je pense que mon problème vient de cette ligne

Code :

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

execute="@form" render="@form"

Mais je ne sais vraiment pas par quoi je peux la remplacer.
Merci d'avance

**VirgApps** · 07/10/2019, 13h51

Bonjour,

est ce que tu repasses bien tout de même par ta fonction Javascript ?

Dans tous les cas, tu as moyen de faire beaucoup plus simple pour appeler ton inputFile. Il suffit de l’appeler via un label qui sera ton image.
Par exemple :

Code :

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

1
2
3
4
5
6
7
<label>
    <h:inputFile id="input" style="display:none" value="#{etudiantController.image}">
        <f:passThroughAttribute name="accept" value="image/png"/>
        <f:ajax event="change" listener="#{etudiantController.imageUpload()}" execute="@form" render="@form"/>
    </h:inputFile>
    <h:graphicImage id="image" value="#{etudiantController.path}" />
</label>

Et supprimer le code javascript. Ainsi tu cliquera sur le label (en réalité ton image) qui appellera son input associé (car embarqué dans le label), pas besoin de javascript, c'est du pur HTML, l'inputFile sera forcément appelé.
Ça ne répond pas directement à ton problème mais cela le simplifie.

Mon inputFile ne fonctionne qu'une seule fois

JSF Java

Discussions similaires

Partager

Partager