web-dev-qa-db-fra.com

Chargement bootstrap) via AJAX

Dans l'un de mes composants, je crée des champs personnalisés dans lesquels l'administrateur peut créer son propre champ pour un formulaire particulier.

Je suis confronté à un problème d'affichage d'un bouton radio à l'aide de bootstrap btn-group class.

Voici le code ci-dessous que j'injecte dans un conteneur div en utilisant 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>

Le code ci-dessus ne montre que les 3 options telles que les étiquettes les unes en dessous des autres et non groupées. Si j'ai supprimé la classe btn-group, elle apparaîtra comme un bouton radio standard.

Comment puis-je afficher le bouton radio comme bootstrap en utilisant AJAX?

joomla-3.4bootstrap
1
Malaiselvan

Si vous chargez votre formulaire dans l’administrateur Joomla (avec Isis), utilisez le code ci-dessous.

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

Sinon, vous devez ajouter du code CSS personnalisé tel que ci-dessous.

.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;
}

Et le JavaScript que vous devez ajouter pour basculer le style comme des boutons

$('.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');
    }
});
2
Nagarjun