Discussion :

[Aklain52]

Bonjour à tous, j'aurais besoin d'un peu d'aide.

Mes recherches sur les moteurs de recherches et différents forum ayant été infructueuses, je me permet de poster ici.

Voilà, via un appel AJAX de JQUERY sur une page PHP, j'insère du code HTML dans ma page.
Le tableau qui en résulte perd tout style CSS (Le CSS de la page qui l'accueil ne lui est pas appliqué).
Pourtant si je fait un "include" via PHP cela fonctionne parfaitement.

Voici mon code js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
   function affichageTableau(mode){
        $.ajax({
            url: 'elements/tableau_suivi.php',
            type: 'POST',
            data: 'mode='+mode,
            dataType: 'html',
            success: function(code_html, statut){
                $('#conteneur').html(code_html);               
            }
        });
    }

Je suis un peu perdu, merci pour votre aide.

[SpaceFrog]

regarde ton code source généré après ton ajax, je suis prêt à parier qu'il a perdu les class ...

[Aklain52]

regarde ton code source généré après ton ajax, je suis prêt à parier qu'il a perdu les class ...

Bonjour et merci SpaceFrog mais les class sont bien conservées.
Par exemple, utilisant Bootstrap, j'utilise la class .table-dark qui est bien présente et appliquée (liée au fichier _tables.scss).
Par contre, les fichiers .css ne s'appliquent pas au code importé par JS alors qu'ils sont bien présent dans le code source au niveau du head.

[SpaceFrog]

Tu es sur que la structure est conservée ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('#conteneur').html(code_html);

il n'y a pas un élément intermédiaire entre le conteneur et la table qui aurait disparu ??
si les class et la structure sont conservés le css doit s'appliquer
si il ne s'applique pas c'est que les sélecteurs ne visent plus les bon éléments ..

[Toufik83]

Salut,

...dans le code source au niveau du head.

Quand SpaceFrog a dit "regarde ton code source", il voulait dire le code source de la page et pas celui qui est dans le head.
pour voir le code source appuie sur CTRL+U pour chrome et firefox, ou CTRL+MAJ+I pour opéra, ou bien via un clique droit n'importe où dans le document, puis clique sur Inspecter

[Aklain52]

Salut,

Quand SpaceFrog a dit "regarde ton code source", il voulait dire le code source de la page et pas celui qui est dans le head.
pour voir le code source appuie sur CTRL+U pour chrome et firefox, ou CTRL+MAJ+I pour opéra, ou bien via un clique droit n'importe où dans le document, puis clique sur Inspecter

C'est bien dans le code source que j'ai fouillé avec Inspecter mais aussi avec Click droit Code source de la page.

@SpaceFrog

Je pense me rapprocher de la réponse.
J'utilise DataTables pour mettre en forme mes tableaux et profiter de boutons de navigation, d'une fonction rechercher et du choix du nombre d'éléments à afficher.
Toutes ces fonctions ont disparu...

Pour intégrer ces fonctions, j'ai en bas de page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="DataTables/datatables.min.js"></script>

Du coup, il semble que ce soit ce code javascript qui ne s'applique pas à mon tableau importé par JS...