Déplacer champs profil dans un système d'onglets.

[datnavy]

Détails techniques

Version du forum : ModernBB (modifié avec le Blank Theme de GeniusPanda)
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : La création du forum
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, bonsoir.
Je rencontre des difficultés dans la mise en place d'un script servant à déplacer les champs du profil.

Tout d'abord, je me sers d'un tutoriel que Velunes a gentiment partagé ici. Pour la partie mise en place des onglets, rien à signaler, ils fonctionnent parfaitement.

En revanche, dès qu'on passe à la partie déplacement des champs du profil, là rien ne se passe. Je vous mets donc un extrait de mon template viewtopic-body ainsi que le JS utilisé :

Code:

<!-------- AFFICHAGE D'UN MESSAGE -------->

<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<div id="{postrow.displayed.U_POST_ID}"></div>

<div class="post post_row post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}">

  <!-- Colonne de profil -->
    <div class="post_profile" id="profile{postrow.displayed.U_POST_ID}">
    
      
      <div class="postprofile-avatar" data-id="{postrow.displayed.POSTER_ID}">
        {postrow.displayed.POSTER_AVATAR}
      </div>
 <div class="postprofile-name">
 {postrow.displayed.POSTER_NAME}
 </div>
 <div class="postprofile-rank">
 {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
 <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">
                                {postrow.displayed.AWARDS}
 </div>
 <div class="award_more"></div>
 </div>
 
  
   <div class="systab">
     <div class="selected">
       <span>Onglet 1</span>
       <span class="profil"> <!-- BEGIN profile_field -->
         <div class="infos-posteur">
          <span class="profil_label">{postrow.displayed.profile_field.LABEL}</span>
          {postrow.displayed.profile_field.CONTENT}
          {postrow.displayed.profile_field.SEPARATOR}
         </div> <!-- END profile_field -->
       </span>
     </div>
    
     <div>
       <span>Onglet 2</span>
       <div class="rpg"><!-- Feuille de personnage -->{postrow.displayed.POSTER_RPG}</div>
     </div>
    
     <div>
       <span>Onglet 3</span>
       <div class="other"><!-- Les champs du profil seront déplacés ici --></div>
     </div>
   </div>  
      
      
 <dd class="postprofile-contact">
 {postrow.displayed.PROFILE_IMG}
 {postrow.displayed.PM_IMG}
 {postrow.displayed.EMAIL_IMG}
 <!-- BEGIN contact_field -->
 {postrow.displayed.contact_field.CONTENT}
 <!-- END contact_field -->
 </dd>


    
    
      
    
    
    
    
    
    </div>
  <!-- Fin colonne profil -->

Code:

$(function(){

    // on indique la version du forum
    // attention de bien respecter les écritures ci-dessous
    // invision, phpbb2, phpbb3, punbb, Invision, ModernBB, AwesomeBB
    var versionForum = 'ModernBB',
        $chemin,
        $eltParent = '.post_profile';

    // On indique le chemin vers la balise qui contient les champs du profil
    switch(versionForum){
        // Si on est sur phpbb3, ModernBB, Invision
        default:
            $chemin = ".post_profile .infos-posteur";
            break;
    }

    // Si la structure est différente de celle de base
    // indiquer le bon chemin et
    // décommenter (en supprimer // ) la ligne ci-dessous
    // chemin = "ton chemin";

    // On parcourt chaque champs des profils
    $( $chemin ).each(function( index ) {
        // On supprime les : des champs
        var champsLabel = $(this).find('.label');
        champsLabel.html(champsLabel.html().replace(' : ',' -- '));

        // On récupére le contenu html de ces champs
        var champs = champsLabel.html();

        // On teste sur le champs correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if( champs == "Bloodline"){
            // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
            $(this).parents($eltParent).find('.other').append(this);
        }

        
    });
});

Merci de l'attention portée à mon soucis.
Belle journée.

[Toryudo]

Bonjour !

En tant qu'invité, je n'ai pas accès à votre forum et je ne peux pas directement voir le problème, mais comme il est déjà arrivé plusieurs fois, je pense pouvoir deviner. Voilà la partie du code qui nous intéresse :

Code:

        var champsLabel = $(this).find('.label');
        champsLabel.html(champsLabel.html().replace(' : ',' -- '));
 
        // On récupére le contenu html de ces champs
        var champs = champsLabel.html();
 
        // On teste sur le champs correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if( champs == "Bloodline"){
            // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
            $(this).parents($eltParent).find('.other').append(this);
        }

Vous cherchez à déplacer un champ qui s'appelle "Bloodline", mais il y a de fortes chances qu'il ne s'appelle pas exactement comme ça. En effet, dans la deuxième ligne de code, vous remplacez " : " par " -- " dans le nom du champ, on peut donc supposer que le nom du champ est passé de "Bloodline : " à "Bloodline -- " et dans ce cas, c'est plutôt un if( champs == "Bloodline -- ") qu'il faudrait faire.

Mais ce n'est peut-être pas la seule chose qu'il faudrait modifier ; s'il y a une couleur sur le nom du champ par exemple, il faut aussi la prendre en compte, parce que "champsLabel.html()" va contenir du code, plus uniquement du texte. Dans le doute, on peut modifier le code "champsLabel.html()" en "champsLabel.text()" pour ne plus avoir à s'occuper du HTML. Hypothétiquement donc, le correctif devrait être celui-ci :

Code:

        var champsLabel = $(this).find('.label');
        champsLabel.html(champsLabel.html().replace(' : ',' -- '));
 
        // On récupére le contenu textuel de ces champs
        var champs = champsLabel.text();
 
        // On teste sur le champs correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if( champs == "Bloodline -- "){
            // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
            $(this).parents($eltParent).find('.other').append(this);
        }

Si ça ne fonctionne pas, pouvez-vous faire en sorte que le forum soit accessible pour les invités ? Et que le champ "Bloodline" soit également visible pour les invités ? Si je peux voir la chose en tant qu'invité, je devrais pouvoir vous donner le code correct à 100% !

[datnavy]

Bonjour !

Tout d'abord, merci de t'être penché sur mon soucis.
Je sais que c'est un problème qui revient régulièrement, et j'ai eu beau écumer les différents topics à ce sujet, je ne suis pas parvenue à le régler par moi-même.

J'ai donc essayé en collant le deuxième code, mais rien n'y fait.
À vrai dire, même la partie qui modifie le " : " en " -- " ne fonctionne pas du tout.

J'ai donc passé le forum en ouvert aux invités (petite erreur que j'avais oublié de rectifier, mille excuses, c'est vrai que c'est pas très malin de donner le lien du forum si rien n'est visible aux visiteurs...) en espérant qu'avec un visuel ce soit plus simple.

Bonne fin de journée !  

EDIT : Mais pas du tout, c'est moi qui semble ne pas savoir faire un simple copié/collé, la honte ! Tout a l'air de fonctionner, je te remercie mille fois.