Programmatically control custom tabs after form submit

[Chem]

Here’s a quick video of me demonstrating how to programmatically control custom tabs after a form submit: https://www.screencast.com/t/XAGEmldaH

JavaScript (Remember to change component_ID to your component ID)

$(document).ready(function(){
    $('.tabs').tabs();
    $('.table-row').appendTo('#table');
    $('.form-row').appendTo('#form');
});
TB.render('component_ID',function(data){
    data.ele.find('.form-submit button').click(function(){
        M.Tabs.getInstance($('.tabs')).select('table');
    });
});

[Roger]

Hi Chem,

Brilliant addition

I have followed your instructions to the letter (and removed the previous code of appending tabs) - I get a very quick flashup of a “404 Page Not Found” when the form is submitted as it returns to the table view.

My submit rule is set to “return to existing page” as if I set it to show confirmation message then I get the 404 as a permanent page.

I have carbon copied your code, just replacing the “table” with “tab”:

$(document).ready(function(){
$(’.tabs’).tabs();
$(’.table-row’).appendTo(’#tab1’);
$(’.form-row’).appendTo(’#tab2’);
});
TB.render(‘component_9’,function(data){
data.ele.find(’.form-submit button’).click(function(){
M.Tabs.getInstance($(’.tabs’)).select(‘tab1’);
});
});

HTML

<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a class="active" href="#tab1">Table</a></li>
<li class="tab col s3"><a href="#tab2">+ Record</a></li>
</ul>
</div>
<div id="tab1" class="col s12">&nbsp;</div>
<div id="tab2" class="col s12">&nbsp;</div>
</div>

[Roger]

Hi Chem,

I have found a curve ball - hopefully your magic will work around it?

If you have a connection on the form being submitted and you allow for that forms connections to have a “add new” popup - that triggers the JS to act before the proper form is complete:

[tim.young]

Hey @Roger

Removing the hash from the app URL fixes your first issue.

For the second issue, changing the JS to the following will fix the issue. For context, #x_element_page_115_6 is the element ID of the form.

TB.render('component_6',function(data){
    $('#x_element_page_115_6').find('.form-submit button').click(function(){
        M.Tabs.getInstance($('.tabs')).select('tab1');
    });
});

[Roger]

Excellent work Tim, works a treat - thank you as always

[Roger]

Hey Tim,
Found a glitch - can it be worked around?

If a user misses a compulsory field and still clicks “submit” then the page switches from the form to the table and the error/warning message is missed. You only realise when you see no entry in the table and go back to look at the form.