web-dev-qa-db-ja.com

ホームページにJqueryが表示されない

*更新！

表はChromeブラウザにのみ表示され、他のブラウザには表示されません。サファリとオペラで試してみましたが、画面に表が表示されませんでした。助けてください！可能であれば、すべてのブラウザと互換性がある必要があります。

元の投稿：

暗号通貨の価格を表示するために、APIからデータを取得するテーブルをロードしようとしています。 HTMLページからうまくロードしてもうまくいきますが、ワードプレスではうまくいきません。私は現在JqueryとJquery UI（具体的にはJquery UIウィジェット）に依存している Tabulator ライブラリーを使用しています。このコードもページには表示されませんが、ページのソースを表示すると表示されます。 Scripts n Stylesプラグインを介してJqueryを追加しています。私はコードを衝突しないように変更しました。すべてのドル記号を "Jquery"に変更してみましたが、うまくいきませんでした。そして自分自身のjqueryをロードしてみました。 、バージョンがまだ運はありません。どんな入力でも大歓迎です！私はまだかなりこれに慣れていないので取るべき行動についての明確なステップが好ましいでしょう。

ページリンク はこちら 。

子テーマのfunctions.phpファイル内のコードは次のとおりです。

 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' );

テーブルのカスタムJqueryコードは次のとおりです。（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

ライブサイトのjqueryコード(が見つかりません

(function($) {

1
Tarang koradiya