[profile_view_body] Afficher les champs de profil dans différentes div
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
[profile_view_body] Afficher les champs de profil dans différentes div
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 :
![[profile_view_body] Afficher les champs de profil dans différentes div 05f1](https://zupimages.net/up/24/04/05f1.png)
J'imagine que ça pourrait être réglé avec du JS, merci d'avance de vous pencher sur le sujet !
Dernière édition par Hallow le Ven 26 Jan 2024 - 19:26, édité 1 fois
Re: [profile_view_body] Afficher les champs de profil dans différentes div
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.
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.
Re: [profile_view_body] Afficher les champs de profil dans différentes div
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 ?
Re: [profile_view_body] Afficher les champs de profil dans différentes div
Bonjour !
Oui, c'est exactement ça, vous pouvez laisser comme ça, c'est totalement viable !
Oui, c'est exactement ça, vous pouvez laisser comme ça, c'est totalement viable !
Re: [profile_view_body] Afficher les champs de profil dans différentes div
Super merci beaucoup !
![-](https://2img.net/i/empty.gif)
» Ne pas afficher certains onglets/champs dans le profil des membres
» Supprimer un Champs dans la PA > Profil > Champs de Profil
» [Profil] Afficher des champs facultatifs à l'enregistrement
» ModernBB : retirer les deux points des labels de champs de profil dans l'affichage d'un sujet et dans l'affichage du profil.
» Isoler les champs de profil dans la page du profil
» Supprimer un Champs dans la PA > Profil > Champs de Profil
» [Profil] Afficher des champs facultatifs à l'enregistrement
» ModernBB : retirer les deux points des labels de champs de profil dans l'affichage d'un sujet et dans l'affichage du profil.
» Isoler les champs de profil dans la page du profil
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum