[profile_view_body] Afficher les champs de profil dans différentes div

[Hallow]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://123test.forumactif.com/

Description du problème

Bonjour,

J'ai modifié mon template profile_view_body et je divise mes champs de profil dans plusieurs div, pour se faire je fais appel à chaque fois au "script" qui donne tous les champs de profil puis j'applique un CSS pour masquer tous ceux qui ne m'intéressent pas dans la div concernée, mais ça m'affiche des erreurs puisque les id apparaissent plusieurs fois sur la page alors qu'une id n'est sensée apparaître qu'une fois.

Comment faire pour distribuer les champs de profil dans différentes div sans avoir à faire appel à toutes à chaque fois ?

Adresse vers mon profil : https://123test.forumactif.com/u1
Mon template :

Code:

<div class="hu-bloc-profil">  
    <div class="hu-profil-header"><!-- BEGIN switch_show_status -->
  <div class="online-statut" style="display:none;">{USER_ONLINE}</div>
      <!-- END switch_show_status -->  <script>
$(function(){
$('div.online-statut:contains("En ligne")').parent().addClass('online-membre').attr('title', 'En vadrouille');
$('div.online-statut:contains("Hors ligne")').parent().addClass('offline-membre').attr('title', 'Hors ligne');
});</script>
      
          <div class="profil-barre-contact">{USERNAME}
    <div class="profil-span-contact">
  <form action="{S_PROFILE_ACTION}" method="post" name="post">
    <!-- BEGIN contact_field -->
    <div id="field_id{contact_field.ID}">
    {contact_field.CONTENT}
    </div>
    <!-- END contact_field -->
  </form>
 </div>   </div> </div>
  <div class="profil-blocs-infos">
<div class="profil-colonne-gauche">
  <div id="avatar_membre">{AVATAR_IMG}</div>

  <div class="profil-span-stats">
    <!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}"><div title="Nombre de récits">{profile_field.CONTENT}</div>
                  <!-- BEGIN profil_type_user_posts -->
        <!-- BEGIN links -->
      <div><a rel="nofollow" href="/st/{PUSERNAME}">Aventures créées</a></div>
        <div><a rel="nofollow" href="/sta/{PUSERNAME}">Aventures participées</a></div>
        <div><a rel="nofollow" href="/spa/{PUSERNAME}">Récits écrits</a></div>
        <!-- END links -->
        <!-- END profil_type_user_posts -->
 </div>
      <!-- END profile_field -->
  </div></div>
<div class="profil-colonne-milieu"><div class="profil-colonne-milieu-ligne1">
  <div class="profil-infos-generales"><span class="profil-naissance-personnage" title="Date de Naissance"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --></span>
    <span class="profil-age-personnage" title="Age"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --></span>
    <span class="profil-lieu-personnage" title="Lieu de vie"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --></span>  
    <span class="profil-credits-avatar" title="Artiste de l'avatar"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --></span>
  </div>    
  <div id="rang_membre">{POSTER_RANK}</div>
  </div>
<div class="profil-infos-detaillees">
  <span class="profil-note" title="Note"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --></span>
  <span class="profil-dragon" title="Dragon"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --></span>
  <span class="profil-magie" title="Magie"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --></span>
  <span class="profil-nb-sas" title="Nombre de Sas"><!-- BEGIN profile_field -->
    <div id="field_id{profile_field.ID}">
      {profile_field.CONTENT}
    </div>
    <!-- END profile_field --> Sas</span>
<div class="profil-infos-co"><span class="profil-infos-inscription">Vadrouille depuis le <!-- BEGIN profile_field --><div id="field_id{profile_field.ID}">{profile_field.CONTENT}</div><!-- END profile_field --></span><span class="profil-infos-derniereco">Dernier flânage: {LAST_VISIT_TIME}</span>
  </div>
</div>
</div>
<div class="profil-colonne-droite">
<div class="profil-inventaire">                  
<span>Inventaire</span>
  <!-- BEGIN profile_field --><div id="field_id{profile_field.ID}">{profile_field.CONTENT}</div><!-- END profile_field -->
  </div>
 <div class="profil-double-compte" title="Autre(s) personnage(s) joué(s)">                  
