Impossible de prévisualiser un message qui contient du code HTML avec des onglets JS

[.1019]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour !

Je me permets de vous contacter au sujet d'un code que j'ai écrit parce que je sèche.

J'ai codé une fiche en HTML, que mes utilisateurs peuvent utiliser. J'ai fait toutes les démarches pour que le HTML fonctionne et ça fonctionne en effet, donc ça, voilà, aucun problème.

Cette fiche contient des onglets. Comme il est impossible d'utiliser des fonctions JS dans un message, j'ai codé un script javascript qui vérifie et modifie le code dans les messages. Je l'ai placé dans un template parce que j'avais besoin qu'il se lance en premier. Les onglets fonctionnent parfaitement sur le sujet en lui-même.

Cependant, quand j'appuie sur "prévisualiser", la prévisualisation s'affiche 1 ou 2 secondes, puis je retourne à la page d'envoi de message sans prévisualisation. J'ai essayé de débugguer un petit peu mon JavaScript mais impossible de comprendre d'où ça vient.
C'est bien lié au script d'onglets, puisque sans lui, la prévisualisation est possible.

J'ai remarqué que ça arrivait dans un script de ForumActif, dans ces fonctions là (notamment la g(), la e() ; j'ai pas eu l'impression que ça arrive dans la condition "!t.hasOwnProperty("context")" etc) :



Vous sauriez m'aider ?


Voici mon code :

CODE HTML

Code:

<div class="tabs-container fiche-perso">
   <div class="tabs-bar c-bd m-padd neutral-b">
       <button class="c-bd-accClr tablinks s-padd u-sls-title js_perso-01 defaultOpen">
           Carcasse
       </button>
       <button class="c-bd-accClr tablinks s-padd u-sls-title js_perso-02">
           Liens
       </button>
       <button class="c-bd-accClr tablinks s-padd u-sls-title js_perso-03">
           Recherches
       </button>
   </div>
   <div class="c-bd l-padd neutral-b perso-01 tabcontent">
       <div class="img-line pres-title">
           <img src="https://fakeimg.pl/60/" class="rond-image" />
       </div>
       <span class="u-sls-title blue">Prénom Nom - Âge - Occupation - alignement</span>
       <hr />
       <ol>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
           <li>Texte</li>
       </ol>
   </div>
   <div class="c-bd l-padd neutral-b perso-02 tabcontent">
       <b class="u-sls-title blue">Présent</b>
       <div class="links-perso"><b><a href="#">www -- titre du rp</a> •  Avec/ @pseudo</b>
       <b><a href="#">www -- titre du rp</a> •  Avec/ @pseudo</b></div>
       <b class="u-sls-title blue">Passé</b>
       <div class="links-perso"><b><a href="#">www -- titre du rp</a> •  Avec/ @pseudo</b>
       <b><a href="#">www -- titre du rp</a> •  Avec/ @pseudo</b></div>
       <b class="u-sls-title blue">Avenir</b>
       <div class="links-perso"><b class="clr">À VENIR</b><b> •  Avec/ @pseudo</b></div>
       <fieldset class="m-padd c-bd"><legend class="u-sls-title blue m-padd">Nom prénom</legend><b>Nature du lien •</b> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</fieldset>
       <fieldset class="m-padd c-bd"><legend class="u-sls-title blue m-padd">Nom prénom</legend><b>Nature du lien •</b> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</fieldset>
   </div>
   <div class="c-bd l-padd neutral-b perso-03 tabcontent">
       <fieldset class="m-padd c-bd"><legend class="u-sls-title blue m-padd">Nom prénom</legend><b>Nature du lien •</b> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</fieldset>
       <fieldset class="m-padd c-bd"><legend class="u-sls-title blue m-padd">Nom prénom</legend><b>Nature du lien •</b> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</fieldset>
       <fieldset class="m-padd c-bd"><legend class="u-sls-title blue m-padd">Nom prénom</legend><b>Nature du lien •</b> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</fieldset>
   </div>
</div>

CODE CSS

Code:

