Toggling a template field doesn't seem to work.

I've read this topic from 2015:

https://forum.getfuelcms.com/discussion/2342/toggle-nested-template-fields

I'm on the develop branch.

With this config in a modules form_fields method:

        $fields['workshop'] = [
            'type' => 'toggler',
            'prefix' => 'toggle_workshop_',
            'options' => ['yes' => 'yes', 'no' => 'no'],
            'first_option' => 'Is this entry a workshop or not?',
            'required' => true
        ];

        $fields['workshop_details'] = [
            'display_label' => false,
            'repeatable' => true,
            'class' => 'toggle toggle_workshop_yes',
            'type' => 'template',
            'fields' => [
                'workshop_title' => [],
                'entries' => [
                    'type' => 'template',
                    'fields' => [
                        'time' => [],
                        'title' => [],
                        'content' => [
                            'type' => 'textarea'
                        ]
                    ]
                ]
            ]
        ];

The workshop_details fields are always visible.

If I simplify it by removing the nested 'entries' template type - no change.

If I change the workshop_details field to a simple single text input it does toggle as expected.

Comments

  • You may need to add that class parameter to each of the fields instead:

    'fields' => [
                    'workshop_title' => ['class' => 'toggle toggle_workshop_yes'],
                    'entries' => [
                        'type' => 'template',
                        'fields' => [
                            'time' => ['class' => 'toggle toggle_workshop_yes'],
                            'title' => ['class' => 'toggle toggle_workshop_yes'],
                            'content' => [
                                'type' => 'textarea'
                                'class' => 'toggle toggle_workshop_yes'
                            ]
                        ]
                    ]
                ]
    
  • Updated it to:

                $fields['workshop_details'] = [
                    'type' => 'template',
                    'class' => 'toggle toggle_workshop_yes',
                    'repeatable' => true,
                    'fields' => [
                        'workshop_title' => [
                            'class' => 'toggle toggle_workshop_yes'
                        ],
                        'entries' => [
                            'type' => 'template',
                            'class' => 'toggle toggle_workshop_yes',
                            'repeatable' => true,
                            'fields' => [
                                'time' => [
                                    'class' => 'toggle toggle_workshop_yes'
                                ],
                                'title' => [
                                    'type' => 'textarea',
                                    'class' => 'toggle toggle_workshop_yes',
                                ],
                                'content' => [
                                    'type' => 'textarea',
                                    'class' => 'toggle toggle_workshop_yes',
                                ]
                            ]
                        ]
                    ]
                ];
    

    Resulted in all the fields being removed but not the surrounding template. I mean you can still see the grey boxes and "Remove" buttons and drag handles.

  • edited August 2019

    I see. The template field is actually not so much a field but a container of fields. There are a couple other options though. There is a context and selector parameter that you can use. The context parameter is the dom reference of the container element in which to find the specified class (default is .form). The selector parameter specifies what closest element it will look for to hide (default is the tr). Additionally, there is a template parameter which you can specify view file path with the contents of something like this example which is custom HTML:

    <div class="repeatable_container toggle toggle_workshop_yes" data-depth="1" data-title_field="title" style="position: relative; width: 800px">
        <br>
        <table class="form row_repeatable">
            <tbody>
                <tr>
                    <th class="label">Time</th>
                    <th class="label">Title</th>
                    <th class="label">Content</th>
                    <th></th>
                </tr>
            </tbody>
            <?php foreach($fields as $key => $field) : ?>
                <tbody class="repeatable">
                    <tr>
                        <td class="field"><?=$field['time']?> </td>
                        <td class="field"><?=$field['title']?> </td>
                        <td class="field"><?=$field['content']?> </td>
                        <td class="remove_container"></td>
                    </tr>
                </tbody>
            <?php endforeach; ?>
        </table>
    </div>
    
Sign In or Register to comment.