Loading ...
Sorry, an error occurred while loading the content.

Re: Simple dialog box question

Expand Messages
  • praveen_yui
    Hi David, You can also use the YUI provided custom event hideEvent to override the default api that is used to close the modal dialog. For Example:
    Message 1 of 8 , Nov 30, 2009
    • 0 Attachment
      Hi David,

      You can also use the YUI provided custom event "hideEvent" to override the default api that is used to close the modal dialog.

      For Example: profileDialog.hideEvent.subscribe(handleOk);

      This should work.

      Regards
      Praveen

      --- In ydn-javascript@yahoogroups.com, Mauricio Ferreyra <mauriff@...> wrote:
      >
      > Hi David,
      > The problem is that you have to define the handleClose()
      > before the listener, and call the Id button with 'idCloseButton'
      > Here the code
      >
      > var handleClose = function(){
      > alert(' Hi David!);
      > }
      >
      > howtoDialog.setHeader("<div>This is my header<a id='idCloseButton'
      > class='container-close' href='#'>Close</a></div>");
      >
      > YAHOO.util.Event.addListener('idCloseButton','click',handleClose,howtoDialog,true);
      >
      > enjoy it!
      >
      > Mauricio.
      >
      >
      > On Fri, Nov 27, 2009 at 4:50 AM, David Fealkoff <davidfealkoff@...>wrote:
      >
      > >
      > >
      > > Hi Mauricio,
      > >
      > > Sorry for not getting back to you sooner. I tried both methods with no
      > > success. I can modify the header and it looks fine but am unable to trap
      > > the 'click' event with either method. I've attached my code. It's pretty
      > > basic so I'm at a loss. Also I tried the link you sent me, downloaded the
      > > file which displays properly but the 'show simple dialog1' button does not
      > > open a dialog.
      > >
      > > Code:
      > >
      > > function initHowtoDialog(){
      > > var handleOk = function() {
      > > };
      > >
      > > // Instantiate the Dialog
      > > howtoDialog = new YAHOO.widget.SimpleDialog("howtouse",
      > > { width : "52em",
      > > draggable: true,
      > > xy: [150,150],
      > > visible : false,
      > > close: false,
      > >
      > > constraintoviewport : true,
      > > buttons : [ { text:"Ok", handler:handleOk, isDefault:true } ]
      > > });
      > >
      > > howtoDialog.setHeader("<div>This is my header<a id='idCloseButton'
      > > class='container-close' href='#'>Close</a></div>");
      > > YAHOO.util.Event.addListener(Dom.get('idCloseButton'),'click',
      > > handleClose,howtoDialog,true);
      > >
      > > var handleClose = function(){
      > > alert('close dialog');
      > > // this.hide();
      > > }
      > >
      > > // Render the Dialog
      > > howtoDialog.render();
      > > }
      > > In short the problem is that the 'handleClose' function never gets called
      > > and it's not clear why. Any ideas on what I'm missing?
      > >
      > > Thanks.
      > >
      > > David
      > >
      > > ------------------------------
      > > *From:* Mauricio Ferreyra <mauriff@...>
      > > *To:* ydn-javascript@yahoogroups.com
      > > *Sent:* Tue, November 17, 2009 2:44:48 PM
      > >
      > > *Subject:* Re: [ydn-javascript] Simple dialog box question
      > >
      > >
      > >
      > > Hi David,
      > >
      > > You can get the close button element by class name, because by default when
      > > you set "close: true" in the SimpleDialog YUI put a href element with the
      > > class container-close, so
      > >
      > > YAHOO.util.Event. addListener(
      > > YAHOO.util.Dom. getElementsByCla ssName('container-close')
      > >
      > > , "click", handleClose, YAHOO.example. container. simpledialog1, true);
      > >
      > >
      > > Or you can set the property close in false, and add your own header in your
      > > dialog, this the code:
      > >
      > > var profileDialog = new YAHOO.widget. SimpleDialog( "profileDialog ", {
      > > close: false ,--another properties-- } );
      > > //set your header
      > > profileDialog .setHeader('<div>This is my header <a id="idCloseButton"
      > > class="container-close" href="#">Close</a></div>');
      > >
      > > //define the function onClose
      > > var handleClose = function() {
      > > alert("You clicked on close button!");
      > > this.hide(); }
      > >
      > > // add the listener
      > > YAHOO.util.Event. addListener("idCloseButton", "click", handleClose,
      > > YAHOO.example. container. profileDialog , true);
      > >
      > >
      > > This Works!!!
      > >
      > > In this link you can get the example http://sites. google.com/
      > > site/mauriff/ simpledialog- quickstart_ clean.html<http://sites.google.com/site/mauriff/simpledialog-quickstart_clean.html>
      > >
      > > Greetings
      > >
      > > Mauricio.
      > >
      > >
      > >
      > >
      > >
      > >
      > > On Tue, Nov 17, 2009 at 6:18 PM, David Fealkoff <davidfealkoff@ yahoo.com<davidfealkoff@...>
      > > > wrote:
      > >
      > >>
      > >>
      > >> Hi Mauricio,
      > >>
      > >> Thanks for the input. I tried a variant of your first idea:
      > >>
      > >> function initDialog{
      > >> var profileDialog = new YAHOO.widget. SimpleDialog(
      > >> 'set properties here'
      > >> );
      > >>
      > >> profileDialog. addListener('close', fnCallBack);
      > >> profileDialog. render();
      > >> }
      > >> function fnCallBack() {
      > >> alert('closing');
      > >> }
      > >>
      > >> function showDialog() {
      > >> profileDialog. show();
      > >> }
      > >>
      > >> When I run this and call showDialog() I get an error that says: 'Object
      > >> does not support this method or property' and the dialog box does not
      > >> display. If I remove the Listener the dialog displays properly but does not
      > >> capture the click of the close button.
      > >>
      > >> Any ideas?
      > >>
      > >> Also in your version, I assume that "container-close" is the id of the
      > >> <div> that contains the 'SimpleDialog'. Is this correct?
      > >>
      > >> David
      > >> ------------------------------
      > >> *From:* Mauricio Ferreyra <mauriff@gmail. com <mauriff@...>>
      > >> *To:* ydn-javascript@ yahoogroups. com <ydn-javascript@yahoogroups.com>
      > >> *Sent:* Mon, November 16, 2009 6:44:43 AM
      > >> *Subject:* Re: [ydn-javascript] Simple dialog box question
      > >>
      > >>
      > >>
      > >> Hello David,
      > >> You can do catch the event when close added a listener in the
      > >> close button, getting the button with her class
      > >>
      > >> YAHOO.util.Event. addListener("container-close", "click", fnCallback);
      > >>
      > >> Or you can simply not show the header with the setHeader() method
      > >>
      > >> profileDialog. setHeader("");
      > >>
      > >>
      > >> Or set the html that you want to show in the header
      > >>
      > >> profileDialog. setHeader("<div>This is my header</div>");
      > >>
      > >> I hope that solve your problem.
      > >>
      > >>
      > >> Mauri.
      > >>
      > >>
      > >>
      > >> On Mon, Nov 16, 2009 at 5:02 AM, David <davidfealkoff@ yahoo.com<davidfealkoff@...>
      > >> > wrote:
      > >>
      > >>>
      > >>>
      > >>> I create a simple dialog box (code below):
      > >>>
      > >>> profileDialog = new YAHOO.widget. SimpleDialog("viewprofile",
      > >>> { width : "52em",
      > >>> draggable: true,
      > >>> xy: [350,900],
      > >>> visible : false,
      > >>> constraintoviewport : true,
      > >>> buttons : [ { text:"Ok", handler:handleOk, isDefault:true } ]
      > >>> });
      > >>>
      > >>> I use the handleOk function to perform cleanup when the user closes the
      > >>> dialog box by using the 'Ok' button. How do I capture the event when the
      > >>> user closes the dialog box by clicking the close button in the upper right
      > >>> hand corner?
      > >>>
      > >>> David
      > >>>
      > >>>
      > >>
      > >> <http://www.google.com/search?q=Hello%20David,%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20You%20can%20do%20catch%20teh%20event%20when%20close%20added%20a%20listener%20in%20the%20close%20button,%20getting%20the%20button%20with%20her%20class%0D%0A%0D%0AYAHOO.util.Event.addListener%28%22container-close%22,%20%22click%22,%20fnCallback%29;%0D%0A%20%0D%0AOr%20you%20can%20simply%20not%20show%20the%20header%20with%20the%20setHeader%28%29%20method%0D%0A%0D%0AprofileDialog.setHeader%28%22%22%29;%0D%0A%0D%0A%0D%0AOr%20set%20the%20html%20that%20you%20want%20to%20show%20in%20the%20header%0D%0A%0D%0AprofileDialog.setHeader%28%22%3Cdiv%3EThis%20is%20my%20header%3C/div%3E%22%29;%0D%0A%0D%0AI%20hope%20that%20solve%20your%20problem.>
      > >>
      > >>
      > >
      > > <http://www.google.com/search?q=You%20can%20add%20a%20click%20listener%20in%20your%20dialog.>
      > >
      > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.