:root {
    --header: url('https://i.imgur.com/ngqjKOl.jpg');

    --neutral: #fafbfc;
    --neutralDark: #D9D9D9;
    --neutralDarker: #dce3f4;

    --contrast: #171938;
    --contrastLight: #232657;
    --contrastLighter: #c3c8f3;

    --accentClr: #99422C;
    --accentClrDark: #A08682;
    --accentClrDarkTransparent: #A0868266;
    --accentClrLight: #F0EDED;
    --accentClrVar: #45557F;
    --accentClrBluest: #566383;

    --textColor: #1D1D1D;
    --textColorAccent: #4A5161;

    --successColor: #83A35B;

    --border: 1px solid #E5E5E5;

    --shadowBox: 0 0 20px #23265730;

    --xs-padding: 3px;
    --small-padding: 8px;
    --medium-padding: 15px;
    --large-padding: 25px;
    --xlarge-padding: 65px;

    --little-size: 12px;
    --smaller-size: 14px;
    --normal-size: 15px;
    --medium-size: 16px;
    --medium-plus-size: 20px;
    --large-size: 24px;
    --xlarge-size: 26px;
    --title-size: 32px;

    --small-spacing: 0.1em;
    --medium-spacing: 0.15em;
    --large-spacing: 0.2em;

    --font: 'Karla', sans-serif;

    --grp1: #EDC253;
    --grp2: #B53E3E;
    --grp3: #45557F;
    --grp4: #83A35B;

    /* VARIABLES MESSENGER */
    --FAM-pluginBackground: #fafbfc;
    --FAM-chatBackground: #f2f4f9;
    --FAM-textareaBackground: #fafbfc;
    --FAM-msgBackground: #dce3f4;
    --FAM-myMsgBackground: #fafbfc;
    --FAM-quoteBackground: #8a9fd236;

    --FAM-gradient: linear-gradient(-90deg, rgba(250, 251, 252,1) 20%, rgba(250, 251, 252,0) 100%);
    --FAM-gradientTop: linear-gradient(180deg, rgba(242, 244, 249,1) 20%, rgba(242, 244, 249,0) 100%);
    --FAM-gradientBot: linear-gradient(0deg, rgba(242, 244, 249,1) 20%, rgba(242, 244, 249,0) 100%);

    --FAM-border: 1px solid #dce3f4;
    --FAM--shadowBox: 0 0 20px var(--contrastLight);

    --FAM-sleepModeBackground: rgba(255, 255, 255, 0.6);
    --FAM-newMsgAnimation: rgb(0, 0, 0,.3);

    --FAM-accentClr: #4B57C5;
    --FAM-secondClr: #333c92;
    --FAM-fontClr: #232657;
    --FAM-fontLightClr: #484a65;
    --FAM-linkClr: #4B57C5;
    --FAM-titleClr: #171938;
    --FAM-buttonsClr: #171938;

    --FAM-fontSize: 14px;
    --FAM-titleFont: 'Open Sans';
    --FAM-titleSize: 24px;

    --FAM-light: white;
    --FAM-dark: black;

    --FAM-windowSize: 750px;
}

/*** ----------------------------------- ***/
/*** LIENS ET TEXTE -------------------- ***/

/* LIENS DU FORUM --- */
a {
    font-weight: 600;
    text-decoration: none;
    color: var(--textColorAccent);
}

/*liens au survol*/
a:hover {
    color: var(--accentClr);
}

/* Emoji mis par défaut de FA
 * Les réduire les rend moins horribles à voir */
.emojione {
    width: 19px !important
}

/* Retirer margin aux p */
p { margin: 0 }

/* Couleur accentuée dans les paragraphes */
p > span:not(.noClr), .clr {
    color: var(--accentClr);
    font-weight: 700;
}

p > span.blue, span.blue, .blue { color: var(--accentClrVar) }

hr { width: 100%; height: 1px; margin: 0; }
button { color: var(--textColor) }
iframe { border: none; }

/* TITRES DES PAGES --- ***/

