Loading bootstrap radio button via AJAX

Question

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?

Answer 1

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');
    }
});