Click unique sur un bouton jQueryUI dialog

Il y a de ces bogues que les développeurs ont tendance à oublier car ils connaissent suffisamment bien la mécanique du système pour savoir comment l'utiliser et contourner les comportements indésirables. Pour l'utilisateur normal, la façon d'utiliser un système est généralement plus intuitive et fait ressortir les surprises malgré lui. Il peut avoir tendance à recommencer à nouveau s'il ne voit pas d'indicateur ou de changement visuel en guise d'indice de progression. D'autres sont adeptes du double-clic sur les contrôles pour être certains que le système ait bien saisi ce qu'il doit faire. Si ça ne fonctionne pas, pèse plus fort! Pour l'action qui en résulte, on a qu'à penser à l'envoi répété d'un courriel ou pire, un paiement qui passe en double. C'est ce qui est arrivé dans un projet utilisant le composant Dialog de jQueryUI.

L'idéal est de pouvoir détecter le doublon d'appel côté serveur mais parfois une contrainte nous en empêche. Une solution simple et efficace est de modifier l'interface utilisateur et de restreindre la possibilité de cliquer sur les boutons d'action, en les désactivant ou en les cachant.

Ici, chaque fois qu'on clique sur le bouton "Accepter",  une requête Ajax se fait sur le serveur et du code est exécuté. D'ordinaire, il aurait dû s'exécuter une seule fois mais comme la requête Ajax doit attendre la réponse du serveur qui vient plus ou moins vite selon sa charge de travail, les utilisateurs n'ont pas d'indicateur visuel pour indiquer que le processus est en cours.

Comment solutionner ce problème ?

Dès qu'un bouton d'action du dialogue est cliqué, on peut désactiver tous les boutons à l'intérieur. Par cette contrainte, il n'est plus possible de cliquer à nouveau dessus et lancer par erreur d'autres requêtes vers le serveur. Par contre, le thème CSS de jQueryUI fait que l'apparence ne change pas. L'ajout d'une classe pour griser les boutons pourrait s'avérer suffisant. Dans ma solution, j'ai préféré cacher les boutons et remplacer le contenu du dialogue par un GIF animé montrant une progression de chargement accompagné d'un message indiquant de patienter.


Code d'exemple épuré pour reproduire la problématique

Inclusion de jQueryUI et ses dépendances

<link type="text/css" rel="stylesheet" href="/js/jquery-ui-1.9.2.custom/css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />

<script type="text/javascript" src="/js/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>

Le code HTML

<h1>jQueryUI dialog</h1>

<p><input type="button" id="btnOpenDialog" value="Ouvrir le dialogue" /></p>

<div id="divDialog" title="Confirmation" style="display:none;">
    Faites un choix
</div>

JavaScript 

var dialogConfig =
{
    autoOpen: false,
    modal: true,
    resizable: true,
    draggable: true,
    buttons: {
        'Accepter': function(){
            // closure
            var dialogContainer = $('#divDialog').parent();

            // chercher ces classes à l'intérieur du HTML de dialogContainer
            $('.ui-dialog-content, .ui-dialog-buttonpane button', dialogContainer).hide();
   
            // Si vous préférez désactiver les boutons plutôt que les cacher
            // $('.ui-dialog-content, .ui-dialog-buttonpane button', dialogContainer).attr('disabled','disabled');
  
            $('div.ui-dialog-buttonpane', dialogContainer)
                .css('text-align', 'center')
                .append( $('')
                .attr({'src':'/images/ajax-loader.gif'}) )
                .append(' ' + ' Veuillez patienter...');

            var theDialog = this;

            $.ajax({
                url: 'ajax/long-process.php',
                success: function(data){
                    $(theDialog).dialog('close');
                }
            });

        },
        'Refuser': function(){
            $(this).dialog('close');
        }
    },
    close: function(){
        // réinitialisation du dialogue à son état d'origine
        $('#divDialog').parent().html(dialogHtml);
        $('#divDialog').dialog(dialogConfig);
    }
};

var dialogHtml = null;

$(document).ready(
    function(){
        dialogHtml = $('#divDialog').parent().html();

        $('#divDialog').dialog(dialogConfig);

        $('#btnOpenDialog').click(
            function(){
                $('#divDialog').dialog('open');
            }
        );
    }
);

Comme le code JavaScript altère le contenu du dialogue généré par jQueryUI, il perdra son état initial lors d'une réouverture éventuelle. C'est pourquoi lors du chargement de la page, le balisage (markup) HTML initial est conservé dans la variable dialogHtml avant d'être transformé par jQuery pour pouvoir être réinitialisé au moment de fermer la boîte de dialogue.

Sinon, la clé de la solution réside dans l'inspection du code HTML généré par le contrôle Dialog. C'est seulement en regardant le HTML généré qu'on peut découvrir le nom des classes utilisées à l'interne par jQueryUI et les utiliser dans un sélecteur CSS pour altérer le DOM. À noter qu'on doit référer au contenur parent ajouté par jQueryUI pour englober le DIV utilisé pour générer le dialogue et lui donner son look.

Finalement, pour ceux qui désirent reproduire cet exemple, voici tout ce que long-process.php contient pour simuler une exécution plus lente côté serveur:

sleep(3);
echo 'OK';