Récupération de liens rentrés dans le profil personnalisé

[foxies]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous

Je progresse tout doucement sur mon projet mais il reste quelques petites choses que je ne suis pas parvenue à trouver toute seule.

1) Mon forum - qui proposera un jeu de simulation d'élevage de chevaux - comporte, au niveau du haut de celui-ci, un "bandeau" avec certaines informations : le pseudo de l'utilisateur connecté, le nombre de ses points d'XP, le montant de son compte bancaire, etc.

J'ai utilisé ce script pour y parvenir (on récupère l'id de chaque élément) :

Code:

$(function() {
    if (_userdata.user_id > -1) {
        $.get('/u' + _userdata.user_id, function(data) {
            $('.element1').append($('#field_id-13 .field_uneditable', data));
            $('.element2').append($('#field_id2 .field_uneditable', data));
            $('.element3').append($('#field_id3 .field_uneditable', data));
        });

        $('.banner-name').append(_userdata.username);
    }
});

Seulement, j'aurais aimé que des liens importants d'une partie soient également disponibles au niveau de ce bandeau. Par exemple : le lien du sujet de présentation du joueur, ou encore le lien vers la liste de ses chevaux fictifs. J'ai donc créé plusieurs nouveaux champs texte afin que les membres puissent, depuis l'édition de leur profil, y mentionner leurs différents liens personnels.

Ce que je n'ai pas été en mesure de faire : trouver le script permettant de récupérer ces liens en provenance du profil personnalisé de l'utilisateur lorsque celui-ci est connecté, afin qu'ils s'affichent en tête du forum.

2) Au niveau cette fois-ci de ma barre de navigation, lorsque l'on passe le curseur sur l'avatar de l'utilisateur connecté, deux icônes s'affichent et lorsqu'on clique dessus, il est possible soit d'éditer son profil ou de se déconnecter. Un troisième icône est présent, mais je n'ai pas réussi à inclure le lien de la page vers laquelle il est censé diriger, c'est à dire le profil de l'utilisateur connecté (comme on peut le retrouver dans la barre de notification de FA, en cliquant sur le lien "voir son profil").

Voilà voilà, si vous avez des pistes, des idées pour parvenir à régler ces deux choses, je vous en serais très reconnaissante Bonne journée à tous

[foxies]

UP :p

[foxies]

UP

[MasDan]

Bonjour Pinke,

Modifier les lignes 4, 5 et 6 de votre javascript.

Exemple pour la ligne 4, remplacer

Code:

$('.element1').append($('#field_id-13 .field_uneditable', data));

par

Code:

