Afficher un message toast, une fois la requête validée.

a marqué ce sujet comme résolu.

Bonjour à tous !

Je vais essayer d’être le plus clair possible pour esperer avoir un coup de mains, car là je bloque depuis plusieurs heures et ça me rend foufou :P

Donc, j’ai un site qui récupére les films & séries via l’API de TMDB, je stock les fiches en cache. J’ai ajouté un bouton < Like > pour aimer une fiche, et donc là suivre et suivre ses mises à jours.

Voici le code :

Le lien du bouton < Like >

<a id="save" href="?type='.$type.'&id='.$id.'&save" title="'.(!in_save_list($id) ? 'Retirer de la liste' : 'Ajouter à la liste').'"><i class="fa-'.(!in_save_list($id) ? 'solid' : 'regular').' fa-heart fa-3x"></i></a>

Le code javascript qui permet d’appeler le PHP et gérer en base de données si j’ajoute en favoris ou je le retire

$(function () {
	const el = document.querySelector("#save");

	el.addEventListener('click', addToSavelist, false);

	function addToSavelist(event) {
		event.preventDefault();

		let saveListLink = event.currentTarget;
		let link = saveListLink.href;

		fetch(link)
		.then(res => res.json())
		.then(function(res) {
			let saveListIcon = saveListLink.firstElementChild;

			if (res.isInWatchlist) {
				saveListIcon.classList.remove('fa-regular');
				saveListIcon.classList.add('fa-solid');
				alert('ok');
			} else {
				saveListIcon.classList.remove('fa-solid');
				saveListIcon.classList.add('fa-regular');
			}
		});
	}
});

Le PHP qui permet d’ajouter en base de données l’ID de la fiche, l’heure, etc.

<?php
header('Content-Type: application/json');

/*
	La fonction in_save_list() permet simplement d’effectuer les vérifications standards; je renforcerai la sécurité, avec un jeton CRLF par exemple, etc.
*/

if(in_save_list($id))
{
	$date_add = \gmdate(\DATE_ISO8601);
	$type_bdd = ($type == 'movie') ? 1 : 0;

	$stmt = $db->prepare("INSERT INTO tmdb_save (date_add, type, id_fiche) VALUES (:date_add, :type, :id_fiche)");

	$stmt->bindParam(':date_add',	$date_add,	PDO::PARAM_STR);
	$stmt->bindParam(':type',	$type_bdd,	PDO::PARAM_INT);
	$stmt->bindParam(':id_fiche',	$id,		PDO::PARAM_INT);

	$stmt->execute();

	echo json_encode(['isInWatchlist' => true,]);
}

elseif(!in_save_list($id))
{
	$stmt = $db->prepare('DELETE FROM tmdb_save WHERE id_fiche = :id_fiche');
	$stmt->bindValue(':id_fiche', $id);
	$stmt->execute();

	echo json_encode(['isInWatchlist' => false,]);
}

else
	echo json_encode(['isInWatchlist' => 'erreur',]);
?>

Lorsque je clique sur le bouton like, j’arrive à afficher une alert() javascript, mais j’aimerai ajouter un tost bootstrap.

Voici le HTML :

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-header">
		<img src="..." class="rounded me-2" alt="...">
		<strong class="me-auto">Bootstrap</strong>
		<small>11 mins ago</small>
		<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
	</div>
	<div class="toast-body">
		Hello, world! This is a toast message.
	</div>
</div>

Voilà, donc comment activer ce fichu toast ? :D

Si vous avez besoin de plus détails n’hésitez pas.

+0 -0

Hello !

Il y a plusieurs méthodes pour ça :

  1. soit tu prépares le toast dans le HTML en le cachant et tu l’affiches juste avec ton JS
  2. soit tu l’injectes complètement en JS quand tu en as besoin

Tu peux éventuellement utiliser un élément <template> pour contenir le HMTL qu’il te faut et le dupliquer à volonté.

Tu peux aussi regarder du côté des WebComponents pour te faire un élément personnalisé (mais qui demande un peu plus de JS)

Le code JS de la documentation ne marche pas chez toi ?

ache

Surement que si, mais je n’arrive pas à le faire fonctionner j’dois pas etre doué

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte