DataTables not rendering in Iphone iOS Chrome/Safari and Android when working on PC

DataTables not rendering in Iphone iOS Chrome/Safari and Android when working on PC

AMSTSAMSTS Posts: 3Questions: 1Answers: 0
edited November 2023 in Free community support

Link to test case: https://www.allmysportsteamssuck.com/predictions-beta/
Debugger code (debug.datatables.net): https://debug.datatables.net/izedur
Error messages shown: None
Description of problem: Responsive DataTables works perfect when I open in Chrome on PC but when I open in Chrome or Safari in iOS, the table runs off the side of the table, with no DataTables features (whether it be responsive or just the main product). Someone else with Android has confirmed it looks similar to the iphone on Android as well, so this effects all mobile devices it seems, even though chrome developer tools on my computer when put into mobile mode it renders correctly.

Let me know if there are further details needed, and thanks for all the work you put into this, it's truly a great tool :)

Answers

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949

    Looking at the browser's console (on a laptop) I see this error six times for different libraries:

    Uncaught ReferenceError: jQuery is not defined

    I don't see where you are loading jquery.js. Datatables isn't initializing resulting in no Datatables features being applied, even on a laptop. You will need to add something like this before loading your js libraries on line 465:

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    

    Kevin

  • AMSTSAMSTS Posts: 3Questions: 1Answers: 0
    edited November 2023

    Edit: Original response but no longer worth it, keeping it here for posterity~~That's strange you're getting those errors because Wordpress bundles jQuery in it, and in my console I see it being loaded through this file:

    https://www.allmysportsteamssuck.com/wp-content/uploads/hummingbird-assets/f81cd9039a27235870b4489ee84e5a8f.js

    Whose contents are jQuery 3.7.0~~

  • AMSTSAMSTS Posts: 3Questions: 1Answers: 0

    Aha, I've identified this is an issue that affects all users who are not logged in to wp-admin and a Wordpress issue that I will resolve elsewhere. I apologize for the confusion!

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949

    I see. You are loading that on line 2376. Datatables.js requires jquery.js to be loaded first. Also it looks like you have rocket-loader.min.js defined twice. Not sure what that is but likely you will only want to load it once. My suggestion is to move lines 275 and 276 below 2376 so they load after jquery.js.

    Kevin

Sign In or Register to comment.