<span>Costumier</span>
  <!-- BEGIN profile_field --><div id="field_id{profile_field.ID}">{profile_field.CONTENT}</div><!-- END profile_field -->
  </div>
</div>
</div>  
 </div>
  <div class="clear"></div>    
 <div class="profil-administrer">
    <!-- BEGIN switch_auth_user -->
   <span>{ADMINISTRATE_USER}{BAN_USER}</span>
    <!-- END switch_auth_user -->
  
    <form action="{S_PROFILE_ACTION}" method="post" name="post">
    <!-- BEGIN switch_admin_user_comment_active -->
    <dl class="details">
      <dt>{L_COMMENTS} :<br /><span class="italic">{L_MODS_AND_ADMINS}</span></dt>
      <dd><textarea class="inputbox" name="admin_user_comment_text" rows="8" cols="30">{ADMIN_USER_COMMENT}</textarea></dd>
    </dl>
    <fieldset class="submit-buttons">
      <input type="hidden" value="update_admin_user_comment" name="mode" />
      <input type="hidden" value="{USER_ID}" name="userid" />
      <input type="submit" class="button2" name="user_comment_maj" value="{L_UPDATE}" />
    </fieldset>
    <!-- END switch_admin_user_comment_active -->
  </form>
</div>
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){
    $('[id^=field_id]').each(function(){
      if ( $(this).find('.field_editable').is('span, div') )
      {
        $(this).hover(function()
        {
          if( $(this).find('.field_editable.invisible').is('span, div') )
          {
            $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
            $(this).find('.ajax-profil_edit').attr({
                alt: "{L_FIELD_EDIT_VALUE}",
                title: "{L_FIELD_EDIT_VALUE}"
              }).click(function(){
              $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
              $(this).prev().find('.ajax-profil_valid').attr({
                alt: "{L_VALIDATE}",
                title: "{L_VALIDATE}"
              }).click(function(){
                var content = new Array();
                $(this).parent().find('[name]').each(function(){
                  var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                  if ( (type_special && $(this).is(':checked')) || !type_special )
                  {
                    content.push(new Array($(this).attr('name'), $(this).attr('value')));
                  }
                });
                var id_name = $(this).parents('[id^=field_id]').attr('id');
                var id = id_name.substring(8, id_name.length);
                $.post(
                  "{U_AJAX_PROFILE}",
                  {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                  function(data){
                    $.each(data, function (i, item) {
                      if (item.startsWith('error : ')){
                        let present_err=document.getElementById('field_id' + i + "_err");
                        if(!present_err){
                          let err = document.createElement('div');
                          err.id = 'field_id' + i + "_err";
                          err.classList.add("form-error");
                          err.textContent = item.substring(8);
                          document.getElementById('field_id' + i).querySelector('.field_editable input').after(err);
                        }else{
                          present_err.innerText=item.substring(8);
                        }
                      }else {
                        let err=document.getElementById('field_id' + i + "_err");
                        if(err){
                          err.remove();
                        }
                        $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                      }
                    });
                  },
                  "json"
                );
              });
              $(this).remove();
            });
          }
        },function()
        {
          if( $(this).find('.field_editable.invisible').is('span, div') )
          {
            $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
            $(this).find('.ajax-profil_edit').remove();
          }
        });
      }
    });
  });
//]]>
</script>

CSS concerné :

Code:

