Table des matières

Formation PUB040 : JavaScript et autres bibliothèques côté client, 2020 ♦ jQuery.ajax()

9.4 Modifier une page Web après un appel AJAX (manipulation du DOM)

Prenons le cas d'une page Web qui affiche une liste de conseillers tirées de la base de données.

Au bas de la la liste, sur la même page Web, un formulaire permet aux personnes autorisées de saisir de nouvelles données à enregistrer.

On peut également supprimer un conseiller à l'aide d'un bouton situé à côté de sa fiche dans la liste.

Il s'agit d'un parfait scénario pour utiliser AJAX et ainsi améliorer l'expérience utilisateur.

Liste de conseillers

Dans ce scénario, tous les traitements se dérouleront sans postback.

Un clic sur le bouton d'enregistrement du formulaire d'ajout permet d'effectuer l'enregistrement dans la base de données à l'aide d'AJAX. Afin de monter les données nouvellement ajoutées, le code JavaScript s'occupera d'ajouter les nouvelles informations à l'écran au bas de la liste à l'aide de jQuery (.append()).

Et en cas de suppression, l'appel AJAX se charge de supprimer le conseiller de la base de données puis les données du conseiller sont retirées de la liste à l'aide de jQuery (.remove()).

Lors d'un ajout ou d'une modification, on retrouve donc les deux mêmes étapes :

Exécuter du code PHP via AJAX afin d'ajuster la base de données.
Effectuer des manipulations du DOM afin d'ajuster les balises HTML telles qu'elles auraient été générées lors du postback si on n'avait pas utilisé AJAX.

Puisqu'un appel AJAX est asynchrone (le premier A signifie Asynchronous), il n'est jamais certain que le traitement sera terminé lorsque le navigateur sera rendu à exécuter la ligne JavaScript qui suit immédiatement l'appel AJAX. C'est pourquoi les manipulations du DOM doivent être exécutées dans le .done() de l'appel AJAX.

Voici un exemple des manipulations du DOM à effectuer. Supposons que les balises HTML de la liste de conseillers ont la structure suivante :

HTML

<ul>

<li>

<h3>Alex Beaudoin</h3>

</div>

Pellentesque lacinia tortor ut arcu tristique tristique sit amet vel urna. Duis laoreet diam vel convallis varius. Curabitur nulla arcu, sagittis ac vehicula vel, sodales vulputate turpis. Aliquam mattis sapien sed tincidunt luctus. Nulla turpis lorem, eleifend vestibulum iaculis nec, consequat iaculis tortor. Donec magna dolor, imperdiet eu venenatis et, pulvinar aliquet tellus.</span>

</div>

</div>

</li>

<li>

<h3>Yves Camiré</h3>

</div>

Sed pulvinar nec orci vehicula condimentum. Donec ut varius purus. Mauris nec hendrerit orci, et facilisis urna. Nulla facilisis orci quis odio convallis consequat. Duis ac turpis arcu. Donec vitae imperdiet quam. Aenean dictum at turpis id condimentum. Maecenas in sollicitudin nulla, eu porttitor nulla. Donec bibendum, nibh eget posuere mollis, tortor tellus ultricies mauris, in volutpat lacus tellus vitae tellus. Fusce quis facilisis tortor.

</div>

</div>

</li>

<li>

<h3>Axelle Poulin</h3>

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere tortor at felis sollicitudin, at rhoncus ipsum viverra. Suspendisse vitae lobortis est. Nunc sed feugiat mauris. Quisque vel dapibus ligula. Ut pharetra nulla quis nibh lobortis lacinia. Phasellus vitae congue justo. Sed ut molestie felis. In ut tincidunt lacus. Duis vitae tempor augue.

</div>

</div>

</li>

</ul>

</div>

Nous souhaitons ajouter la fiche d'un conseiller à la fin de la liste. Les manipulations du DOM suivantes permettront d'obtenir le résultat escompté. Il suffit alors de remplacer les points de suspension par les valeurs saisies dans le formulaire.

jQuery

var $formulaire = $(this).parents("form:first");

var donneesFormulaire = $formulaire.serialize();

var actionFormulaire = $formulaire.attr('action');

$.ajax({

type: "POST",

url: actionFormulaire,

dataType: "json",

data: donneesFormulaire

})

.done(function (response, textStatus, jqXHR) {

if (response) {

// note : la génération des balises pourrait être effectuée avec un mécanisme plus sophistiqué, par exemple sous Laravel avec une vue partielle et un render()

$('#listeconseillers ul').append('<li><div class="ficheconseiller"><h3>...</h3><div class="photo"><img src="/medias/commun/usagers/..." alt="..." /></div><div class="description">...</div><div class="clear"></div></div></li>');

}

else {

afficherPopupErreur('Un problème a empêché l\'enregistrement des données.');

}

})

.fail(function (jqXHR, textStatus, errorThrown) {

...

});