Remove breaks in User Attribute list
Permalink Browser Info Environment
This is probably a bit outside of the scope of this extension but does anyone know a fool-proof method for changing the markup which is produced for multi-select attributes?
Instead of AttributeName<br>AttributeName<br>AttributeName<br>
I need AttributeName, AttributeName, AttributeName
I know how to do this with jQuery but because the Member List uses ajax to load the data it's not easy to implement.
Instead of AttributeName<br>AttributeName<br>AttributeName<br>
I need AttributeName, AttributeName, AttributeName
I know how to do this with jQuery but because the Member List uses ajax to load the data it's not easy to implement.
| Type: | Discussion |
|---|---|
| Status: | New |
> Just in case anyone needs to do something similar, I ended up simply
> adding a space onto the attribute value in the admin and then added
> display: none; to the br tags in the specific place I needed it in the
> stylesheet.
Clever!
:-)
-Steve
> adding a space onto the attribute value in the admin and then added
> display: none; to the br tags in the specific place I needed it in the
> stylesheet.
Clever!
:-)
-Steve
Just to provide some background... EUL simply asks for the attribute value using the C5 framework. Multi-select values are stored in the DB delimited by line breaks; but when asked for the display value, C5 returns it with the new lines replaced by <br/> tags.
I think there's a way to override the default display template for an attribute, but I have another method to share. It's a nifty undocumented "feature" of EUL which, if you're familiar with JS, should be pretty straightforward.
The feature is called "attribute value overrides". Basically, you can define a callback function for any attribute. The function receives a single argument, which is the value of the attribute. It should return a string, which is what actually gets displayed.
So for instance, let's say you defined an attribute called date_of_birth, but you want to display the user's age. Your callback function would receive a date string as the argument. You could then compute the age in JS and return it for display.
So how do you create such a callback function? Well, the PMW.fetchEUL() function takes an optional second argument - an object. That object can have a property called attributeOverrides which itself is an object containing the callback functions. Simply define a function having the same name as the attribute handle. It accepts a single argument and returns a string value.
So for instance, here's how you'd accomplish what you're after with a multi-select attribute called languages_you_speak. In your EUL template, you'd have something like:
Note that the "opts" object is passed as the second argument to the fetch function. Let me know if that works for you.
(However, keep in mind that this feature isn't officially documented/supported, which basically means that if you encounter a problem, I can't guarantee a timely resolution.)
-Steve
I think there's a way to override the default display template for an attribute, but I have another method to share. It's a nifty undocumented "feature" of EUL which, if you're familiar with JS, should be pretty straightforward.
The feature is called "attribute value overrides". Basically, you can define a callback function for any attribute. The function receives a single argument, which is the value of the attribute. It should return a string, which is what actually gets displayed.
So for instance, let's say you defined an attribute called date_of_birth, but you want to display the user's age. Your callback function would receive a date string as the argument. You could then compute the age in JS and return it for display.
So how do you create such a callback function? Well, the PMW.fetchEUL() function takes an optional second argument - an object. That object can have a property called attributeOverrides which itself is an object containing the callback functions. Simply define a function having the same name as the attribute handle. It accepts a single argument and returns a string value.
So for instance, here's how you'd accomplish what you're after with a multi-select attribute called languages_you_speak. In your EUL template, you'd have something like:
var opts = {
attributeOverrides: {
languages_you_speak: function( val ) {
return( val.split('<br/>').join() );
}
}
};
PMW.fetchEUL('<?php echo $controller->getAjaxUri( $bID ); ?>', opts);Note that the "opts" object is passed as the second argument to the fetch function. Let me know if that works for you.
(However, keep in mind that this feature isn't officially documented/supported, which basically means that if you encounter a problem, I can't guarantee a timely resolution.)
-Steve
Played around for ages with br:after and br:before to add a coma using content:" ,";
but apparently that pseudo class is not supposed to work for the br tag even though Safari and Chrome allow it.