?
avatar tassosm
tassosm
11 Apr 2015

It seems that a Bootstrap Radio Button field with class="btn-group btn-group-yesno" inside a Repeatable field does not work.

avatar tassosm tassosm - open - 11 Apr 2015
avatar joomla-cms-bot joomla-cms-bot - change - 11 Apr 2015
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - change - 11 Apr 2015
Labels Added: ?
avatar zero-24 zero-24 - change - 11 Apr 2015
Category Libraries
avatar Fedik
Fedik - comment - 12 Apr 2015

it is not form Bootstrap - it is Joomla styling, if I right ... :smile:
and currently I see no way to make it work without "hack", but maybe someone else know better :smirk:

between, you could try test that #6357 suggestion and tell whether it work for radio fields with class="btn-group btn-group-yesno" :wink:

avatar tassosm
tassosm - comment - 14 Apr 2015

Hey Fedik,
If you supply the "btn-group btn-group-yesno" class then the field is transformed to bootstrap field.

The #6357 it's too general solution.
I know I can make it work by overriding the field "Repeatable" but I was wondering if there is a more simple and specific solution for this issue.

Thanks anyway.

Anyone else who's facing the same problem?

avatar bassmanpaul
bassmanpaul - comment - 5 Jun 2015

Had the same issue (amongst others) with the repeatable field.

I created an override field to fix a few issues that I was experiencing which I've attached below for people to peruse :)

My (rather verbose) fixes are listed in the class comments. Although I think fix 2 has been resolved now.

Ideally to fix the radio issue someone needs to do a pull request to replace the radio button js in administrator/templates/isis/js/template.js with my delegated version.

Hopefully this helps someone!

defined( 'JPATH_PLATFORM' ) or die;

JFormHelper::loadFieldClass( 'repeatable' );

/**
 * This Field Provides Fixes for Joomla's Repeatable Field.
 * 
 * Fix 1: JRepeatable Requires Fieldsets to Work But in the Global Config These are Displayed Outside of the Repeatable Field so Need Hiding.
 * Fix 2: The Modal Close Button Doubles up the Fields (so we hide it till it's fixed). See: http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemEdit&tracker_id=8103&tracker_item_id=32311
 * Fix 3: On Clicking a New Row if There is a Chosen List Field it Requires Re-Initialisation Due a Joomla Bug Which Fires: resetChosen() in it's media/system/js/repeatable-uncompressed.js Which Fails.
 * Fix 4: On Modal Popup Bootstrap/Joomla Radio Fields Aren't Initialised.
 */
class JFormFieldRepeatableFix extends JFormFieldRepeatable
{
    /**
     * The form field type.
     *
     * @var     string
     */
    protected $type = 'repeatablefix';

    /**
     * Document Object.
     *
     * @var     object
     */
    protected $doc;

    /**
     * Method to attach a JForm object to the field.
     *
     * @param   SimpleXMLElement  $element  The SimpleXMLElement object representing the <field /> tag for the form field object.
     * @param   mixed             $value    The form field value to validate.
     * @param   string            $group    The field name group control value. This acts as as an array container for the field.
     *                                      For example if the field has name="foo" and the group value is set to "bar" then the
     *                                      full field name would end up being "bar[foo]".
     *
     * @return  boolean  True on success.
     */
    public function setup( SimpleXMLElement $element, $value, $group = null )
    {
        // Initiate Parent First so we Have Our Element Data Configured
        if( !parent::setup( $element, $value, $group ) )
        {
            return false;
        }//end if

        $this->doc = JFactory::getDocument();

        // If We Have the Fieldset Name Provide Hacks/Fixes :s
        if( $this->fieldname )
        {
            $this->addCSS();
        }//end if

        $this->addJS();

        return true;
    }//end function

    /**
     * Method to Add Field CSS.
     *
     * @return  void
     */
    protected function addCSS()
    {
        // Setup CSS
        $css    = array();
        // Fix 1
        $css[]  = '.nav [href="#' . $this->fieldname . '_modal"] { display : none; }';
        // Fix 2
        $css[]  = '#' . $this->id . '_modal_table + .form-actions .btn-link { display : none; }';

        $this->doc->addStyleDeclaration( implode( "\n", $css ) );
    }//end function

    /**
     * Method to Add Field JS.
     *
     * @note    Logic "Borrowed" From Joomla, With Customisations.
     *
     * @see     administrator/templates/isis/js/template.js
     *
     * @return  void
     */
    protected function addJS()
    {
        // Fix 3
        $js = 'jQuery( document ).ready( function( $ )
                {
                    var $table = $( "#' . $this->id . '_modal_table" );

                    $table.on( "click", ".add", function( ev )
                    {
                        // Row Not Created Yet
                        $( this ).delay( 0 ).queue( function()
                        {
                            var $list = $table.find( "select:not(.chzn-done)" ).last();

                            if( $list.length )
                            {
                                // Chosen Incorrectly Referencing Original Element so Reset Elements to Current/Fake Elements
                                $list.data().chosen.container = $( "<div>" );
                                $list.data().chosen.form_field_jq = $list;

                                // Destroy & Rebirth
                                $list.data().chosen.destroy().chosen();
                            }//end if

                            $( this ).dequeue;
                        });
                    });
                });';

        $this->doc->addScriptDeclaration( $js );

        // Fix 4
        $js = "jQuery( document ).ready( function( $ )
                {
                    // Delegate Original Radio Logic
                    $( document ).on( 'click', '.btn-group label:not(.active)', function( ev )
                    {
                        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' );
                            }//end if

                            input.prop( 'checked', true );
                            input.trigger( 'change' );
                        }
                    });

                    // Delegate Default Setting
                    $( document ).on( 'click', '#" . $this->id . "_button', function( ev )
                    {
                        $( '.btn-group input' ).each( function()
                        {
                            var input = $( this );
                            var label = $( 'label[for=' + input.attr( 'id' ) + ']' );

                            label.removeClass( 'active btn-success btn-danger btn-primary' );

                            if( $( this ).prop( 'checked' ) )
                            {
                                label.addClass( 'active' );

                                if( input.val() == '' )
                                {
                                    label.addClass( 'btn-primary' );
                                }
                                else if( input.val() == 0 )
                                {
                                    label.addClass( 'btn-danger' );
                                }
                                else
                                {
                                    label.addClass( 'btn-success' );
                                }//end if
                            }//end if
                        });
                    });
                });";

        $this->doc->addScriptDeclaration( $js );
    }//end function
}//end class
avatar Orsey
Orsey - comment - 24 Jul 2015

Waiting for the fix in one of next updates...

avatar Bakual
Bakual - comment - 24 Jul 2015

Since nobody wrote a Pull Request, this will not be tested and thus also not be in one of the next updates.

avatar Fedik
Fedik - comment - 24 Jul 2015

fix there Fedik@5c58aab but seems no one interested in it :smile:

avatar Bakual
Bakual - comment - 24 Jul 2015

Closing this issue then since we have a PR #6357.

Please test.

avatar Bakual Bakual - change - 24 Jul 2015
Status New Closed
Closed_Date 0000-00-00 00:00:00 2015-07-24 14:23:54
Closed_By Bakual
avatar Bakual Bakual - close - 24 Jul 2015

Add a Comment

Login with GitHub to post a comment