Problem With JuiDialog

Yii 1.1 General Discussion
1

I had the similar requirement as that stated in the cookbook

CJuiDialog and AjaxSubmitButton

and it works fine for me.

Now i had created two dialog boxes in the header of my site. The two dialog boxes have the same syntax as mentioned in Cjuidialog documentation. The syntax that I have used is:

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

'id'=>'mydialog',


// additional javascript options for the dialog plugin


'options'=>array(


    'title'=>'Dialog box 1',


    'autoOpen'=>false,


),

));

echo 'dialog content here';

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

// the link that may open the dialog

echo CHtml::link(‘open dialog’, ‘#’, array(

‘onclick’=>’$("#mydialog").dialog(“open”); return false;’,

));

Now the problem arises when I comes in a page where both of these links are there i.e The links created with the help of cookbook and these dialog boxes in the header.

When I click on the dialog boxes then they appear but when i click once on the link created with the help of cookbook then the dialog boxes in the header stops appearing on the page.The dialog box that I created with the help of cookbook are working totally fine but the dialog boxes in the header are not coming once I click on the ajaxlink…

Anyone has any idea whats causing the problem… I have spent a lot of time on this but no luck…

Any help is highly appreciated…

Regards

2

Make sure you set the unique ids for both dialogs. And then check in firebug, maybe there are any js errors.

3

Hi there vat,

Could you please check what the id of both dialogs? and moreover, why do you need two dialog boxes on the page? Here you have my own function to open dialogs on my CMS:





function  showConfirm: function (title, content, okCallback) {


        jQuery("#dialog-content").html(content); 

        jQuery("#dialog-confirm").dialog({

            title: title,

            resizable: false,

            height: 140,

            modal: true,

            buttons: {

                Ok: function () {

                    typeof okCallback == "function" && okCallback();

                    

                    jQuery(this).dialog("close")

                },

                Cancel: function () {

                    jQuery(this).dialog("close")

                }

            }

        })

    }


// and here the HTML markup to come on your layout

<div id="dialog-confirm">

		<p>

		<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>

		<div id="dialog-content">&nbsp;</div>

		</p>

	</div>


// for a Dialog just change or include a function that opens the dialog like this

  jQuery("#dialog-content").html(content); 

 $('#dialog-window').dialog({

		            title: title,

		            resizable: false,

		            height: 140,

		            modal: true,

		            buttons: {

		                Ok: function () {  

		                    $(this).dialog("close");

		                }

		            }

		        });

After that, you just need to call the function from your buttons and/or links and they will display the dialog correctly.

I am sorry if this solution is not that Yii-based, but I come from a strong Javascript background and when I get blocked by automated procedures that require a lot of code-analisis behind the scenes, I go back to what I do best. Being creative, using the knowledge we all have, is sometimes the faster way to reach a goal.

Cheers