.hu-bloc-profil:before{z-index:-1;content:'';background-image:var(--papierdechire);background-size: cover;background-position:bottom center;transform:rotate(-180deg);position:absolute;bottom:99%;right:0;left:0;height:50px;width:100%;}
.hu-bloc-profil:after{z-index:-1;content:'';background-image:var(--papierdechire);background-size: cover;background-position:bottom center;position:absolute;top:99%;right:0;left:0;height:50px;width:100%;}
.hu-bloc-profil{filter: drop-shadow(0px 2px 1px rgba(0,0,0,0.3));background:var(--bgpapierdechire);margin:0 auto;position:relative;display:flex;flex-direction:column;gap: 20px;padding: 20px;}
.profil-barre-contact{background:var(--bgblocpapierdechire);border-bottom:5px solid var(--goldcolor);width:80%;display:flex;flex-direction:row;justify-content: space-between;align-self: flex-end;border-radius:10px;padding:10px;align-items: center;}
.profil-barre-contact span{font-family:var(--secondaryfamilyfont);font-weight:700;font-size: 1.8em;text-transform:uppercase;text-align:left;}
.profil-span-contact form{display:flex;flex-direction:row;justify-content: space-around;align-items: center;gap:10px;}
.profil-span-contact form div:nth-child(2){display:none;}
.profil-span-contact form div a:hover{box-shadow: inset 200px 0 0 0 var(--bluecolor);color: var(--primaryfont)!important;}
.profil-span-contact form div a{display: block;border-radius:10px;text-align:center;height: 25px;width: 25px;padding: 12px 10px 10px 10px;font-size: 2.2em;line-height:2em;color: transparent!important;background-clip: text;-webkit-background-clip: text;background-image:var(--degradebleu);box-shadow: inset 0 0 0 0 var(--bluecolor);transition: all .3s ease-in-out;}
.profil-blocs-infos{display:flex;flex-direction:row;gap:20px;flex-wrap: wrap;}
.profil-colonne-gauche{display:flex;flex-direction:column;gap:20px;width: 200px;}
#avatar_membre{width:190px;height:320px;overflow:hidden;border-radius:10px;border:5px solid var(--goldcolor);}
#avatar_membre img{width:200px;height:320px;}
.hu-profil-header{height: 50px;display:flex;flex-direction:row;justify-content: flex-end;align-items: center;}
.hu-profil-header.online-membre:before{z-index: -1;position: relative;bottom: 25%;left: 45px;font: var(--fa-font-regular);font-size:10em!important;content: "\f111";color: transparent!important;background-image:var(--degradevert);background-clip: text;-webkit-background-clip: text;}
.hu-profil-header.offline-membre:before{z-index: -1;position: relative;bottom: 25%;left: 45px;font: var(--fa-font-regular);font-size:10em!important;content: "\f111";color: var(--primaryfont)!important;}
.profil-span-stats > div:not(#field_id-6){display:none;}
.profil-span-stats #field_id-6 div:not(.field_uneditable){border-bottom:5px solid var(--bluecolor);margin-bottom:10px;background:var(--bgblocpapierdechire);border-radius:10px;padding:10px;font-size: 1.2em;text-align: center;color: var(--primaryfont);font-family:var(--secondaryfamilyfont);text-transform: uppercase;font-weight:700;}
.profil-span-stats a{color: var(--primaryfont);}
.profil-colonne-milieu{display:flex;flex-direction:column;gap:20px;flex-grow: 1;flex-basis: 0;}
.profil-colonne-milieu-ligne1{display:flex;flex-direction:row;justify-content: space-between;}
.profil-infos-generales, #rang_membre{background:var(--bgblocpapierdechire);width:40%;border-radius:10px;padding:10px;color: var(--primaryfont);font-size: 1.8em;font-weight:700;}
.profil-infos-generales{text-transform:uppercase;font-family:var(--secondaryfamilyfont);text-align: left;}
.profil-naissance-personnage > div:not(#field_id-8){display:none;}
.profil-naissance-personnage #field_id-8{font-family:var(--tertiaryfamilyfont);text-align:right;font-size: 0.7em;}
.profil-age-personnage > div:not(#field_id-9){display:none;}
.profil-lieu-personnage > div:not(#field_id-11){display:none;}
.profil-credits-avatar > div:not(#field_id3){display:none;}
#rang_membre{display: flex;flex-direction: column-reverse;justify-content: center;align-items: center;font-family: var(--tertiaryfamilyfont);text-align: center;}
#rang_membre br{display: none!important;}
.profil-infos-detaillees{overflow:hidden;position:relative;background:var(--bgblocpapierdechire);border-radius:10px;padding:10px;color: var(--primaryfont);height: 70%;border-bottom:5px solid var(--redcolor);}
.profil-note > div:not(#field_id6){display:none;}
.profil-note{font-family:var(--tertiaryfamilyfont);font-size: 2em;line-height:2em;text-align: center;width:100%;}
.profil-dragon > div:not(#field_id4){display:none;}
.profil-magie > div:not(#field_id5){display:none;}
.profil-nb-sas > div:not(#field_id-13){display:none;}
#field_id-13{display:inline-block;}
.profil-dragon, .profil-magie, .profil-nb-sas, .profil-couleur-dragon, .profil-couleur-paroles{width:50%;font-size: 1.2em;line-height:2em;font-family:var(--secondaryfamilyfont);text-transform: uppercase;font-weight:700;}
.profil-infos-co{overflow:hidden;font-family:var(--tertiaryfamilyfont);font-size: 1.2em;line-height:1em;color: var(--primaryfont);}
.profil-infos-inscription, .profil-infos-derniereco{position:absolute;bottom:5px;width: 100%;transition: all 0.3s ease-in-out;}
.profil-infos-derniereco{transform:translateX(-100%);}
.profil-infos-inscription{transform:translateX(0);}
.profil-infos-co:hover .profil-infos-derniereco {transform:translateX(0);}
.profil-infos-co:hover .profil-infos-inscription {transform:translateX(-110%);}
.profil-infos-inscription > div:not(#field_id-4){display:none;}
#field_id-4{display:inline-block;margin-left:5px;}
.profil-colonne-droite{display:flex;flex-direction:column;gap:20px;flex-grow: 1;flex-basis: 0;}
.profil-inventaire, .profil-double-compte{background:var(--bgblocpapierdechire);border-radius:10px;padding:10px;color: var(--primaryfont);height:45%;}
.profil-inventaire{border-bottom:5px solid var(--bluecolor);}
.profil-double-compte{border-bottom:5px solid var(--greencolor);}
.profil-inventaire span, .profil-double-compte span{text-transform:uppercase;font-family:var(--secondaryfamilyfont);font-size: 1.8em;font-weight:700;text-align:center;}              
.profil-inventaire > div:not(#field_id7){display:none;}
.profil-double-compte > div:not(#field_id8){display:none;}
.profil-administrer{text-align:center;margin-top:50px;}
.profil-administrer span a{border-radius:5px;padding:5px;color: var(--primaryfont);font-family:var(--secondaryfamilyfont);font-size: 2.2em;line-height:2em;font-weight:700;text-transform:uppercase;box-shadow: inset 800px 0 0 0 var(--tertiarycolor);transition: all .3s ease-in-out;}
.profil-administrer span a:hover{color: var(--tertiarycolor);box-shadow: inset 0 0 0 0 var(--tertiarycolor);color: var(--tertiarycolor);text-decoration:none;}


Les erreurs de la console :


J'imagine que ça pourrait être réglé avec du JS, merci d'avance de vous pencher sur le sujet !

[Toryudo]

Bonjour !

Techniquement, ce genre de problème ne peut pas être réglé avec du Javascript.
Vous n'êtes pas exactement dans la "console" quand vous voyez ce message, mais dans un onglet spécial où votre navigateur vous donne les bonnes pratiques et les optimisations possibles de votre page. Regarder si des "id" sont multiples, il le fait en se basant sur le code HTML source reçu, code HTML qui ne contient donc pas encore les modifications apportés par les scripts.

Ça veut dire que même si des scripts modifient les id, le navigateur identifiera quand même des problèmes avec les id.
Maintenant, ce ne sont pas vraiment des "problèmes" à proprement parler. Le navigateur déconseille la pratique parce que ça peut poser des problèmes (et que ce n'est pas "une façon standard de faire"), mais dans votre cas, si vous ne mettez que du CSS et que vous ne touchez pas à ces champs avec du JavaScript, alors vous n'aurez pas de problème.

[Hallow]

Du coup je peux laisser ça tel quel, ça ne devrait pas poser de problème ? Même si en soi ce n'est pas "propre", la solution reste viable ?

[Toryudo]

Bonjour !

Oui, c'est exactement ça, vous pouvez laisser comme ça, c'est totalement viable !

[Hallow]

Super merci beaucoup !