[shaan]

Hi
I want to use the EDialog extension available with jui.
I want to use the EDialog as a popup, allowing user to enter some specific data for the form. I want popup to come on the screen only when some click some specific button/link.

Please help to solve the problem using Edialog.

Thanks
Shaan

[ironic]

<?php

// the link

echo CHtml::link('Show Dialog', '#', array('id'=>'openDialog'));



// the script which opens the dialog, when the link is clicked

$script = "$('#openDialog').click(function(){$('#myDialog').dialog('open');});";



// here we add the script to the document ready function

$cs = Yii::app()->getClientScript();

$cs->registerScript('openDialog', $script, CClientScript::POS_READY);



// and now we create the EDialog widget with option:"autoOpen" set to false

// and a effect which is triggered when the dialog shows up...

$this->beginWidget('application.extensions.jui.EDialog',

	array(

		'name' => 'myDialog',

		'theme'=>'base', 

		'compression'=>'packed', 

		'htmlOptions'=>array('title'=>'Hello dialog'),

		'options'=>array(

			'autoOpen'=>false, 

			'show'=>'scale' /* see: http://ui.jquery.com...fects_showhide/ */

		)

	)

);

// the content of the dialog

echo CHtml::encode("hello world...!");

// and we end the widget...

$this->endWidget('application.extensions.jui.EDialog');

?>

The above code should be pretty self-explanatory.

have fun, greets ironic

[shaan]

Thank you very much Ironic

Shaan

[horizons]

@ironic can you also post some example with buttons added to the dialog and a function to those buttons?

Cause currently i can't get the code working.
E.g a simple setup like from the jquery UI demo http://jquery-ui.goo....html#ui.dialog

$("#dialog").dialog({ 

    buttons: { 

        "Ok": function() { 

            alert("Ok"); 

        }, 

        "Cancel": function() { 

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

        } 

    } 

});

In the code of the Edialog I see that the button option should be a string.
But everytime when I try to add some JS code the JS code doesn't work.

thx in advance
Regards Horizons

[ironic]

Quote

@ironic can you also post some example with buttons added to the dialog and a function to those buttons?

I also had some troubles, with adding buttons to the current version of EDialog.

First of all open EDialog.php, go to line 99 and change

'buttons'=>array('type'=>'string'),

to

'buttons'=>array('type'=>'array'),

else there wont be a way to add more than one button.

and use the widget like:

<?php

$this->beginWidget('application.extensions.jui.EDialog',

	array(

		'name' => 'myDialog',

		'theme'=>'base', 

		'compression'=>'packed', 

		'htmlOptions'=>array('title'=>'Hello dialog'),

		'options'=>array(

			'autoOpen'=>false, 

			'show'=>'scale',

			'buttons'=>array(

				"Ok"=>'function(){$(this).dialog("close");}',

				"Cancel"=>'function(){alert("cancel");}'

			)

		)

	)

);

?>

results in:

$('#myDialog').dialog({'autoOpen':false, 'show':'scale',

   'buttons': {

      'Ok': 'function(){$(this).dialog("close");}',

      'Cancel': 'function(){alert("cancel");}'

   }

});

This would work... if no slashes would get added to the functions... no idea, which functions adds them and no idea how to avoid it....

greets from freiburg (ger)
ironic

//edit:
funny, since those modifications the dialog is now resize+dragable and it can now be closed via X (cross or whatever)...

[MetaYii]

Hi ironic, thanks for pointing this out.

Those slashes are added by CJavaScript::encode, I think. In fact, I guess buttons should be treated as a special callback, let me try something and I post my results.

[ironic]

Quote

Hi ironic, thanks for pointing this out.



Those slashes are added by CJavaScript::encode, I think. In fact, I guess buttons should be treated as a special callback, let me try something and I post my results.

Thanks for your support. Looking forward to it.

[shaan]

Hi Ironic
Can you please help to tell how to give the overlay option in EDialog to give opacity and color.

Thanks
Shaan

[ironic]

Quote

Hi Ironic

Can you please help to tell how to give the overlay option in EDialog to give opacity and color.



Thanks

Shaan

Good Morning Shaan,
of course I can help you. First off all you need to download and install the most current version of the jui-package.
When you´re finished installing it, take care that you delete the assets-subfolder which got created by the old jui-package.

