10.1 — Data API vs API programmatique

⏱️ TL;DR — Deux manières d’activer un composant JS. La Data API : des attributs data-bs-toggle / data-bs-target déclenchent tout, sans écrire de JS. L’API programmatique : vous instanciez le composant (new bootstrap.Modal(el)) et appelez ses méthodes (.show(), .hide(), .toggle(), .dispose()). Choisissez selon que l’interaction est déclarative ou pilotée par votre code.

🎯 Objectifs

• Déclencher un composant par data-attributes.
• L’instancier et le contrôler en JS.
• Récupérer une instance existante.

Data API (déclaratif)

<button data-bs-toggle="modal" data-bs-target="#m">Ouvrir</button>
<div class="modal" id="m">…</div>

Aucune ligne de JS : Bootstrap écoute les clics sur les [data-bs-toggle] et agit. Idéal pour les cas simples.

API programmatique (impératif)

// créer une instance
const modalEl = document.getElementById('m')
const modal = new bootstrap.Modal(modalEl, { backdrop: 'static' })
 
// piloter
modal.show()
modal.hide()
modal.toggle()
 
// nettoyer (important en SPA)
modal.dispose()

Utile quand votre code décide (après un fetch réussi, une validation, un timer…).

Récupérer une instance existante

// renvoie l'instance déjà créée, ou null
const instance = bootstrap.Modal.getInstance(modalEl)
 
// renvoie l'instance, ou en crée une
const instance2 = bootstrap.Modal.getOrCreateInstance(modalEl)

Évite de créer deux instances sur le même élément (source de bugs).

Options

Les options se passent à la construction, ou en data-bs-* :

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false">…</div>

équivaut à new bootstrap.Modal(el, { backdrop: 'static', keyboard: false }).

⚠️ Piège — Instancier deux fois le même élément (une fois par la Data API au clic, une fois par votre new bootstrap.Modal) crée des comportements en double. Utilisez getOrCreateInstance pour récupérer l’instance existante.

💡 Pour un dev React — La Data API attache des écouteurs au chargement du DOM ; en React, les éléments apparaissent/disparaissent dynamiquement, ce qui casse ce modèle. Préférez l’API programmatique dans un useEffect (avec dispose() au cleanup), ou carrément react-bootstrap. Voir Partie 11.

✏️ Exercices

1. Ouvrir une modale après un fetch réussi.

const modal = bootstrap.Modal.getOrCreateInstance('#m')
await fetch(...); modal.show()

2. Éviter de créer deux instances sur le même élément.

🧠 Quiz de révision

Chapitre suivant : 10.2 — Les événements