/* Utilisé pour des titres de pages */
h1,
h1.page-title {
    color: var(--contrastLight);
    margin: 10px 0 20px;
    font-size: var(--title-size);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/* Utilisé pour des titres de sujets, blogs... */
h2,
.h2 {
    margin: 0;
    font-size: var(--large-size);
    font-weight: 700;
}

/* Utilisé pour des titres de sous-sections, petit encadré, ...*/
h3,
.h3 {
    color: var(--textColorAccent);
    padding-bottom: var(--small-padding);
    margin: 0;
    font-size: var(--medium-plus-size);
    font-weight: bold;
    letter-spacing: var(--small-spacing);
    text-transform: uppercase;
    font-style: italic;
}

.small-title, h4 {
    font-weight: 700;
    font-size: var(--medium-size);
    letter-spacing: var(--small-spacing);
    text-transform: uppercase;
}

.u-sls-title, .presentation ol li::marker {
    text-transform: uppercase;
    letter-spacing: var(--small-spacing);
}

.big-title {
    font-weight: 700;
    color: var(--textColorAccent);
}

.xl-title {
    color: var(--textColorAccent);
    font-size: var(--title-size);
    font-style: italic;
    letter-spacing: var(--large-spacing);
    text-transform: uppercase;
}

/* Lignes autour d'un titre */
.lines {
    display: flex;
    align-items: center;
}

.lines > * {
    flex-shrink: 0;
    padding: 0 var(--small-padding);
}

.lines:after, .lines:before {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--textColor);
}

/*** ----------------------------------- ***/
/*** BLOCS          -------------------- ***/

.neutral-b { background-color: var(--neutral); }
.neutralDrk-b { background-color: var(--neutralDark); }
.accentDrk-b { background-color: var(--accentClrDark); }

.c-bd { border: 1px solid; }
.c-bd-accClr { border: 1px solid var(--accentClr); }

.c-bd ul {
    width: 100%;
    list-style-type: disc;
    padding-left: var(--large-padding);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--medium-padding);
}
.c-bd ul li::marker, .c-bd ul li b { color: var(--accentClr) }
.c-bd ul.blue-marker li::marker { color: var(--accentClrVar) }

.c-bd ol {
    display: flex;
    gap: 0 var(--large-padding);
    flex-wrap: wrap;
}
.c-bd ol li::marker { font-weight: bold; font-style: italic }


/* ONGLETS --- */
.tablinks {
    background: none;
    padding: 0;
}
.tabs-bar {
    display: flex;
    gap: var(--medium-padding);
    align-items: stretch;
    justify-content: center;
}

.tabs-bar .active { font-weight: bold; }

.xs-padd { padding: var(--xs-padding); }
.s-padd { padding: var(--small-padding); }
.m-padd { padding: var(--medium-padding); }
.l-padd { padding: var(--large-padding); }
.xl-padd { padding: var(--xlarge-padding); }

.xs-size { font-size: var(--little-size); }

/* BLOCS POSTS --- *
 * Sujet admin, présentation,... */

.presentation,
.cadre-admin,
.fiche-perso {
    display: grid;
    gap: var(--large-padding);
}
.fiche-perso br:not(.fiche-perso li br, .fiche-perso .links-perso br, .fiche-perso fieldset br, .pres-question br:not(:first-of-type, :last-of-type), .pres-histoire br, .caractere br:not(:first-of-type, :last-of-type)),
.cadre-admin br:not(.main-text span br) { display: none; }

.presentation > div[class*="pres-"][style="display: block;"],
.fiche-perso > div[class*="perso-"][style="display: block;"] {
    display: flex !important;
    justify-items: center;
    gap: var(--medium-padding);
    max-height: 693px;
    align-items: center;
    flex-direction: column;
    overflow: auto;
}
.presentation .tabs-bar { display: grid; grid-template-columns: repeat(2, 1fr) 60px repeat(2, 1fr); }
.presentation > div[class*="pres-"] > * { flex-shrink: 0 }
.presentation h2 { width: 100%; font-size: var(--title-size); text-align: center; }
.presentation h2 em { display: block }
.em-bloc { padding: var(--small-padding) var(--xlarge-padding) }
.pres-title { border-bottom: 1px solid; padding: 0 var(--large-padding) var(--small-padding) }
.pres-question { width: 100%; height: 100px; padding-right: var(--medium-padding); overflow: auto }
.pres-question b { font-style: italic }

.pres-title em {
    font-weight: 700;
    font-size: var(--title-size);
    display: block;
    text-align: center;
}

.caractere {
    column-count: 2;
    column-width: 150px;
    column-gap: var(--large-padding);
    width: 450px;
    text-align: center;
    color: var(--accentClr);
    font-weight: bold;
}

