1

*Update!

Table is showing but only in Chrome browser, not other browsers. Tried in Safari and Opera and did not see table on screen. Please help! Need to be compatible with all browsers if possible.

original post:

I am trying to load a table pulling data from an API to show cryptocurrency prices. It works when I load it from an html page fine, but will not work in wordpress. I am using the Tabulator library which is currently dependent on Jquery and Jquery UI (Jquery UI widgets to be specific.) I have tried enqueing ‘json2’ in this code as well but it does not show up on the page at all, but is there when I view the page source. I am adding the Jquery via the Scripts n Styles plugin. I have even changed the code to no conflict,Have also tried changing all dollar signs to "Jquery" but it didnt work, and tried loading my own jquery, and tried adding jquery-ui-core as a dependency to ‘tabulatorlink’ as well, version but no luck yet. Any input is much appreciated! Clear steps on actions to take would be preferable as I am still rather new to this.

Page link here.

Code in functions.php file of child theme is as follows:

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

Custom Jquery code for the table is as follows: (added 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>
  • Well i found this: jQuery UI 1.12 supports jQuery 1.7 and newer. on the jquery ui site. If I'm correct, your jquery version is 1.12.4. – D. Dan Jan 22 '18 at 15:32
  • Tried registering my own jquery and jquery UI before, and I figured it was the problem because it didnt work, so tried wordpress versions. Live site now reflects jquery and jquery UI registered from a google CDN, but the code still is not showing on the webpage unfortunately – tcadeoti Jan 22 '18 at 21:32
  • You have problem with the single quote replace all this and with regular ' in the functions.php – Shibi Jan 22 '18 at 21:44
  • @Shibi Good call. The ' symbol has replaced the ones that got mixed in, making the tale appear. The table shows up only in Chrome though, and not other browsers I have tried. And the table I see in chrome is only showing half of its columns I have set. – tcadeoti Jan 22 '18 at 22:41
  • table is showing up full length now after I corrected the template for the page to be full width, but the table only shows up in Google chrome. Tried in safari and opera and no table on the page – tcadeoti Jan 22 '18 at 23:56
1

your live site jquery code ( missing

(function($) {

  • Hi, it has been added but this did not affect the code. Still not showing up on the page – tcadeoti Jan 22 '18 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.