web-dev-qa-db-fra.com

Jquery ne s'affiche pas dans la page d'accueil

* Mise à jour!

Le tableau s'affiche, mais uniquement dans le navigateur Chrome, pas avec les autres navigateurs. J'ai essayé dans Safari et Opera et je n'ai pas vu le tableau à l'écran. S'il vous plaît aider! Nécessité d'être compatible avec tous les navigateurs, si possible.

message d'origine:

J'essaie de charger une table extrayant des données d'une API pour afficher les prix des crypto-devises. Cela fonctionne quand 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 de Jquery UI (les widgets de Jquery UI doivent être spécifiques.) J'ai essayé d'enqueing "json2" dans ce code également mais il n'apparaît pas du tout sur la page, mais est présent lorsque je visualise le code source de la page. J'ajoute le Jquery via le plugin Scripts n Styles. J'ai même changé le code en aucun conflit, j'ai aussi 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 essayé d'ajouter jquery-ui-core comme dépendance à 'tabulatorlink' , version mais pas de chance pour le moment. Toute entrée est très appréciée! Des mesures claires sur les actions à prendre seraient préférables car je suis encore relativement novice dans ce domaine.

Lien de 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>
jqueryajaxchild-themetablejquery-ui
1
tcadeoti

votre site en ligne code jquery ( manquant

(function($) {

1
Tarang koradiya