Toggle ButtonGroup inside Dialog : error

[fleuryc]

Hi!

When I put a Toggle ButtonGroup widget inside a Dialog widget, and when I click on a button, I get this javascript error message :
Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'

When I remove the dialog widget (put the ButtonGroup directly inside the page), everything works fine.

I read these :

• http://stackoverflow.com/questions/3827830/jqueryui-uncaught-exception-cannot-call-methods
• http://stackoverflow.com/questions/13235578/bootstrap-radio-buttons-toggle-issue

The dialog <div> comes indeed after the <script> (firebug copy/paste - the elements are actually closed and not empty...) :

<script src="/assets/d4eb63f0/jui/js/jquery-ui.min.js" type="text/javascript">
<script src="/assets/56baf432/js/bootstrap.datepicker.js" type="text/javascript">
<script src="/assets/56baf432/js/locales/bootstrap-datepicker.fr.js" type="text/javascript">
<script type="text/javascript">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="outline: 0px none; z-index: 1002; position: absolute; height: auto; width: 300px; top: 211px; left: 359px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">

I don't know if that's the cause of the error, but it may be an issue...

Cheers!

[hijarian]

@fleuryc Can you please provide your code which produces the error? It'll help to reproduce it.

[fleuryc]

@hijarian I'll try to do that ASAP

[fleuryc]

Allright, here it is (I just copy/pasted the code examples for Dialog and ButtonGroup from the YiiBooster website) :

// in my /site/index view file
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id'=>'mydialog',
    // additional javascript options for the dialog plugin
    'options'=>array(
        'title'=>'Dialog box 1',
        'autoOpen'=>false,
        'buttons' => array(
            array('text'=>'Close','click'=> 'js:function(){$(this).dialog("close");}'),
            array('text'=>'Cancel','click'=> 'js:function(){$(this).dialog("close");}'),
        ),
    ),
));

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'type' => 'primary',
    'toggle' => 'radio',
    'buttons' => array(
        array('label'=>'Left'),
        array('label'=>'Middle'),
        array('label'=>'Right'),
    ),
));

$this->endWidget('zii.widgets.jui.CJuiDialog');

// the button that may open the dialog
$this->widget('zii.widgets.jui.CJuiButton', array(
    'name'=>'btndialog',
    'caption'=>'Open Dialog',
    'onclick'=>new CJavaScriptExpression('function(){$("#mydialog").dialog("open"); return false;}'),
));

When I click on one of the buttons in the radio toggle button group, I get this JS error message (firebug) :

Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'
http://localhost/assets/ad154803/jquery.js
Line 477

Thanks!

[ghost]

I had the same problem and is because a conflict of jQuery UI (CJuiDialog) or another component of jQuery UI and Bootstrap. You have to include first jQuery UI and after Bootstrap in your html, i fixed loading on my form the jquery.ui script on the POS_HEAD with the next line of php code:

Yii::app()->clientScript->registerCoreScript('jquery.ui', CClientScript::POS_HEAD);

Thanks to that jQuery UI is registered first and bootstrap after, no more conflict. I hope it helps.

[fleuryc]

@benrivero this might well solve the problem indeed, but I would prefer not to have to register any script in the head : this is a dirty performance killer solution...

Anyway, I guess it's better to have something that works, event if not optimized, but this is still a (minor) bug to me...

[dudareviv]

@benrivero you have no idea how you helped %)

[hijarian]

Okay, this is an example of another jQueryUI/Twitter Bootstrap integration problem, so I'll put it into the 2.0.0 milestone. This issue is a long-standing motherf*#$er.

[hijarian]

@hulyman @fleuryc @benrivero Apparently when fixing quite another error (the dreaded tooltips conflict) I forced the loading of jQuery UI before Twitter Bootstrap. So, this particular problem should disappear, too.

@fleuryc I'm very sorry, it seems that the fix I just described degraded performance even more, because now jQuery UI is being loaded on any page YiiBooster includes it's assets, even if jQuery UI is not used on the site at all. :( However, for now I don't see any other solution for conflicts between jQuery UI and Twitter Bootstrap.

[hijarian]

Please, confirm whether this bug still happens on latest master so I can decide whether to close this issue or not.

[ghost]

Hello @hijarian recently download the new version and I can confirm that the problem is fixed now. =)

[digitalcrab]

Seems that now it is done!