Materialize CSS Tabs on app - questions

App Development
1

I implemented the Add “Tabs” to your app low code solution as outlined here.
Add “Tabs” to your APP

I have a table that I want to appear in multiple tabs, but when I add it twice in the javascript, it only appears in one tab.

Does anyone know how to adjust the javascript so I can append the same table (x_element_page_183_3) twice between two different tabs?

Here is my javascript
$(document).ready(function(){
$(‘.tabs’).tabs();
$(‘#x_element_page_183_44’).appendTo(‘#tab1’);
$(‘#x_element_page_183_3’).appendTo(‘#tab1’);
$(‘#x_element_page_183_3’).appendTo(‘#tab2’);
$(‘#x_element_page_183_115’).appendTo(‘#tab3’);
$(‘#x_element_page_183_27’).appendTo(‘#tab3’);
$(‘#x_element_page_183_100’).appendTo(‘#tab4’);
$(‘#x_element_page_183_92’).appendTo(‘#tab4’);
$(‘#x_element_page_183_67’).appendTo(‘#tab5’);
});

2

Hey @centellix,

I tried a few methods for this, and I don’t think this is possible.

I tried $('#id').clone().appendTo('#tab2'); but that didn’t work since the table requires a unique ID. I also tried dynamically appending an embeddable table component like this…

    var script1 = document.createElement('script');
    script1.type='text/javascript';
    script1.innerHTML = 'ele_key="DVWQ*****";';
    
    var script2 = document.createElement('script');
    script2.src = 'https://embed.tadabase.io/embed/DXQ8zR*****-DVWQ*****';

    var div = document.createElement('div');
    div.id = 'tb-output-DVWQ*****';
    
    $('#tab1').append(script1)
    .append(script2)
    .append(div);
    $('#tab2').append(script1)
    .append(script2)
    .append(div);

…but that didn’t work as well.

I’ll keep brainstorming, but you’ll likely need to create two table components for this to “work.”

Thank you for coming to my Ted Talk; have a wonderful weekend ahead! :smiley:

1 Like