Yii Framework Forum: EDialog usage - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

EDialog usage Rate Topic: -----

#1 User is offline   shaan 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-February 09

Posted 11 February 2009 - 03:08 AM

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
0

#2 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 11 February 2009 - 05:15 AM


<?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
0

#3 User is offline   shaan 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-February 09

Posted 12 February 2009 - 05:18 AM

Thank you very much Ironic

Shaan
0

#4 User is offline   horizons 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 120
  • Joined: 18-December 08

Posted 12 February 2009 - 09:14 AM

@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
0

#5 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 12 February 2009 - 10:23 AM

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

#6 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 12 February 2009 - 10:52 AM

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.
0

#7 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 12 February 2009 - 10:53 AM

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

#8 User is offline   shaan 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-February 09

Posted 12 February 2009 - 11:17 PM

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

Thanks
Shaan
0

#9 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 13 February 2009 - 02:08 AM

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
0

#10 User is offline   shaan 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-February 09

Posted 13 February 2009 - 03:38 AM

Thanks for all the details.

Shaan
0

#11 User is offline   horizons 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 120
  • Joined: 18-December 08

Posted 13 February 2009 - 04:43 AM

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.


0

#12 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 13 February 2009 - 04:54 AM

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
0

#13 User is offline   horizons 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 120
  • Joined: 18-December 08

Posted 13 February 2009 - 05:19 AM

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.
0

#14 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 21 February 2009 - 04:43 PM

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

#15 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 21 February 2009 - 04:44 PM

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

#16 User is offline   bithai 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 31
  • Joined: 23-February 09

Posted 07 March 2009 - 03:30 AM

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?
0

#17 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 07 March 2009 - 11:26 PM

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

#18 User is offline   qwerty 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 290
  • Joined: 20-November 08

Posted 08 March 2009 - 03:29 AM

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!

0

#19 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 08 March 2009 - 04:36 AM

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
0

#20 User is offline   qwerty 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 290
  • Joined: 20-November 08

Posted 08 March 2009 - 05:51 AM

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


0

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users