Bonjour, je suis actuellement en train de me lancer un premier défi qui consiste à créer un petit plugin automatisé pour mon forum.
Le principe est simple, lorsqu'on clique sur un lien de profil (commençant par "http://.../u..."), un contenu est chargé grâce à .load() et affiché dans une boite. Cette boite est directement intégrée dans un système d'onglets interne au forum (sans changement de page), ce qui permet de consulter le profil du membre en question.
Ce système d'onglets est généré grâce aux attributs "data", qui fonctionne très bien jusqu'à maintenant (les onglets se chargent normalement et tout est niquel). Il fonctionne simplement : le lien de l'onglet contient un attribut data-page="x" et l'onglet ciblé contient également un data-contain="x". Lorsque les deux data sont de même noms, ils sont reliés et le tout est généré grâce à une variable récupérée au clique du lien (on click > this > attribut data-page, sommairement)
Là où vient le problème, c'est lorsqu'il s'agit de ces liens de profils à charger. Je m'explique :
- En cliquant sur le lien de profil (au nom du membre, donc, avec un lien vers sa véritablement page de profil), un nouveau lien est ajouté dans la liste des onglets grâce à .append() et l'attribut "data-page" prend pour données le nom du membre.
Par la suite, une nouvelle section dans mes onglets est ajouté directement dans le body avec pour "data-contain" le nom du membre aussi. Ensuite, le .load() etc.
NORMALEMENT, tout fonctionne. C'est à dire que je vois apparaître, en regardant le code source de mon forum, les deux nouveaux éléments (le lien d'onglet et la section reliée par un même data). Donc normalement, si mes autres onglets fonctionnent, il serait logique de penser qu'en cliquant sur ce nouvel onglet fraîchement créé, il devrait agir comme les autres... mais non.
- Lorsque je clique sur ce nouvel onglet rien ne se passe et pourtant il s'agit exactement du même principe utilisés pour les onglets dits "fixes" (qui sont intégrés dans la barre de base, grâce au html). L'onglet ne s'affiche pas. En effectuant quelques tests avec un .alert(), j'arrive à renvoyer le pop-up sur les onglets dits "fixes", mais pas sur ce lien ajouté grâce à jQuery.
Voici ce que j'utilise comme procédé pour la création d'un nouvel onglet (sans doute très barbare, je débute encore, veuillez m'excusez) :
(j'ai retiré le code superflu qui est, de toute façon, en commentaire pour l'instant)
et voici ce que j'utilise pour les onglets normaux :
On voit bien que le "#menunav > a[data-page]" ne doit pas, normalement, poser de problème, du coup je ne sais pas du tout d'où le problème peut venir.
Quelqu'un saurait m'éclairer ?
Merci d'avance et désolé si mes codes piquent les yeux.
Le principe est simple, lorsqu'on clique sur un lien de profil (commençant par "http://.../u..."), un contenu est chargé grâce à .load() et affiché dans une boite. Cette boite est directement intégrée dans un système d'onglets interne au forum (sans changement de page), ce qui permet de consulter le profil du membre en question.
Ce système d'onglets est généré grâce aux attributs "data", qui fonctionne très bien jusqu'à maintenant (les onglets se chargent normalement et tout est niquel). Il fonctionne simplement : le lien de l'onglet contient un attribut data-page="x" et l'onglet ciblé contient également un data-contain="x". Lorsque les deux data sont de même noms, ils sont reliés et le tout est généré grâce à une variable récupérée au clique du lien (on click > this > attribut data-page, sommairement)
Là où vient le problème, c'est lorsqu'il s'agit de ces liens de profils à charger. Je m'explique :
- En cliquant sur le lien de profil (au nom du membre, donc, avec un lien vers sa véritablement page de profil), un nouveau lien est ajouté dans la liste des onglets grâce à .append() et l'attribut "data-page" prend pour données le nom du membre.
Par la suite, une nouvelle section dans mes onglets est ajouté directement dans le body avec pour "data-contain" le nom du membre aussi. Ensuite, le .load() etc.
NORMALEMENT, tout fonctionne. C'est à dire que je vois apparaître, en regardant le code source de mon forum, les deux nouveaux éléments (le lien d'onglet et la section reliée par un même data). Donc normalement, si mes autres onglets fonctionnent, il serait logique de penser qu'en cliquant sur ce nouvel onglet fraîchement créé, il devrait agir comme les autres... mais non.
- Lorsque je clique sur ce nouvel onglet rien ne se passe et pourtant il s'agit exactement du même principe utilisés pour les onglets dits "fixes" (qui sont intégrés dans la barre de base, grâce au html). L'onglet ne s'affiche pas. En effectuant quelques tests avec un .alert(), j'arrive à renvoyer le pop-up sur les onglets dits "fixes", mais pas sur ce lien ajouté grâce à jQuery.
Voici ce que j'utilise comme procédé pour la création d'un nouvel onglet (sans doute très barbare, je débute encore, veuillez m'excusez) :
$('a[href^="/u"]').click(function () {
var $linkText = $(this).text().toLowerCase().replace(' ', ''),
$colorTab = $(this).children('span').css('color'),
$appendPpage = $('<a class="hint--bottom hint--white"><span class="symbols">.</span></a>'),
$appendPcontain = $('<section data-contain="' + $linkText + '"><header style="background-color:' + $colorTab + '"><span></span></header><div class="forumline"></div></section>');
$('#menunav').append($appendPpage).attr('data-page', $linkText);
$('body').append($appendPcontain).attr('data-contain', $linkText);
return false;
});(j'ai retiré le code superflu qui est, de toute façon, en commentaire pour l'instant)
et voici ce que j'utilise pour les onglets normaux :
$('#menunav > a[data-page]').on('click', function () {
var $toppage = $(this).attr('data-page');
if ($('body > section[data-contain="' + $toppage + '"]').is(':visible')) {} else {
$(this).addClass('active');
$('#menunav > a:not([data-page="' + $toppage + '"], #dropdown)').removeClass('active');
$progress = $('<div><dt><dt/><dd><dd/></div>').attr('id', 'progress');
$("body").append($progress);
var randomload = (300 + Math.random() * 50);
$('#progress').animate({
width: "100%"
}, randomload, function () {
setTimeout(function () {
$('#progress').remove();
}, randomload);
$('body > section[data-contain]:visible').fadeOut(400, function () {
$('body > section[data-contain="' + $toppage + '"]').fadeIn(400);
});
});
}
});On voit bien que le "#menunav > a[data-page]" ne doit pas, normalement, poser de problème, du coup je ne sais pas du tout d'où le problème peut venir.
Quelqu'un saurait m'éclairer ?
Merci d'avance et désolé si mes codes piquent les yeux.