EDialog usage


(system) #1

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


(Chaotikum) #2


<?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/demos/effects_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


(system) #3

Thank you very much Ironic

Shaan


(Horizons Horizons) #4

@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


(Chaotikum) #5

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 Framework) #6

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.


(Chaotikum) #7

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. :)


(system) #8

Hi Ironic

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

Thanks

Shaan


(Chaotikum) #9

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.

Posted Image

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


(system) #10

Thanks for all the details.

Shaan


(Horizons Horizons) #11

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.


(Chaotikum) #12

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…)

Posted Image

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


greets ironic


(Horizons Horizons) #13

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 Framework) #14

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 Framework) #15

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


(Tthai1980) #16

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 Framework) #17

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


(Sebastianmazur) #18

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!


(Chaotikum) #19

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="Scott González"]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.
[/quote]

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

[quote="Richard D. Worth"]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.
[/quote]

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

regards ironic


(Sebastianmazur) #20

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');


?>