Attempting to implement DataTables into our Quickbase platform...

RyanStanford

I'm trying to add DataTables into our Quickbase platform. I've been able to get Datatables to work locally, but when I'm trying to import the library, and I've been able to achieve with a $.getscript() which appears to load, until I actually try to use the DataTable() function... Console states that it's not a function.

Any assistance would be greatly appreciated.

colin

Hi @RyanStanford ,

That will be because the DataTables JS file hasn't been loaded at the point you're trying to initialise DataTables. It might be because of the asynchronous nature of javascript - so initialise the table in the done section of getScript.

If no joy, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

RyanStanford

I agree that it isn't loading... the strange part is that my code looks correct to load it, and I've been using the done section...

I've created a landing page showing the issue with further details.

https://amk9.quickbase.com/db/bpe62rabt

I'm sure it has something with trying to merge the use of DataTables on to the Quick Base platform itself... I'm able to use DataTables beautifully when using local files.

tangerine

I'm not seeing any reference to datatables' javascript in your page.
("view source" - search).

RyanStanford

On the code page, line 45,

$.getScript("https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/datatables.min.js").done(function(){
.
.
.

I had it more up top, but as that wasn't working I moved it so that DataTables was called for just the code that I needed.

RyanStanford

Also, for this example, the issue is withheld inside an

<

iframe> part of the QuickBase platform...

RyanStanford

to look at the page directly:

https://amk9.quickbase.com/db/bpe62rac8?a=dr&r=d&rl=s5a

colin

Hi @RyanStanford ,

I followed that link, and as @tangerine said, I can't see where that table is supposed to be - there's no DataTables initialisation. Can you provide exact steps on how to see your issue, and please say what the expected behaviour should be.

Cheers,

Colin

RyanStanford

I apologize for any confusion...

The link to see exactly where the Datatables should be loading is:

https://amk9.quickbase.com/db/bpe62rac8?a=dr&r=d&rl=cz5

You'll notice that there is a Div that has Name Company in two rows, this is the Header/Footer where the DataTables should be populating the data.

I've checked sources, and DataTables is showing as a source for the page... yet I'm getting a Uncaught TypeError: $(...).DataTable is not a function

tangerine

You'll notice that there is a Div that has Name Company in two rows

Are you serious? The source for that page has 4700 lines and 536 < div > tags.

DataTables is showing as a source for the page.

Use "view page source" and tell me on what line you see datatables.js.

allan

I see the Ajax request that jQuery is making to get the file, and it is being correctly returned. But I'm not seeing where it is inserting that file into the document. Am I missing an iframe or object on your page?

Allan

allan

Use "view page source" and tell me on what line you see datatables.js.

There isn't a call on the page. Its using $.getScript, which is fine and that appears to be loading the file, but I don't actually know where that $.getScript call is - it looks like it is in code that is being dynamically created and executed?

@RyanStanford could you clarify this for me please?

Thanks,
Allan

RyanStanford

Absolutely Allan...

I apologize for the complex environment, as Quickbase is its own Web based platform, that I don't have direct control over. I'm able to use techniques to inject my own javascript to customize it. This is why the page itself is thousands of lines of code, and the javascript I've written is loaded from a file on this page...

My custom javascript "file" is located at: https://amk9.quickbase.com/db/bpe62rabt?a=pageedit&pageID=37

This code is loaded onto the page linked above, and runs.

If it matters, Quickbase natively does use RequireJS.

RyanStanford

tangerine:

Line 4582 is where the technique used to grab my custom code, which on the platform is labelled "CollapsibleJSTest.js" the link of which to is:

https://amk9.quickbase.com/db/bpe62rabt?a=pageedit&pageID=37 are you able to see this page? in that custom code is where I have the $.getScript to get datatables via cdn.

colin

Hi @RyanStanford ,

That link doesn't work as it needs a login. If you're injecting the code however, is it possible that due to the asynchronous nature of JS that it's being inject after the code to initialise the table is executed. I've never used Quickbase, but is it possible to move the DataTables initialisation to some kind of success function/event for the script injection?

Cheers,

Colin

RyanStanford

Good afternoon Colin,

My understanding is that is what I'm doing already, as my $.getScript is like so:

 $.getScript("https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/datatables.min.js").done(function(){
   console.log("Import is working");
        var table = $('#example').DataTable( {
        "data": Projects,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "Name" },
            { "data": "Company" }
        ],
        "order": [[1, 'asc']],
    } );
        });
    // Add event listener for opening and closing details
.
.
.
});

colin

Hi @RyanStanford ,

I tried it here - and it's working for me. On your page the console is cleared, part way through the page load as though it's reloading the page, do you know what's happening there?

Cheers,

Colin

RyanStanford

@colin That could be because of how I'm having to import my custom JavaScript...

The native code renders, and then I have an img element with special notation which then loads my custom JavaScript page and adds it to the main page. It's one of the quirks in using Quick Base.

I've been able to use DataTables outside of Quick Base, but it's our production environment, so that's why I've been trying to merge the two together.

Looks like my research continues.

RyanStanford

I was able to resolve this by implementing a special iframe use so that the datatables page renders onto my production environment.

Thank you all for your assistance. I know this had something to do with making the two technologies playing nicely together.

colin

Hi @RyanStanford ,

Thanks for reporting back, that could be useful to others,

Cheers,

Colin