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

Re: [ydn-javascript] Simple dialog box question

Expand Messages
  • David Fealkoff
    Hi Mauricio, Thanks for your help and your patience.  It s working. Regards, David ________________________________ From: Mauricio Ferreyra
    Message 1 of 8 , Nov 27, 2009
      Hi Mauricio,
       
      Thanks for your help and your patience.  It's working.
       
      Regards,
      David


      From: Mauricio Ferreyra <mauriff@...>
      To: ydn-javascript@yahoogroups.com
      Sent: Fri, November 27, 2009 11:11:53 AM
      Subject: Re: [ydn-javascript] Simple dialog box question

       

      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@ yahoo.com> 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

      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

      Greetings

      Mauricio.






      On Tue, Nov 17, 2009 at 6:18 PM, David Fealkoff <davidfealkoff@ yahoo.com> 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>
      To: 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> 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







    • 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 2 of 8 , Nov 30, 2009
        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.