plusieurs modals bootstrap - ajax surle bouton supprimer
Bonjour,
Je souhaite afficher une fenêtre modal bootstrap quand on clic sur une image. Sur cette fenêtre modal il y a un bouton close et je souhaite mettre un bouton supprimer, qui fera une action ajax afin de supprimer l'image.
Voici un exemple
J'ai essayer des exemples sur le net mais cela me renvoie uniquement la dernière image affichée et non l'image sur laquelle on a cliqué.
Même en lisant la documentation, je ne trouve pas comment faire. Je sais que je manque de compétence sur le sujet. Si vous pouviez m'aider ou me donner des pistes ce serait sympas.
Je vous remercie pour votre temps.
Gravefield.
5 réponses
Bonjour Lartak,
Oui, je suis bien concsient des différences entre le client et le serveur, ce n'est pas ma question. Je sais ce que c'est l'Ajax. Mon problème ne porte pas sur la suppression de fichier mais plus sur l'évènement à écouter pour déclencher la requête.
Mon problème est que j'ai des lacunes en javascript qui fait que je ne sais pas récupérer le nom de l'image lorque l'utilisateur clique sur le bouton supprimer.
Merci pour votre aide, je vais continuer à chercher.
EDIT
Humm du coup j'y repense pour l'évènement, il suffit de faire:
<pre><code>
$( "#deleteImg" ).click(function() {
console.log("je clique sur supprimer");
});
</code></pre>
Me reste plus qu'à trouver comment récupérer le nom de l'image.
Je ne sais pas si c'est très propre comme code:
<pre><code>
$( "#deleteImg" ).click(function() {
var img = $('.img-responsive').attr('src')
console.log(img);
});
</code></pre>
Cela me donne bien le nom de l'image dans la console lorsque je clique sur le bouton "supprimer". Je vais vérifier mais c'est sur la bonne voie. Après il y a peut être plus sexy comme code je ne sais pas ^.^ .
Bonsoir,
je ne sais pas si j'ai bien compris la problèmatique mais dans ton exemple l'image ne change pas car il s'agit de la "même image" pour le navigateur.
Lorsque que tu cliques sur une image, ton code place l'image situé à http:///truc/200/300/?random dans la popup.
Tu fermes la popup et clique sur une autre image, le navigateur remplace le src par le même lien et du coup considére que l'image n'a pas changé J'ai fait un fork de ton code pour apporter de l'aléa sur le lien de l'image et l'image change bien .
Si je suis complétement à côté de ta question, c'est que j'ai rien compris à ton problème et t'invite alors à préciser ton besoin.
Cordialement
Antho
Bonsoir antho07,
Enfaite ce n'est pas l'image le problème, j'ai mis une image aléatoire, histoire de mettre une image. Dans mon code d'origine, il y a une lecture du dossier pour afficher les images, je ne savais pas quoi mettre dans l'exemple.
Sinon, c'est astucieux ce que tu as fais.
Mais ce n'est pas ce que je recherche. Je vais donc essayer de préciser.
Je souhaite effectuer une action sur le bouton supprimer. J'amerai pouvoir executer un script en ajax qui puisse récupérer le nom de l'image à supprimer et supprimer celle-ci. Le problème c'est que je ne vois pas comment faire.
J'ai rajouté ceci:
<pre><code>
$('#exampleModal').on('hidden.bs.modal', function (e) {
// est-ce que l'utilisateur à cliquer sur le bouton supprimer?
// si oui, récupérer le nom de l'image
// executer un script ajax pour supprimer l'image
console.log(button);
})
</code></pre>
Pour executer le script ajax je sais faire, mais je ne vois pas comment récupérer le nom de l'image quand l'utilisateur clic sur supprimer.
En tout cas merci pour ton aide. J'espère que je suis un peu plus précis dans mes propos, désolé ce n'est pas toujours facile à expliquer.
Bonjour.
Tu ne peux pas supprimer un fichier uniquement via de l'ajax, il te faut le faire via le serveur, par exemple :
- Tu récupéres le nom du fichier avec javascript
- Tu transmets le nom du fichier à un script PHP (par exemple)
- Le script PHP fait la suppression du fichier et renvoit des données à ton script javascript pour par exemple qu'il affiche un message à l'utilisateur
N'oublies pas qu'il y a de grosses différences entre ce qui peut être fait par le serveur et le client.