Monitor Reply

Support

Tabbed form not working

Permalink Browser Info Environment February 07, 2022 at 11:31 AM

I'm using a config.php with tabs. See attached file.
The form displays with the tab list, but all the fields are displayed instead of being filtered by selected tabs (see screenshot).

Looking at the generated HTML, the tabs are there, but clicking on the tabs does nothing (no display: none compared to another site where I use this feature). Comparing the generated HTML between the two sites, it seems that there is a script missing between the ul.nav-tabs and the div.ccm-tab-content - the script that contained something like $(function() { ccm_activateTabBar($('#ccm-tabs-766531386'));});.

I don't get any Javascript error in the console. It's just as if nothing gets executed when I click on a tab.

Do you have any idea where the problem is coming from ?

<div id="ccm-block-fields">
<script type="text/javascript">
    $(function () {
        $.each($("[data-attr-color-picker]"), function(){
            var colorPickerConfig = $.parseJSON($(this).attr("data-attr-color-picker"));
            if ($.isPlainObject(colorPickerConfig)) {
               $(this).spectrum(colorPickerConfig); 
            }
            $(this).removeAttr("data-attr-color-picker");
        });
        $.each($("[data-attr-datetime]"), function(){
          var dateTimeConfig = $.parseJSON($(this).attr("data-attr-datetime"));
           if ($.isPlainObject(dateTimeConfig)) {
               console.log(dateTimeConfig);
              $(this).datetimepicker(dateTimeConfig);

Viewing 15 lines of 23 lines. View entire code block.

 
<div id="ccm-block-fields">
<script type="text/javascript">
    $(function () {
        $.each($("[data-attr-color-picker]"), function(){
            var colorPickerConfig = $.parseJSON($(this).attr("data-attr-color-picker"));
            if ($.isPlainObject(colorPickerConfig)) {
               $(this).spectrum(colorPickerConfig); 
            }
            $(this).removeAttr("data-attr-color-picker");
        });
 
        $.each($("[data-attr-datetime]"), function(){
          var dateTimeConfig = $.parseJSON($(this).attr("data-attr-datetime"));
           if ($.isPlainObject(dateTimeConfig)) {
               console.log(dateTimeConfig);
              $(this).datetimepicker(dateTimeConfig); 
           }
           $(this).removeAttr("data-attr-datetime");
       });
    });
</script>
<ul class="nav nav-tabs mb-3 nav-fill" role="tablist"><li class="nav-item"><a class="nav-link" href="#form-main-a92c38cdfbeb26b80d" data-bs-toggle="tab" id="form-main-a92c38cdfbeb26b80d-tab" aria-controls="form-main-a92c38cdfbeb26b80d" role="tab" aria-selected="false">Introduction</a></li><li class="nav-item"><a class="nav-link active" href="#form-s1-a92c38cdfbeb26b80d" data-bs-toggle="tab" id="form-s1-a92c38cdfbeb26b80d-tab" aria-controls="form-s1-a92c38cdfbeb26b80d" role="tab" aria-selected="true">First step</a></li><li class="nav-item"><a class="nav-link" href="#form-s2-a92c38cdfbeb26b80d" data-bs-toggle="tab" id="form-s2-a92c38cdfbeb26b80d-tab" aria-controls="form-s2-a92c38cdfbeb26b80d" role="tab" aria-selected="false">Second step</a></li><li class="nav-item"><a class="nav-link" href="#form-s3-a92c38cdfbeb26b80d" data-bs-toggle="tab" id="form-s3-a92c38cdfbeb26b80d-tab" aria-controls="form-s3-a92c38cdfbeb26b80d" role="tab" aria-selected="false">Third step</a></li></ul>
<div class="ccm-tab-content" id="ccm-tab-content-form-main-a92c38cdfbeb26b80d">...</div>
...

2 Attachments

Type:	Ticket
Status:	Resolved

ramonleenders replied on Feb 7, 2022 at 3:36 pm Permalink Reply

Hi there,

I assume this is in the latest version 9 of ConcreteCMS? Then it's probably a new bug, which I have yet to fix. There may be more bugs here and there, which haven't been discovered yet. These will have to go on my TODO list to be fixed! Not using version 9 extensively, because it's pretty new and don't want to have any of the undiscovered bugs in live/production sites - therefore not yet had the time to get around checking everything.

Sorry for the inconvenience.

Kind regards
Ramon

dangrth replied on Feb 7, 2022 at 4:34 pm Permalink Reply

Yes, that's on 9.0.2. I moved back to PHP 7.4.x however, too many issues. I would rather use Concrete5 9 since the site will have a long life and I hope to be able to move to PHP 8 eventualy.

Do you have any idea if you will be able to fix that bug soon since it's quite blocking ? Otherwise I guess I would use a repeater, except it's less natural since I need exactly three items.

ramonleenders replied on Feb 7, 2022 at 5:07 pm Permalink Reply

Working on a fix for you right now then, probably not the last thing you will discover as a bug - but I hope it will at least keep you going for a bit! I will let you know when the release is made.

Kind regards
Ramon

dangrth replied on Feb 7, 2022 at 5:32 pm Permalink Reply

Thanks, that's great! So far it has not been too bad, I'm around 75% done on the project, I still have to do a few more blocks with your addon, but as far as feature go, I just expect to have to use a repeater and that's all.

ramonleenders replied on Feb 7, 2022 at 7:22 pm Permalink Reply

I'm expecting stuff to go wrong in the "Repeatable" too, so you can make a new issue whenever you're in need of anything for that!

I will close this issue, since this one is fixed :)

ramonleenders replied on Feb 7, 2022 at 5:32 pm Permalink Reply

Just released version 1.2.5!

Could you check and let me know if tabbed content is working as expected once again for you?

Kind regards
Ramon

dangrth replied on Feb 7, 2022 at 9:54 pm Permalink Reply

Yes, if works fine now. Thanks again for your very effective support !

Block Developer

Support

Tabbed form not working

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post