[Resolved] Looking for a way to target cred field ID

[Author]

Posts

[erikO]

Tell us what you are trying to do?
I am wanting to use an alternate visual editor (Trix) on a multiple line field within a CRED form. The Trix library requires the ability to target a specific ID of the field to load the editor and successfully associate it with field for editing. Since the CRED fields dynamically change the IDs on every page load, is there way to do this?

Is there any documentation that you are following?
I have looked through the forums and haven't found any solution yet.

Is there a similar example that we can see?
What is the link to your site?
I have the current dev iteration of what I am trying to do setup here:
hidden link

The sets of fields are separated within separate divs in the editing of the CRED form and loaded through some Vue js logic and transitions.

Click the Enter and the forward buttons to the sixth panel, where you will see the editor loading. As you can see there are 2 fields loading, since the CRED field refreshes it's ID and the Trix editor ID is no longer accurate.

I am wondering if any callback when a field loads is possible or some sort of use of a generic field.

Let me know what you think or if you need more info.

There are some other field types that will be setup later in this set of fields that I will need to target somehow as well such as some sliders, so it would be great to come up with some sort of method to overcome this.

Thank you for your help.

[Luo Yang]

Hi,

There isn't existed "callback when a field loads is possible or some sort of use of a generic field".

I assume you are using custom JS codes to apply Trix visual editor to Toolset form generic field.

If it is, you can add a custom CSS class to the generic field, for example "my-multiple-line", like this:

[cred_generic_field type='textarea' field='field-1:' class='my-multiple-line']
{
"required":0,
"default":""
}
[/cred_generic_field]

Then setup your custom JS codes to target on element with CSS class name "my-multiple-line".

More help:
https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_generic_field
class. Optional. CSS class to apply to the element.
hidden link
jQuery .class Selector