$('.element1').append($('#field_id-13 .field_uneditable').html();

En utilisant html(), nous pouvons récupérer un texte, une image et des listes (texte ou image).

Non testé mais cela devrait fonctionné avec un template non modifié.

Pour le reste, il faudrait avoir accès à votre forum pour bien visualiser le problème.

[foxies]

Bonjour MasDan,

J'ai suivi vos indications et malheureusement le script proposé ne fonctionne pas.

Code:

$(function() {
    if (_userdata.user_id > -1) {
        $.get('/u' + _userdata.user_id, function(data) {
            $('.header2').append($('#field_id1 .field_uneditable').html();
            $('.element1').append($('#field_id6 .field_uneditable').html();
            $('.element2').append($('#field_id2 .field_uneditable').html();
            $('.element3').append($('#field_id3 .field_uneditable').html();
        });

        $('.nav-user').append(_userdata.avatar);
        $('.banner-name').append(_userdata.username);
    }
});

Pour ce qui est de l'accès au forum, les inscriptions sont ouvertes. Mais je vais vous envoyer par MP les identifiants d'un compte test déjà existant.

Merci à vous

[foxies]

Petit UP

[MasDan]

Oups erreur dans le code précédent, désolé.

Essayer plutôt ceci

Ajouter à votre css

Code:

#loadProfil { display: none; }

Remplacer votre code Javascript par ce code

Code:

$(function() {
    if (_userdata.user_id > -1) {
      $("body").append("<div id='loadProfil'></div>");
      $("#loadProfil").load("/u" + _userdata.user_id + " #profile-advanced-details", function() {
        $(".header2").append($("#loadProfil #field_id1 .field_uneditable").html());
        $(".element1").append($("#loadProfil #field_id6 .field_uneditable").html());
        $(".element2").append($("#loadProfil #field_id2 .field_uneditable").html());
        $(".element3").append($("#loadProfil #field_id3 .field_uneditable").html());
        $("div#loadProfil").remove();
      });
      $('.nav-user').append(_userdata.avatar);
      $('.banner-name').append(_userdata.username);
    };
});

[foxies]

Merci MasDan ! Le code fonctionne comme celui que j'avais auparavant, mais j'ai du mal à comprendre à quoi les nouveaux éléments vont servir... Du moins, je ne vois pas comment cela va me permettre de récupérer les informations que je cite dans mon premier message. Excusez- moi, je je ne suis pas du tout calée en JS haha.

[foxies]

Petit UP

[foxies]

UP

[MasDan]

Bonjour Pinke,

Pour le lien vers le profil de l'utilisateur connecté

remplacer

Code:

<a href="/">

par

Code:

<a id="lien">
<script>$("#lien").attr("href", "/u" + _userdata.user_id); </script>

[foxies]

Merci beaucoup MasDan, ça marche impeccablement. Une idée pour mon ce que je souhaite faire en 1) dans mon premier message ?

[MasDan]

Bonjour Pinke,

Pour les nouveaux champs: À la création de nouveaux champs au profil (/profile?mode=editprofile), les champs apparaissent automatiquement sur le profil (/u?) (seulement si renseigné).

Pour lien du sujet de présentation du joueur, je ne vois que la création d'un nouveau champ au profil et de le mettre à jour manuelle.

[foxies]

Bonjour MasDan

Pour les nouveaux champs: À la création de nouveaux champs au profil (/profile?mode=editprofile), les champs apparaissent automatiquement sur le profil (/u?) (seulement si renseigné).

Oui, c'est bien cela.

Pour lien du sujet de présentation du joueur, je ne vois que la création d'un nouveau champ au profil et de le mettre à jour manuelle.

C'est bien ce à quoi je pensais également

[foxies]

UP

[foxies]

UP

[foxies]

Up

[MasDan]

Bonjour,

Pour les champs que vous avez créé, il est anormal que la valeur renseignée ne soit pas conservée lors de l'enregistrement des données.

Est-ce que les nouveaux champs ont été créés via la P.A./ onglet Utilisateur & Groupes / Utilisateurs - profils / onglet champs du profil. ?

[foxies]

Bonjour, j'ai bien peur de ne pas comprendre votre remarque, excusez-moi

J'ai bien créé les nouveaux champs depuis la P.A.

Voici mon template overall_header (l'endroit où je veux inclure les liens se trouve au niveau de la class banner-links :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>

<head>
    <link href="https://fonts.googleapis.com/css?family=Poppins|Roboto" rel="stylesheet">
    <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
    <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <!-- BEGIN switch_compat_meta -->
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    <!-- END switch_compat_meta -->
    <!-- BEGIN switch_canonical_url -->
    <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
    <!-- END switch_canonical_url -->
    {META_FAVICO} {META} {META_FB_LIKE}
    <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS}
    <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
    <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

    <!-- BEGIN switch_fb_login -->
    <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
    <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
    <!-- END switch_fb_login -->

    <!-- BEGIN switch_ticker -->
    <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
    <!-- END switch_ticker -->

    <!-- BEGIN switch_ticker_new -->
    <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        /* Definir le sens de direction en fonction du panneau admin */
        var tickerDirParam = "{switch_ticker.DIRECTION}";
        var slid_vert = false;
        var auto_dir = 'next';
        var h_perso = parseInt({
            switch_ticker.HEIGHT
        });

        switch (tickerDirParam) {
            case 'top':
                slid_vert = true;
                break;

            case 'left':
                break;

            case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;

            case 'right':
                auto_dir = 'prev';
                break;

            default:
                slid_vert = true;
        }

        $(document).ready(function() {

            $('#fa_ticker_content').css('display', 'block');

            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {
                switch_ticker.SIZE
            });

            if (width_max > 0) {
                $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function() {
                    if ($(this).width() > width_item) {
                        var ratio = $(this).width() / width_item;
                        var new_height = Math.round($(this).height() / ratio);
                        $(this).height(new_height).width(width_item);
                    }
                });

                if (slid_vert) {
                    var height_max = h_perso;

                    $('ul#fa_ticker_content li').each(function() {
                        if ($(this).height() > height_max) {
                            height_max = $(this).height();
                        }
                    });

                    $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
                    $('ul#fa_ticker_content li').height(height_max);
                }


                $('#fa_ticker_content').jcarousel({
                    vertical: slid_vert,
                    wrap: 'circular',
                    auto: {
                        switch_ticker.STOP_TIME
                    },
                    auto_direction: auto_dir,
                    scroll: 1,
                    size: {
                        switch_ticker.SIZE
                    },
                    height_max: height_max,
                    animation: {
                        switch_ticker.SPEED
                    }
                });
            } else {
                $('ul#fa_ticker_content li:not(:first)').css('display', 'none');
                $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
            }
        });
        //]]>
    </script>
    <!-- END switch_ticker_new -->

    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() {
            <!-- BEGIN switch_enable_pm_popup -->
            pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
            if (pm != null) {
                pm.focus();
            }
            <!-- END switch_enable_pm_popup -->
            <!-- BEGIN switch_report_popup -->
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            if (report != null) {
                report.focus();
            }
            <!-- END switch_report_popup -->
            <!-- BEGIN switch_ticker -->
            $(document).ready(function() {
                Ticker.start({
                    height: {
                        switch_ticker.HEIGHT
                    },
                    spacing: {
                        switch_ticker.SPACING
                    },
                    speed: {
                        switch_ticker.SPEED
                    },
                    direction: '{switch_ticker.DIRECTION}',
                    pause: {
                        switch_ticker.STOP_TIME
                    }
                });
            });
            <!-- END switch_ticker -->
        });

        <!-- BEGIN switch_login_popup -->
        var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {
                LOGIN_POPUP_WIDTH
            },
            logInPopUpHeight = {
                LOGIN_POPUP_HEIGHT
            },
            logInBackgroundResize = true,
            logInBackgroundClass = false;

        $(document).ready(function() {
            $(window).resize(function() {
                var windowWidth = document.documentElement.clientWidth;
                var popupWidth = $("#login_popup").width();
                var mypopup = $("#login_popup");

                $("#login_popup").css({
                    "left": windowWidth / 2 - popupWidth / 2
                });
            });
        });
        <!-- END switch_login_popup -->
        //]]>
    </script>

    {GREETING_POPUP}

    <style type="text/css">
        #page-footer,
        div.navbar,
        div.navbar ul.linklist {
            display: block !important;
        }

        ul.linklist li.rightside,
        ul.linklist li.rightside a.copyright {
            display: inline !important;
        }

        < !-- BEGIN switch_ticker_new -->.jcarousel-skin-tango .jcarousel-item {
            text-align: center;
            width: 10px;
        }

        .jcarousel-skin-tango .jcarousel-item-horizontal {
            margin-right: {
                switch_ticker.SPACING
            }
            px;
        }

        .jcarousel-skin-tango .jcarousel-item-vertical {
            margin-bottom: {
                switch_ticker.SPACING
            }
            px;
        }

        < !-- END switch_ticker_new -->
    </style>

    {HOSTING_JS}

    <!-- BEGIN google_analytics_code -->
    <script type="text/javascript">
        //<![CDATA[
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', '{G_ANALYTICS_ID}', 'auto');
        <!-- BEGIN google_analytics_code_bis -->
        ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
        <!-- END google_analytics_code_bis -->
        ga('send', 'pageview');
        <!-- BEGIN google_analytics_code_bis -->
        ga('bis.send', 'pageview');
        <!-- END google_analytics_code_bis -->
        //]]>
    </script>
    <!-- END google_analytics_code -->

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</head>

<body>
    {JAVASCRIPT}
    <div style="display:none">{GENERATED_NAV_BAR}</div>
    <div id="topbar">
        <div class="equinies"><i class="fas fa-leaf" style="margin-right:5px;"></i> <a href="http://equinies.forumactif.com/">Equinies</a>
            <div class="sub-header-path">{NAV_CAT_DESC}</div>
        </div>
        <div class="nav-center"><a href="http://equinies.forumactif.com/">Index</a> <a href="http://equinies.forumactif.com/c1-categorie-1">Catégories</a></div>
        <!-- BEGIN switch_user_logged_in -->
        <div class="nav-right">
            <a href="/search"><i class="fas fa-search"></i></a>
            <a href="/"><i class="fas fa-bell"></i></a>
            <a href="/privmsg?folder=inbox"><i class="fas fa-envelope"></i></a>
            <button class="nav-button"><i class="fas fa-bars"></i></button>
          <div class="nav-button-content"><a href="{U_SEARCH_NEW}">Voir les derniers messages</a>
            <a href="{U_SEARCH_SELF}">Voir ses messages</a>
            <a href="{U_MARK_READ}">Marquer tous les forums comme lus</a></div>
          <script>
document.querySelector(".nav-button").onclick = function() {
document.querySelector(".nav-button-content").style.display=(window.getComputedStyle(document.querySelector('.nav-button-content')).display=='none') ? "block" : "none";
}
</script>
      </div>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_user_logged_out -->
        <div class="nav-right">
            <a href="/search"><i class="fas fa-search"></i></a>
            <a href="/login"><i class="fas fa-sign-in-alt"></i></a>
        </div>
        <!-- END switch_user_logged_out -->
        <div class="dropdown">
            <div class="nav-user"></div>
            <div class="dropdown-content1">
                <div class="dropdown-content2 bounceIn">
                    <a id="lien"><i class="fas fa-user"></i>
<script>$("#lien").attr("href", "/u" + _userdata.user_id); </script></a>
                    <a href="/profile?mode=editprofile"><i class="fas fa-cog"></i></a>
                    <a href="/login?logout=1"><i class="fas fa-sign-out-alt"></i></a></div>
            </div>
        </div>
    </div>
    <header>
        <div class="header2">
            <h1>Equinies</h1>
        </div>
    </header>
    <div id="container">
        <!-- BEGIN switch_user_logged_in -->
        <div class="banner">
            <div class="banner-name"></div>
            <div class="banner-links">
              <a href="#"><i class="fas fa-chevron-right"></i><div class="link1">Registre</div></a>
              <a href="#"><i class="fas fa-chevron-right"></i><div class="link2">Répertoire équin</div></a>
              <a href="#"><i class="fas fa-chevron-right"></i><div class="link3">Fiche cavalière</div></a>
              <a href="#"><i class="fas fa-chevron-right"></i><div class="link4">Compte bancaire</div></a></div>
            <div class="banner-stats">
                <div class="banner-element masterTooltip" title="Compte"><i class="fas fa-coins"></i>
                  <div class="element1"></div><span>€</span></div>
                <div class="banner-element masterTooltip" title="Expérience"><i class="fas fa-certificate"></i>
                  <div class="element2"></div><span>XP</span></div>
                <div class="banner-element masterTooltip" title="Crédit(s) de création"><i class="fas fa-plus-circle"></i>
                  <div class="element3"></div><span>CC</span></div>
            </div>
        </div>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_user_logged_out -->
        <div class="banner" style="background-color:#fff;">
            <div class="banner-name">Invité</div>
            <div class="banner-links"></div>
            <div class="banner-stats"></div>
        </div>
        <!-- END switch_user_logged_out -->
        <div id="wrapper">

[foxies]

UP

[foxies]

UP

[foxies]

UP

[Walt]

Bonsoir,

Je vais vous demander un petit récapitulatif de votre demande, pour être sûr d'avoir bien saisi. Vous avez créé un bandeau en haut du forum qui affiche certaines infos que le script va chercher dans le profil de l'utilisateur ? Pourquoi ne procédez-vous pas de la même manière avec les autres champs créé, destinés à recevoir le lien de la présentation et le lien des chevaux ?

Cordialement,
Walt

[foxies]

Bonsoir et merci de vous intéresser à mon soucis

Vous avez bien résumé la chose. J'ai testé ce que vous dites en renseignant dans mon profil, au champs Lien répertoire équin, ceci :

Code:

<a href="http://equinies.forumactif.com/t2-sujet-1#23">Registre</a>

pour que cela s'affiche correctement sur le bandeau vu que normalement le JS que j'utilise récupère le html. Mais ça ne fonctionne pas car cela s'affiche comme tel :

Code:

<a href="http://equinies.forumactif.com/t2-sujet-1#23">Registre</a>

au lieu de

Code:

Registre

Je précise qu'une partie du script JS a subi quelques modifications (pour un affichage moins saccadé des divers éléments) :

Code:

$(function () {
    if (_userdata.user_id > -1) {
        $("body").append("<div id='loadProfil'></div>");

        // Infos du profil
        $("#loadProfil").load("/u" + _userdata.user_id + " #wrapper", function () {
            localStorage.setItem('header2', $("#loadProfil #field_id1 .field_uneditable").html());
            localStorage.setItem('element1', $("#loadProfil #field_id6 .field_uneditable").html());
            localStorage.setItem('element2', $("#loadProfil #field_id2 .field_uneditable").html());
            localStorage.setItem('element3', $("#loadProfil #field_id3 .field_uneditable").html());
            localStorage.setItem('link1', $("#loadProfil #field_id4 .field_uneditable").html());
            $("div#loadProfil").remove();

            setDataProfil();
        });

        // Notif MP
        $.get('/privmsg?folder=inbox', function (data) {
            var MP = $(data).find('dl.icon[style*="https://2img.net/i/fa/modernbb/topic_unread.png"]').length;
            localStorage.setItem('nb_mp', MP);
            setNbMpNotif();
        });

        // Notif remove ()
        init_replace_notif_unread();
    };
});

function setDataProfil() {
    $(".header2").html(localStorage.getItem('header2'));
    $(".element1").html(localStorage.getItem('element1'));
    $(".element2").html(localStorage.getItem('element2'));
    $(".element3").html(localStorage.getItem('element3'));
    $(".link1").html(localStorage.getItem('link1'));
    $('.nav-user').html(_userdata.avatar);
    $('.banner-name').html(_userdata.username);
}

[...]

[Walt]

A quel élément correspond le champ "Lien répertoire équin" dans votre script (#field_id1, #field_id2 ...) ?

A mon avis il serait plus simple d'indiquer simplement le lien (http://equinies.forumactif.com/t2-sujet-1#23) dans le champ, et d'en faire un lien cliquable dans le script.

Cordialement,
Walt

[foxies]

Il correspond à #field_id4.

C'est ce que je me suis dis en postant ce sujet, mais je ne sais pas comment le rendre cliquable dans le script justement

[Walt]

Si le champ du profil contient effectivement un lien, il suffit de modifier le code ainsi pour que ce lien s'affiche en HTML :

Code:

$(function () {
    if (_userdata.user_id > -1) {
        $("body").append("<div id='loadProfil'></div>");
 
        // Infos du profil
        $("#loadProfil").load("/u" + _userdata.user_id + " #wrapper", function () {
            localStorage.setItem('header2', $("#loadProfil #field_id1 .field_uneditable").html());
            localStorage.setItem('element1', $("#loadProfil #field_id6 .field_uneditable").html());
            localStorage.setItem('element2', $("#loadProfil #field_id2 .field_uneditable").html());
            localStorage.setItem('element3', $("#loadProfil #field_id3 .field_uneditable").html());
            localStorage.setItem('link1', $("#loadProfil #field_id4 .field_uneditable").html());
            $("div#loadProfil").remove();
 
            setDataProfil();
        });
 
        // Notif MP
        $.get('/privmsg?folder=inbox', function (data) {
            var MP = $(data).find('dl.icon[style*="https://2img.net/i/fa/modernbb/topic_unread.png"]').length;
            localStorage.setItem('nb_mp', MP);
            setNbMpNotif();
        });
 
        // Notif remove ()
        init_replace_notif_unread();
    };
});
 
function setDataProfil() {
    $(".header2").html(localStorage.getItem('header2'));
    $(".element1").html(localStorage.getItem('element1'));
    $(".element2").html(localStorage.getItem('element2'));
    $(".element3").html(localStorage.getItem('element3'));
    $(".link1").html('<a href="' + localStorage.getItem('link1') + '" title="Registre">Registre</a>');
    $('.nav-user').html(_userdata.avatar);
    $('.banner-name').html(_userdata.username);
}

Pensez à vider votre local storage afin de tester, car il contiendra toujours une balise HTML.

Cordialement,
Walt

[foxies]

Bonjour,

Je ne sais pas comment vider mon local storage

Votre code fonctionne, merci ! Malgré tout, je voudrais savoir s'il existe un moyen de supprimer le délai d'affichage de ces éléments (les liens "Registre", "Répertoire équin", etc. en l’occurrence) sur le forum. En effet, j'ai déjà rencontré ce souci avec les autres éléments récupérés du profil (entre autre : le header personnalisé, le nombre d'XP, etc.) qui mettaient du temps à charger mais on m'avait donné une solution sur un autre forum d'entraide en me donnant le JS que j'utilise actuellement. Le voici ci-dessous en entier (avec la dernière modification link1, 2, 3 et 4 pour faire apparaître les différents liens du bandeau). Même en reprenant la même "technique", il y a ce délai qui est embêtant.

Code:

$(function () {
    if (_userdata.user_id > -1) {
        $("body").append("<div id='loadProfil'></div>");
 
        // Infos du profil
        $("#loadProfil").load("/u" + _userdata.user_id + " #wrapper", function () {
            localStorage.setItem('header2', $("#loadProfil #field_id1 .field_uneditable").html());
            localStorage.setItem('element1', $("#loadProfil #field_id6 .field_uneditable").html());
            localStorage.setItem('element2', $("#loadProfil #field_id2 .field_uneditable").html());
            localStorage.setItem('element3', $("#loadProfil #field_id3 .field_uneditable").html());
            localStorage.setItem('link1', $("#loadProfil #field_id4 .field_uneditable").html());
            localStorage.setItem('link2', $("#loadProfil #field_id8 .field_uneditable").html());
            localStorage.setItem('link3', $("#loadProfil #field_id9 .field_uneditable").html());
            localStorage.setItem('link4', $("#loadProfil #field_id5 .field_uneditable").html());
            $("div#loadProfil").remove();
 
            setDataProfil();
        });
 
        // Notif MP
        $.get('/privmsg?folder=inbox', function (data) {
            var MP = $(data).find('dl.icon[style*="https://2img.net/i/fa/modernbb/topic_unread.png"]').length;
            localStorage.setItem('nb_mp', MP);
            setNbMpNotif();
        });
 
        // Notif remove ()
        init_replace_notif_unread();
    };
});
 
function setDataProfil() {
    $(".header2").html(localStorage.getItem('header2'));
    $(".element1").html(localStorage.getItem('element1'));
    $(".element2").html(localStorage.getItem('element2'));
    $(".element3").html(localStorage.getItem('element3'));
    $(".link1").html('<a href="' + localStorage.getItem('link1') + '" title="Registre">Registre</a>');
    $(".link2").html('<a href="' + localStorage.getItem('link2') + '" title="Registre">Répertoire équin</a>');
    $(".link3").html('<a href="' + localStorage.getItem('link3') + '" title="Registre">Fiche cavalière</a>');
    $(".link4").html('<a href="' + localStorage.getItem('link4') + '" title="Registre">Compte bancaire</a>');
    $('.nav-user').html(_userdata.avatar);
    $('.banner-name').html(_userdata.username);
}

function setNbMpNotif() {
    var MP = localStorage.getItem('nb_mp');
    if (MP) {
        $('.nav-right').find('a[href="/privmsg?folder=inbox"]').append('<div class="mp">' + MP + '</div>');
    }
}

function init_replace_notif_unread() {
    var n = '#notif_unread';
    if ($(n).length > 0) {
        replace_notif_unread($(n));
        localStorage.setItem('nb_notif', $(n).text());
        $("body").on('DOMSubtreeModified', n, function () {
            localStorage.setItem('nb_notif', $(this).text());
            replace_notif_unread($(this));
        });
    } else {
        window.setTimeout(init_replace_notif_unread, 10);
    }
}

function replace_notif_unread(o) { o.html(o.html().replace(/[\(\)]/g, "")); }

function setNbNotif() {
    var nbNotif = localStorage.getItem('nb_notif');
    $("#notif_unread").html(nbNotif);
    if(parseInt(nbNotif) > 0 && ! $('#fa_notifications').hasClass('unread')) {
        $('#fa_notifications').addClass('unread');
    }
}

Voici mon template :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>

<head>
    <link href="https://fonts.googleapis.com/css?family=Poppins|Lora" rel="stylesheet">
    <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
    <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <!-- BEGIN switch_compat_meta -->
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    <!-- END switch_compat_meta -->
    <!-- BEGIN switch_canonical_url -->
    <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
    <!-- END switch_canonical_url -->
    {META_FAVICO} {META} {META_FB_LIKE}
    <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS}
    <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
    <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

    <!-- BEGIN switch_fb_login -->
    <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
    <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
    <!-- END switch_fb_login -->

    <!-- BEGIN switch_ticker -->
    <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
    <!-- END switch_ticker -->

    <!-- BEGIN switch_ticker_new -->
    <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        /* Definir le sens de direction en fonction du panneau admin */
        var tickerDirParam = "{switch_ticker.DIRECTION}";
        var slid_vert = false;
        var auto_dir = 'next';
        var h_perso = parseInt({
            switch_ticker.HEIGHT
        });

        switch (tickerDirParam) {
            case 'top':
                slid_vert = true;
                break;

            case 'left':
                break;

            case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;

            case 'right':
                auto_dir = 'prev';
                break;

            default:
                slid_vert = true;
        }

        $(document).ready(function() {

            $('#fa_ticker_content').css('display', 'block');

            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {
                switch_ticker.SIZE
            });

            if (width_max > 0) {
                $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function() {
                    if ($(this).width() > width_item) {
                        var ratio = $(this).width() / width_item;
                        var new_height = Math.round($(this).height() / ratio);
                        $(this).height(new_height).width(width_item);
                    }
                });

                if (slid_vert) {
                    var height_max = h_perso;

                    $('ul#fa_ticker_content li').each(function() {
                        if ($(this).height() > height_max) {
                            height_max = $(this).height();
                        }
                    });

                    $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
                    $('ul#fa_ticker_content li').height(height_max);
                }


                $('#fa_ticker_content').jcarousel({
                    vertical: slid_vert,
                    wrap: 'circular',
                    auto: {
                        switch_ticker.STOP_TIME
                    },
                    auto_direction: auto_dir,
                    scroll: 1,
                    size: {
                        switch_ticker.SIZE
                    },
                    height_max: height_max,
                    animation: {
                        switch_ticker.SPEED
                    }
                });
            } else {
                $('ul#fa_ticker_content li:not(:first)').css('display', 'none');
                $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
            }
        });
        //]]>
    </script>
    <!-- END switch_ticker_new -->

    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() {
            <!-- BEGIN switch_report_popup -->
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            if (report != null) {
                report.focus();
            }
            <!-- END switch_report_popup -->
            <!-- BEGIN switch_ticker -->
            $(document).ready(function() {
                Ticker.start({
                    height: {
                        switch_ticker.HEIGHT
                    },
                    spacing: {
                        switch_ticker.SPACING
                    },
                    speed: {
                        switch_ticker.SPEED
                    },
                    direction: '{switch_ticker.DIRECTION}',
                    pause: {
                        switch_ticker.STOP_TIME
                    }
                });
            });
            <!-- END switch_ticker -->
        });

        <!-- BEGIN switch_login_popup -->
        var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {
                LOGIN_POPUP_WIDTH
            },
            logInPopUpHeight = {
                LOGIN_POPUP_HEIGHT
            },
            logInBackgroundResize = true,
            logInBackgroundClass = false;

        $(document).ready(function() {
            $(window).resize(function() {
                var windowWidth = document.documentElement.clientWidth;
                var popupWidth = $("#login_popup").width();
                var mypopup = $("#login_popup");

                $("#login_popup").css({
                    "left": windowWidth / 2 - popupWidth / 2
                });
            });
        });
        <!-- END switch_login_popup -->
        //]]>
    </script>

    {GREETING_POPUP}

    <style type="text/css">
        #page-footer,
        div.navbar,
        div.navbar ul.linklist {
            display: block !important;
        }

        ul.linklist li.rightside,
        ul.linklist li.rightside a.copyright {
            display: inline !important;
        }

        < !-- BEGIN switch_ticker_new -->.jcarousel-skin-tango .jcarousel-item {
            text-align: center;
            width: 10px;
        }

        .jcarousel-skin-tango .jcarousel-item-horizontal {
            margin-right: {
                switch_ticker.SPACING
            }
            px;
        }

        .jcarousel-skin-tango .jcarousel-item-vertical {
            margin-bottom: {
                switch_ticker.SPACING
            }
            px;
        }

        < !-- END switch_ticker_new -->
    </style>

    {HOSTING_JS}

    <!-- BEGIN google_analytics_code -->
    <script type="text/javascript">
        //<![CDATA[
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', '{G_ANALYTICS_ID}', 'auto');
        <!-- BEGIN google_analytics_code_bis -->
        ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
        <!-- END google_analytics_code_bis -->
        ga('send', 'pageview');
        <!-- BEGIN google_analytics_code_bis -->
        ga('bis.send', 'pageview');
        <!-- END google_analytics_code_bis -->
        //]]>
    </script>
    <!-- END google_analytics_code -->

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
    <link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</head>

