searchpanes when called in module not working

searchpanes when called in module not working

tacman1123tacman1123 Posts: 150Questions: 37Answers: 1
edited December 2023 in Free community support

https://jsfiddle.net/tacman1123/r6g3c15a/10/

It's should be the same as https://datatables.net/extensions/searchpanes/examples/customisation/verticalPanes.html

but uses modules instead of local versions.

It's likely something to do with the magic of attaching plugins / extensions to jQuery, which I seem to be confused about.

the error is

_display/:56 Uncaught TypeError: table.searchPanes is not a function
at _display/:56:13

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,035Questions: 1Answers: 9,953 Site admin

    Well, the previous reply (now deleted) earned that user a ban... I hate spam!

    I get a bunch of loading error from the example including for Bootstrap 5:

    Partitioned cookie or storage access was provided to “https://fiddle.jshell.net/_display/?editor_console=true” because it is loaded in the third-party context and dynamic state partitioning is enabled.
    
    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/+esm. (Reason: CORS request did not succeed). Status code: (null).
    
    Module source URI is not allowed in this document: “https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/+esm”. _display:115:26
    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.7/+esm. (Reason: CORS request did not succeed). Status code: (null).
    
    Module source URI is not allowed in this document: “https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.7/+esm”. _display:115:26
    Loading failed for the module with source “https://code.jquery.com/jquery-3.7.0.js”. _display:115:26
    Loading failed for the module with source “https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js”. _display:115:26
    Loading failed for the module with source “https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.min.js”. _display:115:26
    Loading failed for the module with source “https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js”. _display:115:26
    
    

    Is that what you are seeing as well? The _display is part of JSFiddle.

    It looks like you are loading the UMD files (.js) but are using a module (for which DataTables has .mjs files). e.g. https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js should be https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.mjs.

    jQuery don't provide their own ESM (yet), but you could use https://esm.sh/jquery@3.6.3. You'll need to check the Bootstrap part on jsdelivr - I'm not sure about that with the CORS issue.

    Allan

  • tacman1123tacman1123 Posts: 150Questions: 37Answers: 1

    Thanks, almost there. I think jsdelivr does return the esm as expected.

    https://jsfiddle.net/tacman1123/r6g3c15a/21/

    No error messages, but no searchpanes either.

  • allanallan Posts: 61,035Questions: 1Answers: 9,953 Site admin
    Answer ✓

    The part to insert it was commented out. Also that method returns a jQuery instance, so you need to use [0] to get the element: https://jsfiddle.net/mjnrqx5f/ .

    Allan

Sign In or Register to comment.