Astuce concernant le rafraîchissement du contenu des pages avec utilisation d’AJAX en exemple

Parmi les listes de courriels que je suis, Accesstech, une question a attiré mon attention et j’ai pensé partager ici la réponse que j’ai donnée avec un exemple en appui.

Concernant le rafraîchissement du contenu des pages avec utilisation d’AJAX, a-t-on trouvé une solution pour
qu’un lecteur d’écran le détecte et retourne l’information à l’utilisateur ?

Si non, quelles solutions alternatives avez-vous trouvées ( en dehors de recharger la page intégralement) ?

Ce que j’ai répondu

Je ne suis pas expert, mais je pense que ce qui arrive et modifie le DOM de façon asynchrone en regard de l’accessibilité, demande au minimum:

1. Faire une ecriture en creeant les elements DOM, puis les inserer

Avec jQuery, par exemple, il est possible de créer un élément DOM de cette façon. Mais attention, l’élément existe dans le document qu’au moment de son insertion via la commande element.append().

<script>
// dom ready...
var newNode = JQuery('<div id=patate>Allo</div>');
</script>

2. Assurer de donner le focus sur le nouvel element inséré

Une fois l’élément construit, il est possible d’ajouter des attributs et évidemment de l’introduire, comme suit:

<script>
// ...
newNode.appendTo('body');
newNode.trigger('focus');
// ...
</script>

Ici, l’élément est inséré à l’intérieur du body, puis un événement focus est appelé. Notez ici que lancer un événement de cette façon peut être fait pour a peu près n’importe quel type d’événement, on peut même créer nos propres événements

3. Bonus: Faire la muse a jour de façon Asynchrone avec jQuery 1.7+ avec le concept de ‘promise’:

Étant donné la nature d’AJAX; dans le sens que la resource demandée n’est pas nécessairement disponible à l’exact moment où la requête est faite. jQuery a instauré un concept qui permet de travailler avec l’objet demandé, et agir au moment de son arrivée: promise.

Dans ce sens, il est maintenant recommandé d’utiliser un callback et le déclarer a la fin de l’action ajax, comme suit:

<script>
var promiseCallback = function(data){   jQuery('#patate').replaceWith(jQuery(data)).trigger('focus');   };
// assumant que c'est du html reçu de /allo.html
var configObj ={dataType: 'html'};
jQuery.ajax('/allo.html', configObj).done( promiseCallback );
</script>

Finalement

Ce qui est souvent oublié c’est que $.ajax.done() est executé après avoir reçu ses donnees.

De cette facon, le refraichissement se fait quand elle est prete et le focus suivra.

Par-contre il y a des precautions a prendre: Assurez-vous que ce code est executé apres un action de l’utilisateur et non pas n’importe quand car l’evenement risque de deplacer le focus du lecteur d’ecran et perdre l’utilisateur.

Espérant que j’ai connecté quelques fils :)

Creating and using Javascript events while combining events on two separates behaviors

I discovered something that chocked me: Did you know that the ‘click’ event is only a string and you can create any event name you may want? Here is an experimentation example.

During web development, it often happens you want to attach events handler on something in your page. A common usage could be you want to flip a plus sign to a minus sign when you click on a button.

<a href="/some/url/324" class="flip-icon" data-target="#generated-324"><i class="icon-plus"></i></a>

Later in a script you may be compelled to do something similar to the following (assuming you are using jQuery):

$(document).ready(function(){
// Rest of the document in document.ready
// DO NOT USE AS-IS, SEE LAST EXAMPLE

    $('.flip-icon.).click(function(event){  
        event.preventDefault(); 
        var clicked = $(this);
        var flipElement = clicked.find('i');
        if (flipElement.hasClass('icon-plus')) {
            flipElement.removeClass('icon-plus').addClass('icon-minus');
        } else {
            flipElement.removeClass('icon-minus').addClass('icon-plus');
        }
    });
});

But what happens if you want to add other events such as, for example, activating an accordion. You may end up with duplicating events and get some collisions.

Did you know that the ‘click’ event is only a string and you can create any event name you may want?

To describe what I am refering to, I have a add an other behavior that will also, in part, require the previous example.

Imagine we have an accordion managed already grabbing the element’s a[data-target] click event handler.

$(document).ready(function(){
// Rest of the document in document.ready
// DO NOT USE AS-IS, SEE LAST EXAMPLE

    $('a[data-target]').click(function(event){
        // do the accordion stuff
    });
});

But, what if for some reason, our page has to reload some sections and our event handler managing the a[data-target] click gets lost

Instead, of creating a click specific event handler (what if we want to change) and be potentially lost with the element to attach event onto.

You can use jQuery’s on method and attach an event to the <body>, a safe element that every document has.

Things to note about the on method:

  • First parameter is an event name, can be ANYTHING (yes, you read it), space separated
  • Second element is on what to listen, can be null
  • a Function object to handle the event

Also, there is nice thing about bubbling.

When an event happens, the event crawls the DOM up to the body (called ‘catch’) then gets back to the triggerer element (called ‘bubbling’) and firing in that order all event handlers.

Knowing all of this now, instead of attaching a single event type handler to a specific element, let’s take advantage of our new knowledge.

'use strict';
$(document).ready(function(){
// Rest of your document

    // Look at the 'flip-my-icon-event', we just made-up that one. See below.
    $('body').on('click flip-my-icon-event', '.flip-icon', function(){
/* Look here     *************************                                       */
        // Let's put it also in a self-executing anonymous, to isolate scope
        (function(triggered){

            // Same as earlier.
            var clicked = $(this);
            var flipElement = clicked.find('i');
            if (flipElement.hasClass('icon-plus')) {
                flipElement.removeClass('icon-plus').addClass('icon-minus');
            } else {
                flipElement.removeClass('icon-minus').addClass('icon-plus');
            }
            // End same as earlier

        })($(this)); // this fires the self-executing.
    });

    $('body').on('click', 'a[data-target]', function(event){
        event.preventDefault();

        // do the accordion stuff
        var collapsible = $($(this).attr('data-target'));
        if (typeof collapsible.attr('data-collapsible') === 'undefined')  {
            collapsible
                .collapse()
                .attr('data-collapsible', 'applied')
                .on('show', function(){
                    jQuery(this).parent().removeClass('is-hidden');
                })
                .on('hide', function(){
                    jQuery(this).parent().addClass('is-hidden');
                });
        // End do the accordion stuff

        jQuery(this).trigger('click').trigger('flip-my-icon-event');
/* Look here                         *******************************        */
        }
    });
});

The following works, because of the following trigger html pattern, as from the begining:

<a href="/some/url/324" class="flip-icon" data-target="#generated-324"><i class="icon-plus"></i></a>

And of the following:

  • We have an icon for .icon-plus and .icon-minus class names
  • The a[data-target] attribute has ALSO a .flip-icon class name
  • The a[data-target] triggers our made-up flip-my-icon-event event to an element that also matches (see the two ‘look here’ comments)

References

Réalisation (jamais publiée) du site de Savon des Cantons [2005]

Savon des cantons : logo Il s’agit d’une de mes dernières réalisation avant un an et demi sans produire de sites web sous la tutelle de Inexis Solution web Inc.

Avec le recul, j’ai réalisé que ce site m’a appris une bonne leçon: Savoir les conditions et les deal-breakers possibles avant de commencer a produire quoi que ce soit!. C’est pour cette raison que j’avait arrêté Inexis Solution web: Je ne pouvait plus travailler seul.

Continue reading “Réalisation (jamais publiée) du site de Savon des Cantons [2005]”

Réalisation du site Musé des Beaux Arts de Sherbrooke [2005]

Extrait de la page d'Accueil

 

Dans la lignée de vouloir apporter a mon blogue l’accumulation de mes réalisations j’ai pensé vous montrer mon travail avec le Musé des Beaux Arts de Sherbrooke. J’ai fait ce site en 2005. Encore ici je n’ai pas conservé de rapport sur la durée du travail que j’ai investi dans ce mandat car à l’époque je ne faisait pas de suivi là dessus.

Détails
Graphisme Tatou Communication visuelle
Date de réalisation Septembre 2005
Nom de domaine mbas.qc.ca

Continue reading “Réalisation du site Musé des Beaux Arts de Sherbrooke [2005]”

Réalisation de l’Interface logiciel Beebox [2007]

Rapports de séquence
Rapports de séquence

J’ai eu la chance de travailler sur l’interface d’un logiciel fait en Java avec Struts.

A quoi sert le logiciel

Ce logiciel sert pour automatiser les déploiements des versions selon l’idéologie du Développement en mode «Intégration continue». Bref il est utilisé pour créer des suites d’actions programmables qui peuvent être répétées au besoin.

Histoire brève

Au début le logiciel s’appelait TSCM et était utilisé chez quelques clients dont Téléfilm Canada et la Banque Nationale du Canada dans un département que je ne mentionnerai pas. Dans le but de le rendre plus grand public nous avons changé le nom et remonté l’image.

Continue reading “Réalisation de l’Interface logiciel Beebox [2007]”

Réalisation du site de Remises Réal Lamontagne [2004]

Page fabriquez votre remise
Page fabriquez votre remise

Parmi les sites que j’ai fait dans les dernières années. Celui de Remises Réal Lamontagne était parmi les plus agréables a travailler. L’équipe de IMACOM (sherbrooke) avait fait un très beau travail. Chacun avait sa tâche de fait et mon travail consistait qu’a intégrer en html valide le code.

C’est aussi l’un des derniers sites que j’ai fait en utilisant Macromedia Dreamweaver.

Continue reading “Réalisation du site de Remises Réal Lamontagne [2004]”

Réalisation du site de Câble Axion [2006]

Voir la consommation modem
Voir la consommation modem

Dans la série de billets sur mes réalisations j’aimerai donner mon avis sur le travail que j’ai fait pour Câble Axion.

Contexte

J’ai travaillé là pendant un an entre Octobre (environ) 2005 et Novembre 2006. Mon emploi était dit comme étant programmeur d’applications pour améliorer les processus de travail de l’entreprise du point de vue support technique pour les départements de services Internet et télé numérique.

J’ai donc travaillé sur les bases de données accès en Microsoft Access puis ensuite j’ai fait un travail d’intégration sur le site corporatif (ce 30 octobre 2009, c’est encore mon travail qui est aparent pour une bonne partie).
Continue reading “Réalisation du site de Câble Axion [2006]”