<body>
    {JAVASCRIPT}
    <div style="display:none">{GENERATED_NAV_BAR}</div>
    <div id="topbar">
        <div class="equinies"><i class="fas fa-leaf" style="margin-right:5px;"></i> <a href="http://equinies.forumactif.com/">Equinies</a>
            <div class="sub-header-path">{NAV_CAT_DESC}</div>
        </div>
        <div class="nav-center"><a href="http://equinies.forumactif.com/">Index</a> <a href="http://equinies.forumactif.com/c1-categorie-1">Catégories</a></div>
        <!-- BEGIN switch_user_logged_in -->
        <div class="nav-right">
            <a href="/search"><i class="fas fa-search"></i></a>
            <a href="/"><i class="fas fa-bell"></i></a>
            <a href="/privmsg?folder=inbox"><i class="fas fa-envelope"></i></a>
            <button class="nav-button"><i class="fas fa-bars"></i></button>
          <div class="nav-button-content"><a href="{U_SEARCH_NEW}">Voir les derniers messages</a>
            <a href="{U_SEARCH_SELF}">Voir ses messages</a>
            <a href="{U_MARK_READ}">Marquer tous les forums comme lus</a></div>
          <script>
document.querySelector(".nav-button").onclick = function() {
document.querySelector(".nav-button-content").style.display=(window.getComputedStyle(document.querySelector('.nav-button-content')).display=='none') ? "block" : "none";
};
setNbMpNotif();
setNbNotif();
</script>
      </div>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_user_logged_out -->
        <div class="nav-right">
            <a href="/search"><i class="fas fa-search"></i></a>
            <a href="/login"><i class="fas fa-sign-in-alt"></i></a>
        </div>
        <!-- END switch_user_logged_out -->
        <div class="dropdown">
            <div class="nav-user"><script>document.write(_userdata.avatar)</script></div>
            <div class="dropdown-content1">
                <div class="dropdown-content2 bounceIn">
                    <a id="lien"><i class="fas fa-user"></i>
