Add a second LABEL before a checkbox LABEL with jQuery.

[cyberholic]

Hello fabrikistas!
My situation is this: i made a checkbox element with about 20 checkboxes.
The first 10 are boy-names.
The last 10 are girl-names.

I now would like to have a new LABEL element.
What i have done so far is this:
edit the default_group_label_side.php so that i added the elementClass to each label.
This way i can interact with each label.
Why?
Because my next step was to use jQuery together with the :before option so that i could
put a LABEL "BOYNAMES" before the first boy name and a "GIRLNAMES" before the first
name of a girl.

In testdrives on fiddle this wourls perfect but when i insert that code in my page mentioned above,
two things happen:
1. nothing - my "title"-labels do not appear
2. i also have a date element on that page - this does not work anymore.

It looks like jquery interfers somewhere so my questions are:
- does anyone have a solution to add some kind of titles to a "checkbox group" ?
- do you know if it is not allowed to use jquery within that page?

thanks in advance for your time and support,
Carlos

 

[cheesegrits]

Yes, jQuery should work fine on any Fabrik page.

How are you inserting your code? Are you using a ./js/form_X.js file, or a custom template, or what?

Are you using noConflict() mode for your JS?

Note that if you use a dropdown instead of checkboxes, you can use an <optgroup> (see wiki for the element docs), and have the two groups separated with a title. Just a suggestion, in case a dropdown would work for you.

-- hugh

 

[cyberholic]

Thanks a lot for your support Hugh. I feel realy ashamed that now after "years" of using FABRIK that i just now realy examined
what Mootools is. I found a solution for my problem simply because of the love of curiosity to FABRIK.

MY SITUATION:
I have a GAVICKPRO.COM template on the latest Joomla 3.x version with the latest FABRIK 3.x component.
The GAVICK templates work with Mootols and do not like jQuery Bootstrap.

MY PROBLEM:
I want to insert some jQuery scripts within my FABRIK form layout. A simple JS alert worked fine but as soon as i inserted
some jQuery DIVmanipulation the script - even the alert - did not work anymore.
AND: certain FABRIK elements like the date picker did not work anymore.

MY SOLUTION:
Mootools tags. So to write something between generated HTML tags i did this:

var groupTitBoynames = new Element('div', {
    'id': 'AAgroupTitle',
    'text': 'These are Boynames',
    'styles': {
        'font-size': '22px',
        'font-weight': 'bold',
        'line-height': '1.0em',
        'margin-top': '10px',
        'text-transform': 'uppercase',
        'display': 'inline-block',
        'clear': 'both'
    }
}).inject(document.getElement('.fabrikgrid_namesBoys'), 'before');

It works like a charm and THANKS HUGH A LOT for the info of the Group tag info - looks awesome and is very helpful!
Send you a lot of greetings and thanks for your time,
Carlos