.cadre-admin h2 { font-size: var(--title-size); font-style: italic; text-align: center;  color: var(--accentClrBluest); }
.cadre-admin h3 { font-size: var(--smaller-size); font-style: revert; color: var(--accentClrBluest); margin-top: var(--medium-padding); }
.cadre-admin hr { margin-bottom: var(--medium-padding); }
.img-line { display: flex; flex-wrap: wrap; gap: var(--small-padding) var(--medium-padding); justify-content: center; margin: var(--medium-padding) 0; }

.fiche-perso fieldset b, .fiche-perso b.clr { font-style: italic; color: var(--accentClr) }
.fiche-perso fieldset legend { text-align: center; padding: 0 var(--medium-padding); font-weight: bold; }
.fiche-perso .links-perso { text-align: center; }
.fiche-perso .links-perso a { text-transform: uppercase; color: var(--accentClr) }


CODE JS ("sur toutes les pages")

Code:

function openTab(evt, idDiv) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = evt.currentTarget.closest(".tabs-container").getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = evt.currentTarget.closest(".tabs-container").getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    evt.currentTarget.closest(".tabs-container").querySelector(`#${idDiv}, .${idDiv}`).style.display = "block";
    evt.currentTarget.className += " active";
}


document.addEventListener('DOMContentLoaded', () => {
    let tabsContent = document.querySelectorAll(".defaultOpen");
    tabsContent.forEach((tab) => {
        tab.click();
    })

});

CODE JS (template posting_body)

Code:

{POST_PREVIEW_BOX}


        <script type="text/javascript">
            let allTopicTabs = document.querySelectorAll('*[class*="js_"]');
            if(allTopicTabs) {
                allTopicTabs.forEach((topicTab) => {
                    let className = topicTab.className.split(" ").find(cssClass => cssClass.startsWith("js_"));
                    topicTab.setAttribute("onclick", `openTab(event, "${className.replace("js_", "")}")`);
                });
            }
        </script>

Il manque peut-être deux ou trois classes CSS que j'ai oublié de mettre avec, mais ça devrait être assez fonctionnel pour tester le bug.

Merci !

[Toryudo]

Bonjour !
Effectivement, au moment du "click" sur le .defaultOpen appelé après chargement complet de la page, la page recharge sur une autre page.
Je n'ai pas regardé en détail, je suppose que c'est le fait de cliquer sur un button qui provoque ça dans un autre script qui existe par défaut... en tout cas, pour empêcher le phénomène, il suffit d'ajouter un petit evt.preventDefault(); dans la fonction openTab.
Ainsi, la fonction inconnue qui fait ça n'est plus appelée, et la page n'est plus rechargée !

https://developer.mozilla.org/fr/docs/Web/API/Event/preventDefault

Code:

function openTab(evt, idDiv) {
    evt.preventDefault();

    // Declare all variables
    var i, tabcontent, tablinks;
 
    // Get all elements with class="tabcontent" and hide them
    tabcontent = evt.currentTarget.closest(".tabs-container").getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
 
    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = evt.currentTarget.closest(".tabs-container").getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
 
    // Show the current tab, and add an "active" class to the button that opened the tab
    evt.currentTarget.closest(".tabs-container").querySelector(`#${idDiv}, .${idDiv}`).style.display = "block";
    evt.currentTarget.className += " active";
}
 
 
document.addEventListener('DOMContentLoaded', () => {
    let tabsContent = document.querySelectorAll(".defaultOpen");
    tabsContent.forEach((tab) => {
        tab.click();
    })
 
});

[.1019]

Bonjour !

Malheureusement ça ne fonctionne toujours pas ... c'est dommage, j'ai vraiment cru que ça réglerait le soucis haha, c'était pas bête du tout comme hypothèse.

EDIT : on me dit dans l'oreillette que ça devrait fonctionner ; je vais réessayer quand je serais sur PC, je reposterai s'il faut

[Toryudo]

Sinon, plus sûr, il y a toujours moyen de remplacer les "button" par des "span" ou des "div" dans le code du message.
Le problème vient vraiment du fait que ce soit des button.

[.1019]

Rebonjour !

En effet c'était bien ça ! sur PC j'ai pu régler ce que j'avais fait.
Le evt.preventDefault() a bien fonctionné. C'est bon à savoir !!

Merci énormément !!