Discussion :

[dubitoph]

Bonjour,

Dans un formulaire d'encodage d'une anonce, je donne la possibilité d'uploader des photos. Comme leur nombre est indéterminé, via un bouton "Ajouter une photo" l'utilisateur peut ajouter "à la volée" un nouveau champ d'upload (champ de type "file") :

Dans mon template :

Code :

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

1
2
 
<ul class= "photos" data-prototype= " {{ form_widget ( formAdvert.photos.vars.prototype )| e ( 'html_attr' ) }} " >

Dans mon fichier javascript :

Code :

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

1
2
3
4
 
function addPhotoForm( collectionHolderPhotos , $newLinkLi ) {
...
}

Or, afin de pouvoir afficher un preview de la photo avant qu'elle ne soit enregistrée, j'ai du javascript lié aux champs de type file de mon document :

Code :

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

1
2
3
4
 
$('input[type="file"]').change(function() {
...
}

Pour un champ qui existe lors de la construction initiale du template, tout va bien, le javascript est bien exécuté lorsque le champ file est modifié. Par contre, s'il s'agit d'un champ créé via le javascript, le javascript lié au champ file n'est pas exécuté. En d'autres termes, le preview de la photo ne s'effectue alors pas.

Quelqu'un aurait une idée quant à la méthode pour résoudre ceci?

Merci d'avance pour votre aide!

[SpaceFrog]

C'est un classique JQUERY

il faut passer par l'attribution de l'event par délégation avec on à partir d'un parent. avec 3 paramètres (event, element cible, fonction)

Code :

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

1
2
 
$([selecteurParent]).on( 'change', 'input[type="file"]',function() {

[dubitoph]

Super, merci, ça a résolu mon problème!