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

Publié par Jean-Michel le

*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.

Lire également:  Dirigez un élément de portefeuille vers le projet unique et désactivez le thème wordpress de script ajax

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

Lire également:  Changement de couleur d'arrière-plan du menu principal dans le site Web WordPress

(function($){

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *