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

Re: [ydn-javascript] Simple dialog box question

Expand Messages
  • Mauricio Ferreyra
    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
    Message 1 of 8 , Nov 27, 2009
    • 0 Attachment
      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

      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






    • David Fealkoff
      Hi Mauricio, Thanks for your help and your patience.  It s working. Regards, David ________________________________ From: Mauricio Ferreyra
      Message 2 of 8 , Nov 27, 2009
      • 0 Attachment
        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 3 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.