Onglets dynamiques en Javascript/Ajax
le 11 juin 2007 par sahid
Petit script d’onglets dynamiques en Javascript/Ajax
Les onglets sont donc chargés dynamiquement via l’utilisation de XMLHttpRequest ().
Le script utilise window.onload afin d’intercepter les événements, ensuite via de simples conditions on redirige le traitement. Afin de rendre une impression d’onglet sélectionné, on change la classe de la balise li.
Les sources :
Compatibilité IE
Le script actuel n’est pas compatible IE, j’ai juste cherché à me lancer un petit défi rapide, il pourrait aussi sans doute etre amélioré (meme sur ( ; et c pour ca que les commentaires sont là !
Pour ceux qui souhaiteraient le rendre compatible IE, je vois plusieurs points à modifier
-
Au niveau des evenements, IE ne gere pas ca via un parametre sur la fonction, la variable est remplie en tant qu’attribut de la classe window. donc :
-
document.onclick = function (ev) {
-
var ev = ev || window.event
-
var el = ev.etarget || ev.srcElement
-
…
-
}
-
-
Je n’ai pas initialisé la classe XMLHttpRequest () pour IE, donc :
-
function createXHR ()
-
{
-
try { return new XMLHttpRequest (); } catch (e) {};
-
try { return new ActiveXObject (“Microsoft.XMLHTTP”); } catch (e) {};
-
try { return new ActiveXObject (“Msxml2.XMLHTTP”); } catch (e) {};
-
return null;
-
}
-
- Je vois que ca au premier coup d’oeil… m’enfin commentez si vous voyez quelques chose.
18 juin 2007 at 10:41
C’est super rare que un blog soit utile actuellement sur le net.
En revanche ce blog ne doit jamais fermer ! C’est une bible du développeur fabuleuse !
Merci pour tout sahid :)
PS : Ã quand une class i18n ? ^^
19 juin 2007 at 20:11
arf, c cool, merci Matt ( ;
promis j’essaie de la mettre en ligne rapidement, mais jettes un oeil sur
gettext
plus performante dans le sens ou elle est ecrite en C.
26 septembre 2007 at 17:46
bonjour moi tsm de Wonesek (”wonesek AT aol DOT com”) mais je souhaite ajouter et suprimer les onglet de facon à inter agir avec l’utilisateur chose que je peut pas faire dans un projet j’ai utiliser le php pour avoir un nombre d’onglet variable mais une fois la page charger les onglets inutiles ne peuvent etre effacer mis meme cacher si tu peux me trouver une lib js qui me permette de le faire de maniere pas trops compliquer envoi moi un mail c’est “badinga.ulrich AT gmail DOT com”
13 octobre 2007 at 11:22
Salut
bravo pour ton code …
J’ai un petit soucis , ca marche bien au début et puis aprÚs plusieurs utilisations ca bloque sur Chargement :(
Merci de ton aide
13 octobre 2007 at 11:33
Désolé, j’ai ciblé le problÚme, ça plante quand je mets à jour le code pour la compatibilité avec IE :(
13 octobre 2007 at 12:38
j’ai trouvé ce code qui me permet d’utiliser FF et IE
function createXHR ()
{ var x;
try { x = new ActiveXObject(”Microsoft.XMLHTTP”); }
catch (e) { try { x = new ActiveXObject(”Msxml2.XMLHTTP”); }
catch (e) { try { x = new XMLHttpRequest(); }
catch (e) { x=false; }
}
}
return x;
}
3 juillet 2008 at 11:56
Bonjour,
J’ai essayé votre code qui correspond exactement à ce que je recherchais mais le problème reste la comptabilité avec IE.
J’ai modifié la fonction createXHR mais je n’arrive pas à trouver le problème…
Avez-vous tenté depuis de résoudre ce problème de comptabilité???
Merci.
Christelle
3 juillet 2008 at 12:12
Salut,
avec le framework prototype.js
à la place de
HttpRequest (xhr, url)
tu fais
new AjaxRequest (url, {onSuccess: function (xhr) { $
(”contenu_onglet”).update (xhr.responseText); });
pour le framework, tu peux le telecharger sur http://www.prototypejs.org
ca devrais fonctionner je penses