WordPress : Jquery ne s’affiche pas sur la page d’accueil

*Mise à jour!

Le tableau s’affiche, mais uniquement dans le navigateur Chrome, pas dans les autres navigateurs. Essayé dans Safari et Opera et n’a pas vu le tableau à l’écran. S’il vous plaît aidez-moi! Doit être compatible avec tous les navigateurs si possible.

message d’origine :

J’essaie de charger une table en extrayant des données d’une API pour afficher les prix des crypto-monnaies. Cela fonctionne bien lorsque je le charge à partir d’une page html, mais ne fonctionnera pas dans wordpress. J’utilise la bibliothèque Tabulator qui dépend actuellement de Jquery et Jquery UI (widgets Jquery UI pour être précis.) J’ai également essayé de mettre ‘json2’ dans ce code mais il n’apparaît pas du tout sur la page, mais est là quand je regarde la source de la page. J’ajoute le Jquery via le plugin Scripts n Styles. J’ai même changé le code pour qu’il n’y ait pas de conflit, j’ai également essayé de changer tous les signes dollar en « Jquery » mais cela n’a pas fonctionné, et j’ai essayé de charger mon propre jquery, et j’ai essayé d’ajouter jquery-ui-core comme dépendance à ‘tabulatorlink’ aussi , version mais pas encore de chance. Toute contribution est très appréciée ! Des étapes claires sur les actions à entreprendre seraient préférables car je suis encore assez novice dans ce domaine.

Lien vers la page ici.

Le code dans le fichier functions.php du thème enfant est le suivant :

 function add_theme_scripts() {
wp_register_style( 'tabulator', 'https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.3/css/tabulator.min.css' );
wp_enqueue_style('tabulator');

wp_deregister_script('jquery');
wp_register_script('jquery',
 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js',
     array() , '3.2.1', true);
wp_enqueue_script( 'jquery');
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core',  'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', array('jquery') , '1.12.1', true);
wp_enqueue_script('jquery-ui-widget');
wp_register_script( 'tabulatorlink', 'https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.3/js/tabulator.min.js', array('jquery', 'jquery-ui-core', 'jquery-ui-widget'), false, true);
wp_enqueue_script('tabulatorlink');
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Le code Jquery personnalisé pour la table est le suivant : (ajouté via Scripts n Styles)

<script>

(function($) {
    //create Tabulator on DOM element with id "example-table
    $(document).ready(function() {
$("#example-table").tabulator({
    height:1000,// set height of table, this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    responsiveLayout:true,
    layout:"fitColumns", //fit columns to width of table (optional)
    paginationSize:100,
    columns:[ //Define Table Columns
        {title:"Rank", field:"rank", align:"center", width:70},
        {title:"Name", field:"name", headerFilter:"input", width:130},
        {title:"Symbol", field:"symbol", headerFilter:"input", width:80},
        {title:"Price (USD)", field:"price_usd", formatter:"money", width:110},
        {title:"24hr Volume (USD)", field:"24h_volume_usd", width:155},
        {title:"Market Cap (USD)", field:"market_cap_usd", formatter:"money", width:150},
        {title:"Available Supply", field:"available_supply", width:140},
        {title:"% Change 1hr", field:"percent_change_1h", width:130},
        {title:"% Change 24hr", field:"percent_change_24h", width:130},
        {title:"% Change 7d", field:"percent_change_7d", width:130},
    ],
    rowClick:function(e, row){ //trigger an alert message when the row is clicked
        alert("Individual coin pages coming soon");
    },
});


//load sample data into the table
$("#example-table").tabulator("setData", "https://api.coinmarketcap.com/v1/ticker/?start=0&limit=1500");



Tabulator.extendExtension("ajax", "defaultConfig", {
    type:"POST",
    contentType : "application/json; charset=utf-8"


});

$("#example-table").tabulator({
    ajaxURL:"https://api.coinmarketcap.com/v1/ticker/?start=0&limit=1500", //ajax URL
    ajaxParams:{key1:"value1", key2:"value2"}, //ajax parameters
    ajaxConfig:"POST", //ajax HTTP request type
});


});

})( jQuery );


</script>

Solution n°1 trouvée

le code jquery de votre site en direct est (manquant

(function($){