<?php

$this->beginWidget('application.extensions.jui.EDialog',

	array(

		'name' => 'myDialog',

		'theme'=>'redmond', 

		'compression'=>'none', 

		'htmlOptions'=>array('title'=>'Hello dialog'),

		'options'=>array(

			'autoOpen'=>false, 

			'show'=>'scale',		

			'bgiframe'=>true,

			'modal'=>true, /* this makes the dialog, appear on a overlay */

		),

		'buttons' => array(

			"Ok" => 'function(){$(this).dialog("close");}',

		) 		

	)

);

echo CHtml::encode("hello world...!");

$this->endWidget('application.extensions.jui.EDialog');

?>

When you did this you´ve a modal dialog running.

To change the color and opacity of the overlay you will have to create a own theme or edit a existing one...

This may now sound very complicated, but isnt...

Just visit http://jqueryui.com/themeroller/ and make your settings in the themeroller.



When you´re done, download and unpack your own theme to the "jui\jquery\themes" directory...

Open EJqueryUiWidget.php, go to line 400 and add your theme name to the $validThemes array,
from then on you should be able to run the dialog with your own theme.

have fun, greets ironic

[shaan]

Thanks for all the details.

Shaan

[horizons]

Back to the button problem

The problem is indeed the encoding of "all" Options in EDialog.
$encodedOptions = CJavaScript::encode(array_merge($options, $this->options));
The buttons code shouldn't be js encoded.

In the meantime I create my buttons like this and add the button and js code to the dialog directly via javasript.

$script = "var buttons = $('#myDialog').dialog('option', 'buttons'); $('#myDialog').dialog('option', 'buttons',{'OK': function() {alert("Ok");  },'Cancel': function() { $(this).dialog("close"); }});";

$cs->registerScript('buttons', $script, CClientScript::POS_READY);

btw.

'overlay'=>array('type'=>'string'),

must be also

'overlay'=>array('type'=>'array'),

Otherwise

'overlay'=>array('opacity'=>'0.5', 'background'=>'black'), 

isn't possible.

Guess there are some more options which should be array in the dialog class.

[ironic]

Quote

The problem is indeed the encoding of "all" Options in EDialog.

$encodedOptions = CJavaScript::encode(array_merge($options, $this->options));

The buttons code shouldn't be js encoded.

You should have a look at the most current version of the jui package and the updated documentation...

Quote

.......

Otherwise

'overlay'=>array('opacity'=>'0.5', 'background'=>'black'), 

isn't possible.

You should also send a link to your last post to MetaYii via PM, so that he wont miss it.

---

Funny, but very usefull adddition:
the jQuery UI Development Team has released a
"jQuery UI ThemeRoller Developer Tool" for Firefox,
which allows to have the themeroller avaible on any website with a single click.
(for example: your current Yii project...)



http://jqueryui.com/.../developertool/

---

greets ironic

[horizons]

Quote

You should have a look at the most current version of the jui package and the updated documentation...

I have just updated to the latest version after posting.
Sadly I haven't looked for any updates before.

The developer Tool is really nice.

[MetaYii]

Hi everybody. I'm back from a hard week away from development...

Quote

When you´re done, download and unpack your own theme to the "jui\jquery\themes" directory...



Open EJqueryUiWidget.php, go to line 400 and add your theme name to the $validThemes array,

from then on you should be able to run the dialog with your own theme.

Thanks for the explanation, ironic. I must add that the addition to the themes array and placing the theme in the themes directory is no longer needed. You can use the use [tt]$useBundledStyleSheet[/tt] set to false and register your own CSS (from jquery ui theme roller, for instance) in the view 

[MetaYii]

Problem reported by horizons is fixed in beta 5. Thanks for the report!

[bithai]

Great extension! 

I notice that upon registering the extension, it copies all the themes over to assets.  That is quite a lot to copy over, is there a way you predefined already to copy over the only specific theme that is needed?

[MetaYii]

It's a lot, but done just once, so preformance impact is minimal, IMO.

[qwerty]

Hi,
I have the following JS code:

"jQuery('#deleteUser').click(function(){

		id=jQuery('#manageUser .selected').attr('id');

    		if(!id){

			alert('Please select the user');

    			return false;

    		}

		

		if (!confirm('Are you sure?')){

        		return false;

    		}			

    		

    		id=id.replace('uId','')

    		

			jQuery.ajax({

				type: 'POST',

  				url: '".Yii::app()->createUrl('user/manage/delete')."',

  				data: "id="+id,

  				

  				success: function(html){

			     jQuery('#uId'+id).remove();

			     window.location.reload()			     

			   },

			   beforeSend: function(){

			   	jQuery('#manageUser .loading').show();

			   },

			   complete: function(){

			   	jQuery('#manageUser .loading').fadeOut('fast');

			   }

			});

		});"

And now, I would like replace alert and confirm function by dialog. How can I do this?

I tried to use

if (!jQuery('#confirm').dialog('open')))

{

    return false;

}

but does not work.

I register Dialog like this:

<?php

$this->beginWidget('application.extensions.jui.EDialog',

   array(

      'name'        => 'confirm',

      'theme'       => 'redmond', 

      'compression' => 'none', 

      'htmlOptions' => array(

         'title' => 'Please confirm...'

      ),

      'options' => array(

         'modal'         => true,

         'autoOpen'      => false,

         'draggable'     => false,

         'resizable'     => false,

         'closeOnEscape' => false,

         'width'         => 350,

         'height'        => 120,

         'minHeight'     => 120,

      ),

      'buttons' => array (

         'Cancel' => 'function(){$(this).dialog("close"); return false;}',

         'Ok' => "function(){               

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

                  return true;

               }",

      ),

   )

);

echo "Are you sure that you want to run this request?";

$this->endWidget('application.extensions.jui.EDialog');

?>

Thanx for help!

[ironic]

Hi qwerty,
your approach wont work this way.
Please read this discussion: Problem using ui.dialog as a substitute for confirm()

The two most important posts there:

Quote

Dialogs are essentially asynchronous so the confirm function is returning before the user clicks either button.
You need to put the logic for what to do inside the button functions.

Scott González (He is the jQuery UI accessibility team lead and contributed large parts to the dialog plugin.)

Quote

As Scott mentioned this is not a limitation on how jQuery UI dialog works, but a limitation of javascript itself. If the javascript were to wait and return a value, the browser would lock, allowing no interaction. The built-in browser confirm dialog is unique in this respect. The only way to do this with javascript is with a callback function.

Richard D. Worth (lead of the jQuery UI build & release team)

regards ironic

[qwerty]

Ok,
I changed to:

"jQuery('#updateUser').click(function(){

	id=jQuery('#manageUser .selected').attr('id');

	if(!id){

		alert('Please select the user');

		return false;

    	}

			

	jQuery('#confirm').dialog('open');	

		

	return false;			

});"

This works only until the first click in #updateUser, then no longer shows the dialog window.

my widget:

<?php

$this->beginWidget('application.extensions.jui.EDialog',

   array(

      'name'        => 'confirm',

      'theme'       => 'redmond', 

      'compression' => 'none', 

      'htmlOptions' => array(

         'title' => 'Please confirm...'

      ),

      'options' => array(

         'modal'         => true,

         'autoOpen'      => false,

         'draggable'     => false,

         'resizable'     => false,

         'closeOnEscape' => false,

         'width'         => 350,

         'height'        => 120,

         'minHeight'     => 120,

      ),

      'buttons' => array (

         'Cancel' => 'function(){$(this).dialog("close");}',

         'Ok' => "function(){

                 	

    		id=jQuery('#manageUser .selected').attr('id');

    		id=id.replace('uId','');

		jQuery.ajax({

			type: 'GET',

  			url: '".Yii::app()->createUrl('user/manage/update')."',

  			data: "id="+id,

  			cache: false,

  			success: function(html){

		      	   jQuery('#MUupdate').html(html);

			   },

			   beforeSend: function(){

			   	jQuery('#manageUser .loading').show();

			   },

			   complete: function(){

			   	jQuery('#manageUser .loading').fadeOut('fast');

			   }

			});

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

               }",

      ),

   )

);

echo "Are you sure that you want to run this request?";

$this->endWidget('application.extensions.jui.EDialog');

?>