Cascadingdropdown rendered as button radio and concat Label

[rvkone]

Hello,

I'm using fabrik 3.1b
I have a cascadingdropdown rendered as button radios.
I set its concat label with some html tag to customize the display :

---------------------------

'<div class="date">',{thistable}.date,'</div><div class="lieu">',{thistable}.lieu,'</div><div class="adresse">',{thistable}.adresse,'</div>'

---------------------------

The problem is that the html tags are encoded the they are not rendered. Here is the result:


I notice also that {thistable}.date lose the format (this element is set as d M Y) inside the rendered button radio, in the frontend. The date format is ok in the back end list.

Any help direction would be appreciated.

Thanks.

 

[lazysheepmedia]

I appear to be having the same problem - html not being rendered

I'll do a github update and see if that resolves the issue

Regards

 

[troester]

Yup.
It's ok in list and details view, but not in the form.
It's not only HTML in radio dropdown labels but also in normal element labels.

I notice also that {thistable}.date lose the format (this element is set as d M Y)

Concat is fetching the MySQL date directly from the database, so you have to do the formatting (via MySQL date_format) yourself

 

[rvkone]

Oh thanks! Finally, I am not alone in this case.
Regards

 

[lazysheepmedia]

Thanks Troester - I'm just doing an update to see if it is resolved

Thanks

 

[rvkone]

Concat is fetching the MySQL date directly from the database, so you have to do the formatting (via MySQL date_format) yourself

Do you mean that I need to edit the form template?
I set 'bootstrap' as the form template for frontend.
So it is located here :

/components/com_fabrik/views/form/tmpl/bootstrap/

But which file ?

Thanks.

 

[troester]

No, format in the Concat with something like
DATE_FORMAT({thistable}.date,'%d %M %Y')

 

[rvkone]

No, format in the Concat with something like
DATE_FORMAT({thistable}.date,'%d %M %Y')

Thanks. It works! Never used this before.

 

[lazysheepmedia]

Going back to the formatting, I have updated and it is not resolved - Is there another fix please?

Thanks

 

[rvkone]

Going back to the formatting, I have updated and it is not resolved - Is there another fix please?
Thanks

The problem is I don't know which files are concerned about this. I thought it was the cascadingdropdown.js file (around line #159 I guess) but the changes I made doesn't work. So if you know the right file, I can give an eye to it.

 

[rvkone]

Any news ?

 

[lazysheepmedia]

No sorry I don't know what file it is - I am hoping that this will be fixed soon?

 

[rvkone]

This is how I end up doing it.
Inside cascadingdropdown.js, at line 147, there is an instruction like this:

this.addOption(item.value, item.text, updateField);

In fact, this function is defined in plugins/fabrik_element/databasejoin/databasejoin.js :
You can see many case depending on the display type you choose for you cascadindropdown (dropdown, multilist, auto-complete, chechbox, radio...)

Checkbox -----
If you're rendering as checkbox and want a html-enabled label, it is easy.

replace line 171:

opt.getElement('span').set('text', l);

by this:

opt.getElement('div', {'class': 'option-label'}).set('html', l);

This mean I put my checkbox label inside a <div class="option-label"> instead of a <span>
and set the content as 'html' instead of 'text'. I may use other class name instead of 'option-label'.

Radio -----
For 'radio' button case, I noticed that it fall through the default case. So rather than editing it, I duplicate its instructions for the 'radio' case;

So you have between line 179 and 180, I have
before :

case 'radio':
//////////// <paste the code here> ////////////
/* falls through */

and after:

case 'radio':
// Not working in cdd in repeat group.
//var name = this.options.element + '[]';
var name;
if (this.options.canRepeat) {
name = this.options.fullName + '[' + this.options.repeatCounter + '][]';
} else {
name = this.options.fullName + '[]';
}
 
chxed = (v === this.options.value) ? true : false;
opt = new Element('div', {
'class': 'fabrik_subelement'
}).adopt(new Element('label').adopt([new Element('input', {
'class': 'fabrikinput',
'type': 'radio',
'checked': true,
'name': name,
'value': v
}), new Element('div', {'class': 'option-label'}).set('html', l)])); // I prefer use div instead of <span>
subOpts = this.element.getElements('> .fabrik_subelement');
last = subOpts.length === 0 ? this.element : subOpts.getLast();
injectWhere = subOpts.length === 0 ? 'bottom' : 'after';
opt.inject(last, injectWhere);
break;
/* falls through */

Same as check box, I use div instead of span because I may have other html tag inside. Set content as 'html' instead of 'text'.

It is not a perfect solution but it works for my need.
Good luck.

 

[lazysheepmedia]

Thanks rvkone

The problem I have is that this is happening on all the element labels

Thanks for the help though

 

[troester]

I had a Skype discussion with Rob yesterday:
now there's a fix in 3.1 GitHub to allow HTML formatting in element labels if (and only if) the global fabrik option "Form" WYSIWYG editor for element labels=yes.

I don't think this is affecting the CDD label issue: displaying HTML tag if modified by watch element change

 

[lazysheepmedia]

Thanks Troester

I'll do another update and report back

Regards