CJuiDialog Script Conflict

Yii 1.1 General Discussion
1

I created a small widget based of a well written jquery accordion menu that I downloaded. This menu seemed to work great, except that it breaks on any page that contains a CJuiDialog widget. At first I thought perhaps I simply made an error in creating and widget so I just hard-coded the list required for the script into a page and added a CJuiDialog elsewhere on the page to see if the script would break and it did. More specifically whenever a CJuiDialog is including on the page the list displays as a fully open list where are links are unclickable. The script does require that is posted in the ready portion of the code and I am registering the script with the CClientScript::POS_READY option.

I am fairly new to jquery and so I’m not completely sure where to start debugging on this. I certainly don’t expect anyone to debug this issue for me but if anyone has experienced something similar I’d really appreciate some insight into this type of problem.

Just for reference my code looks something like this:





    Yii::app()->clientScript->registerCoreScript('jquery');

    Yii::app()->clientScript->registerScriptFile( $baseUrl.  '/jquery.nestedAccordion.js',CClientScript::POS_READY);

    Yii::app()->clientScript->registerCssFile( $baseUrl.'/menu.css');


    Yii::app()->clientScript->registerScript('menuScript123','


    $("#ajaxMenu2").accordion();',

                                             CClientScript::POS_READY);




 echo $this->buildMenu(); //this outputs a list and is the same when the script breaks and does not break 

                          //I checked the page source to ensure that this is true

Then later on the page


   <?php

 $this->beginWidget('zii.widgets.jui.CJuiDialog', array(

                      'id'=>'dialog',

                      'options'=> array(

                                    'title'=>'Dialog title',

                                    'autoOpen'=>false,

                                    'modal'=>'true',

                                    'width'=>'600',

                                    'height'=>'450',

                                    'draggable'=>false,

                                    'resizable'=>false,

                                    'position'=>'center',

                                    ),

                                    ));

?>




              Dialog Text

             <div id="dialogDiv"></div>


<?php

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

?>

The script to create the menu came from here:

http://www.adipalaz.com/experiments/jquery/nested_accordion.html

2

check the page requests (maybe it’s loading more than it should) and check if the jquery ui css doesn’t override the menu style

also check if there is any JS error

3

Haven’t been able to find it yet but I have a feeling that it’s a jui css issue like you mentioned. I checked to see if other jui extentions cause the break and they indeed do (CJuiAutoComplete for example). I’ll keep looking and will post what I find here if I solve my issue. Thanks for the suggestion.

4

I was able to solve this issue. Turns out the script I was using used a function called ‘accordion’ and jquery ui also does this, hence the conflict whenever a jquery ui script was used on the same page as the menu. A simply name change of the script fixed it. Thanks for pointing me in the right direction.