<script>$("#lien").attr("href", "/u" + _userdata.user_id); </script></a>
                    <a href="/profile?mode=editprofile"><i class="fas fa-cog"></i></a>
                    <a href="/login?logout=1"><i class="fas fa-sign-out-alt"></i></a></div>
            </div>
        </div>
    </div>
    <header>
        <div class="header2">
            <script>document.write(localStorage.getItem('header2'))</script>
        </div>        
        <h1>Equinies</h1>
    </header>
    <div id="container">
        <!-- BEGIN switch_user_logged_in -->
        <div class="banner">
            <div class="banner-name"><script>document.write(_userdata.username)</script></div>
            <div class="banner-links">
              <div class="link1"><script>document.write(localStorage.getItem('link1'))</script></div>
              <div class="link2"><script>document.write(localStorage.getItem('link2'))</script></div>
              <div class="link3"><script>document.write(localStorage.getItem('link3'))</script></div>
              <div class="link4"><script>document.write(localStorage.getItem('link4'))</script></div></div>
            <div class="banner-stats">
                <div class="banner-element masterTooltip" title="Compte"><i class="fas fa-coins"></i>
                  <div class="element1"><script>document.write(localStorage.getItem('element1'))</script></div><span>€</span></div>
                <div class="banner-element masterTooltip" title="Expérience"><i class="fas fa-certificate"></i>
                  <div class="element2"><script>document.write(localStorage.getItem('element2'))</script></div><span>XP</span></div>
                <div class="banner-element masterTooltip" title="Crédit(s) de création"><i class="fas fa-plus-circle"></i>
                  <div class="element3"><script>document.write(localStorage.getItem('element3'))</script></div><span>CC</span></div>
            </div>
        </div>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_user_logged_out -->
        <div class="banner" style="background-color:#fff;">
            <div class="banner-name">Invité</div>
            <div class="banner-links"></div>
            <div class="banner-stats"></div>
        </div>
        <!-- END switch_user_logged_out -->
        <div id="wrapper">

J'ai également fait deux screens pour bien visualiser le problème :



Il y a un temps plus long avant que les mots cliquables n’apparaisse et avant cela, seul les liens sont visibles, ce qui n'est pas du tout esthétique comme vous pouvez le constater.

[foxies]

Petit UP

[foxies]

UP