Archives pour l'étiquette ajax

Ajax et infobulle

Ben voilà … nouvelle article sur l’ajax, une petite astuce pour notifier le visiteur d’événement survenue avec ajax. La plupart du temps en ajax on privilégie une zone sur l’écran, au centre, tout en haut, tout en bas.

J’expérimente depuis quelque temps déjà, une autre zone, qui est elle aussi assez souvent bien vue par l’utilisateur … a coté du pointeur de la souris :

Le pointeur de la souris est manquant … mais faut l’imaginer quoi :p

Donc voila le code :

Le CSS dont on a besoin :

#infobulle {
    background-color:white;
    border:1px solid #CCCCCC;
    font-family:Verdana,Arial;
    font-size:0.7em;
    padding:10px;
    position:fixed;
    visibility:hidden;
}

Le code Javascript :

var timeOUTaffBulle=null;
var bubble = document.getElementById("infobulle");
var cursor_padding = 5;
var nav = navigator.appName;
var ie = document.all;
var ns = document.layers;
if(!ie)
 document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = get_mouse;

function get_mouse(e){
 if(ie){
 x = event.x;
 y = event.y;
 window.status = x;
 }else{
 x = e.pageX;
 y = e.pageY;
 }

 bubble = document.getElementById("infobulle");
 bubble.style.left = x + cursor_padding+'px';
 bubble.style.top = y - document.documentElement.scrollTop + cursor_padding+'px';
}

document.onmousemove = get_mouse;

// affiche la bubble
function see_bubble(text){
 bubble.style.visibility = "visible";
 bubble.style.display = "block";
 if(timeOUTaffBulle!=null)
 bubble.innerHTML+="
"+text;
 else
 bubble.innerHTML = text;
}

function affBulle(text)
{
 see_bubble(text)
 timeOUTaffBulle=setTimeout("kill_bubble()",1800)
}

function kill_bubble(){
 bubble.style.visibility = "hidden";
 bubble.style.display = "none";
 if(timeOUTaffBulle!=null)
 {
 clearTimeout(timeOUTaffBulle);
 timeOUTaffBulle=null;
 }
}
/*FIN INFOBULLE*/

Donc voila … il suffit juste de mettre une div avec comme id « infobulle » et d’appeler la fonction : affBulle(‘Salut à vous …’);
Pour afficher une superbe infobulle à côté de votre souris.

Gérer les accents en Ajax

Un rapide article sur la gestion des accents en Ajax, avec scriptaculous (bien entendu).

Rapide rappel :

Faire une requete en GET avec scriptaculous :

new Ajax.Request('url',
{
    asynchronous:true,
    onSuccess: function(e) {
        //le traitement
    }
});

Les requetes en POST avec scriptaculous :

new Ajax.Request('url',
{
    method:'post',
    postBody:'param1='+escape(document.getElementById('val1').value)+
    '&param2='+escape(document.getElementById('val2').value),
    asynchronous:true,
    onSuccess: function(e) {
        //traitement
    }
});

Et donc pour rajouter le support des accents, il faut rajouter l’option :

encoding: ‘iso-8859-1’

Faire une requete en GET avec les accents :

new Ajax.Request('url',
{
    asynchronous:true,
    encoding: 'iso-8859-1',
    onSuccess: function(e) {
        //le traitement
    }
});

Les requetes en POST avec les accents :

new Ajax.Request('url',
{
    method:'post',
    postBody:'param1='+escape(document.getElementById('val1').value)+
    '&param2='+escape(document.getElementById('val2').value)+
    asynchronous:true,
    encoding: 'iso-8859-1',
    onSuccess: function(e) {
        //traitement
    }
});

Et voilà, plus aucun problème avec les accents et autre caractères spéciaux. (En français bien sur).