1

In one of my component I am creating custom fields where admin can create his own field for a particular form.

I am facing a problem on displaying a radio button using bootstrap btn-group class.

Here is the below code I am injecting to a div container using AJAX.

<div class="control-group">
   <div class="control-label">
   <label id="jform_field_19-lbl" for="jform_field_19">Interested</label>
</div>
<div class="controls">
  <fieldset id="jform_field_19" class="radio  btn-group ">
    <input type="radio" id="jform_field_19_1" name="jform[field_19]" value="1">
    <label for="jform_field_19_1">Yes</label>

    <input type="radio" id="jform_field_19_0" name="jform[field_19]" value="0">
    <label for="jform_field_19_0">No</label>

    <input type="radio" id="jform_field_19_2" name="jform[field_19]" value="2">
    <label for="jform_field_19_2">Maybe</label>
  </fieldset>
</div>

The above code just showing the 3 options like labels one below the other and not grouped. If I removed the class btn-group then it shows like a standard radio button.

How can I show the radio button like bootstrap using AJAX?

2

If you are loading your form in Joomla administrator (using Isis), use the below code

<fieldset id="jform_field_19" class="radio btn-group btn-group-yesno">

Otherwise you need to add custom css code such as below.

.radio.btn-group input[type=radio] {
    display: none;
}
.radio.btn-group > label:first-of-type {
    margin-left: 0;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
}
fieldset.radio.btn-group {
    padding-left: 0;
}

And the JavaScript you need to add to toggle the styling like buttons

$('.radio.btn-group label').addClass('btn');
$('.btn-group label:not(.active)').click(function()
{
    var label = $(this);
    var input = $('#' + label.attr('for'));

    if (!input.prop('checked')) {
        label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
        if (input.val() == '') {
            label.addClass('active btn-primary');
        } else if (input.val() == 0) {
            label.addClass('active btn-danger');
        } else {
            label.addClass('active btn-success');
        }
        input.prop('checked', true);
        input.trigger('change');
    }
});
$('.btn-group input[checked=checked]').each(function()
{
    if ($(this).val() == '') {
        $('label[for=' + $(this).attr('id') + ']').addClass('active btn-primary');
    } else if ($(this).val() == 0) {
        $('label[for=' + $(this).attr('id') + ']').addClass('active btn-danger');
    } else {
        $('label[for=' + $(this).attr('id') + ']').addClass('active btn-success');
    }
});
  • I use the default template isis. Your suggestion is not working in my case. If I have the fieldset in default.php at the time of page load it works. But I do the loading via Ajax. I have an empty div container which will load with the fieldset at document ready. The theme doesn't apply for me. – Malaiselvan May 3 '15 at 8:07
  • See my edited code. this javascript is what toggles the button groups, I guess your page does not load the required JavaScript. – Nagarjun May 3 '15 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.