Search code examples
javascripttwitter-bootstrapjoomlajoomla-extensions

bootstrap radio button in JOOMLA in not working fine?


following is my bootstrap radio button that i am trying to use in my JOOMLA extension.

<fieldset id="myEdit" class="radio btn-group">
                  <input type="radio" id="myEdit0" value="0">
                  <label for="myEdit0" class="btn active btn-danger">Yes</label>
                  <input type="radio" id="myEdit1" value="1">
                  <label for="myEdit1" class="btn">No</label>
 </fieldset>

enter image description here

this button works fine when i click on YES but when i click back on NO it became totally unresponsive. other way around my radio button only works one time. . .but as i copied this html from JOOMLA global configuration window, its working fine there.

Anticipating helpful response


Solution

  • ok i found following piece of js code in template.js of JOOMLA administrator side. and by changing html as follow it worked

    <fieldset id="myEdit" class="radio btn-group">
                                            <input type="radio" id="myEdit0" value="1" name="myEdit">
                                            <label for="myEdit0" class="btn">Yes</label>
                                            <input type="radio" id="myEdit1" value="0" name="myEdit">
                                            <label for="myEdit1" class="btn btn-danger">No</label>
    </fieldset>
    

    template.js

    $(document).ready(function()
    {
        $('*[rel=tooltip]').tooltip()
    
        // Turn radios into btn-group
        $('.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);
            }
        });
        $(".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');
            }
        });
    })