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

Dialog Question

Expand Messages
  • Andrew Myers
    Hi, I m not quite sure if this is possible but I was hoping someone may be able to point me in the right direction. On the webpage I am building the user will
    Message 1 of 10 , Dec 19, 2007
    • 0 Attachment
      Hi,

      I'm not quite sure if this is possible but I was hoping someone may be
      able to point me in the right direction.

      On the webpage I am building the user will have a list of items, say:

      Item A
      Item B
      Item C

      When they click any of them, if they are logged in I want a dialog to
      pop up where they can enter a "note" next to it, which then gets
      stored in their "list".

      If they are not logged in, I would like the dialog to contain a
      username / password box, then once they log in successfully the dialog
      would change to prompt them for the "note".

      I expect sometimes like this is the answer:

      http://developer.yahoo.com/yui/examples/container/dialog-quickstart.html

      But I can't see how you can make the contents of the dialog navigate
      from one page to another. Does anyone have an example of this?

      Hopefully I have explained that sufficiently - sorry I don't have an
      example at this stage.

      Regards,
      Andrew.
    • jingceawlin
      You can use two dialog instances, one for login, one for adding item. I guess you also need to use YUI s Connection component to make some ajax invocations.
      Message 2 of 10 , Dec 19, 2007
      • 0 Attachment
        You can use two dialog instances, one for login, one for adding item.
        I guess you also need to use YUI's Connection component to make some
        ajax invocations.

        --- In ydn-javascript@yahoogroups.com, "Andrew Myers" <am2605@...> wrote:
        >
        > Hi,
        >
        > I'm not quite sure if this is possible but I was hoping someone may be
        > able to point me in the right direction.
        >
        > On the webpage I am building the user will have a list of items, say:
        >
        > Item A
        > Item B
        > Item C
        >
        > When they click any of them, if they are logged in I want a dialog to
        > pop up where they can enter a "note" next to it, which then gets
        > stored in their "list".
        >
        > If they are not logged in, I would like the dialog to contain a
        > username / password box, then once they log in successfully the dialog
        > would change to prompt them for the "note".
        >
        > I expect sometimes like this is the answer:
        >
        > http://developer.yahoo.com/yui/examples/container/dialog-quickstart.html
        >
        > But I can't see how you can make the contents of the dialog navigate
        > from one page to another. Does anyone have an example of this?
        >
        > Hopefully I have explained that sufficiently - sorry I don't have an
        > example at this stage.
        >
        > Regards,
        > Andrew.
        >
      • Andrew Myers
        I ve found a good demo of the kind of thing I was after: http://jquery.com/demo/thickbox/ (AJAX Content / login(modal). Has anyone got any examples of
        Message 3 of 10 , Dec 24, 2007
        • 0 Attachment
          I've found a good demo of the kind of thing I was after:

          http://jquery.com/demo/thickbox/ (AJAX Content / login(modal).

          Has anyone got any examples of something similar using YUI components?

          --- In ydn-javascript@yahoogroups.com, "Andrew Myers" <am2605@...> wrote:
          >
          > Hi,
          >
          > I'm not quite sure if this is possible but I was hoping someone may be
          > able to point me in the right direction.
          >
          > On the webpage I am building the user will have a list of items, say:
          >
          > Item A
          > Item B
          > Item C
          >
          > When they click any of them, if they are logged in I want a dialog to
          > pop up where they can enter a "note" next to it, which then gets
          > stored in their "list".
          >
          > If they are not logged in, I would like the dialog to contain a
          > username / password box, then once they log in successfully the dialog
          > would change to prompt them for the "note".
          >
          > I expect sometimes like this is the answer:
          >
          > http://developer.yahoo.com/yui/examples/container/dialog-quickstart.html
          >
          > But I can't see how you can make the contents of the dialog navigate
          > from one page to another. Does anyone have an example of this?
          >
          > Hopefully I have explained that sufficiently - sorry I don't have an
          > example at this stage.
          >
          > Regards,
          > Andrew.
          >
        • Eric Miraglia
          Andrew, I d take a look at: http://thecodecentral.com/2007/08/17/yui-based-lightbox-revisit Regards, Eric ______________________________________________ Eric
          Message 4 of 10 , Dec 24, 2007
          • 0 Attachment
            Andrew,

            I'd take a look at:


            Regards,
            Eric

            ______________________________________________
            Eric Miraglia
            Yahoo! User Interface Library



            On Dec 24, 2007, at 12:13 AM, Andrew Myers wrote:

            I've found a good demo of the kind of thing I was after:

            http://jquery. com/demo/ thickbox/ (AJAX Content / login(modal) .

            Has anyone got any examples of something similar using YUI components?

            --- In ydn-javascript@ yahoogroups. com, "Andrew Myers" <am2605@...> wrote:
            >
            > Hi,
            > 
            > I'm not quite sure if this is possible but I was hoping someone may be
            > able to point me in the right direction.
            > 
            > On the webpage I am building the user will have a list of items, say:
            > 
            > Item A
            > Item B
            > Item C
            > 
            > When they click any of them, if they are logged in I want a dialog to
            > pop up where they can enter a "note" next to it, which then gets
            > stored in their "list".
            > 
            > If they are not logged in, I would like the dialog to contain a
            > username / password box, then once they log in successfully the dialog
            > would change to prompt them for the "note".
            > 
            > I expect sometimes like this is the answer:
            > 
            > http://developer. yahoo.com/ yui/examples/ container/ dialog-quickstar t.html
            > 
            > But I can't see how you can make the contents of the dialog navigate
            > from one page to another. Does anyone have an example of this?
            > 
            > Hopefully I have explained that sufficiently - sorry I don't have an
            > example at this stage.
            > 
            > Regards,
            > Andrew.
            >


          • Alan Pinstein
            I have implemented this exactly with YUI. We ended up having to write a custom extension of the YUI Panel object to support the AJAX wiring needed to
            Message 5 of 10 , Dec 24, 2007
            • 0 Attachment
              I have implemented this exactly with YUI. 

              We ended up having to write a custom extension of the YUI Panel object to support the AJAX wiring needed to accomplish this.

              It's part of an open-source framework that I maintain, that uses YUI for the front-end AJAX goodness. Feel free to look through the code for answers. The custom object extension is called "PhocoaDialog":


              PhocoaDialog simply lets you load up a page in a Panel dynamically, and keep all form submissions in that page targeted to the Panel. I use that in combination with some extra stuff to achieve what you're after for the complete lazy registration experience.

              I create a custom event called "loginDone" which is called from the register/login success page, which will occur in the PhocoaDialog via AJAX. The underlying page subscribes to the loginDone event, and when it is received, it dismisses the PhocoaDialog that was used for the register workflow and calls a different dialog. I could have had it continue on in the original dialog, but my workflows are a little more complex and it was cleaner to do it this way.

              In any case, hopefully that will be instructive in helping you out.

              You can see this login in action here:


              Click "Find Properties" and when the results list comes up, hit any "Save" or "Exclude" link to see the register workflow. This is a sample account, so feel free to sign up with anything to see the complete workflow.

              Hope that helps,

              Alan



              On Dec 24, 2007, at 3:13 AM, Andrew Myers wrote:

              I've found a good demo of the kind of thing I was after:

              http://jquery. com/demo/ thickbox/ (AJAX Content / login(modal) .

              Has anyone got any examples of something similar using YUI components?

              --- In ydn-javascript@ yahoogroups. com, "Andrew Myers" <am2605@...> wrote:
              >
              > Hi,
              > 
              > I'm not quite sure if this is possible but I was hoping someone may be
              > able to point me in the right direction.
              > 
              > On the webpage I am building the user will have a list of items, say:
              > 
              > Item A
              > Item B
              > Item C
              > 
              > When they click any of them, if they are logged in I want a dialog to
              > pop up where they can enter a "note" next to it, which then gets
              > stored in their "list".
              > 
              > If they are not logged in, I would like the dialog to contain a
              > username / password box, then once they log in successfully the dialog
              > would change to prompt them for the "note".
              > 
              > I expect sometimes like this is the answer:
              > 
              > http://developer. yahoo.com/ yui/examples/ container/ dialog-quickstar t.html
              > 
              > But I can't see how you can make the contents of the dialog navigate
              > from one page to another. Does anyone have an example of this?
              > 
              > Hopefully I have explained that sufficiently - sorry I don't have an
              > example at this stage.
              > 
              > Regards,
              > Andrew.
              >


            • Andrew Myers
              Thank you Alan (and all others who replied). This looks very similar to what I m trying to achieve. I will let you know how I get along. Best regards, Andrew.
              Message 6 of 10 , Dec 26, 2007
              • 0 Attachment
                Thank you Alan (and all others who replied).

                This looks very similar to what I'm trying to achieve. I will let you
                know how I get along.

                Best regards,
                Andrew.

                --- In ydn-javascript@yahoogroups.com, Alan Pinstein <apinstein@...>
                wrote:
                >
                > I have implemented this exactly with YUI.
                >
                > We ended up having to write a custom extension of the YUI Panel
                > object to support the AJAX wiring needed to accomplish this.
                >
                > It's part of an open-source framework that I maintain, that uses YUI
                > for the front-end AJAX goodness. Feel free to look through the code
                > for answers. The custom object extension is called "PhocoaDialog":
                >
                > http://phocoa.com/webapp/examples/ajax/container/container
                >
                > PhocoaDialog simply lets you load up a page in a Panel dynamically,
                > and keep all form submissions in that page targeted to the Panel. I
                > use that in combination with some extra stuff to achieve what you're
                > after for the complete lazy registration experience.
                >
                > I create a custom event called "loginDone" which is called from the
                > register/login success page, which will occur in the PhocoaDialog via
                > AJAX. The underlying page subscribes to the loginDone event, and when
                > it is received, it dismisses the PhocoaDialog that was used for the
                > register workflow and calls a different dialog. I could have had it
                > continue on in the original dialog, but my workflows are a little
                > more complex and it was cleaner to do it this way.
                >
                > In any case, hopefully that will be instructive in helping you out.
                >
                > You can see this login in action here:
                >
                > http://lettyoliver.miamire.com/650/dsp_agent_page.php/38042
                >
                > Click "Find Properties" and when the results list comes up, hit any
                > "Save" or "Exclude" link to see the register workflow. This is a
                > sample account, so feel free to sign up with anything to see the
                > complete workflow.
                >
                > Hope that helps,
                >
                > Alan
                >
                >
                >
              • Andrew Myers
                Hi All, I have made some excellent progress and hopefully will be able to show it to you when I have it in a production environment. I m currently using 3
                Message 7 of 10 , Jan 2, 2008
                • 0 Attachment
                  Hi All,

                  I have made some excellent progress and hopefully will be able to show
                  it to you when I have it in a production environment.

                  I'm currently using 3 dialogs - a login dialog, "wait" dialog and a
                  confirmation dialog. The dialogs are defined in the HTML source as
                  follows:

                  <div class=" ">
                  <div id="loginDialog">
                  <div class="hd">Please log in to continue</div>
                  <div class="bd">
                  <div id="loginError"></div>
                  <form method="POST" action="/blackbook/index.cfm?event=loginUser">
                  <label for="username">Username:</label><input type="textbox"
                  name="username" /><br/>
                  <label for="password">Password:</label><input type="password"
                  name="password" />
                  <input type="hidden" name="horseName" value="" id="hdHorseName">
                  </form>
                  <div class="instructionalText"><a
                  href="/tradingring/forgot_password.cfm" target="_top">Forgotten your
                  password?</a></div>
                  <div class="instructionalText"><a href="/tradingring/register.cfm"
                  target="_top">Register Now</a></div>
                  </div>
                  </div>

                  <div id="confirmDialog">
                  <div class="hd">Horse Added</div>
                  <div class="bd" id="horseAddedDialogBody">
                  The horse was added
                  </div>
                  </div>

                  <div id="waitDialog">
                  <div class="hd">Loading...</div>
                  <div class="bd">
                  <div class="waitIndicator" style="padding-left: 100px;
                  padding-top: 17px"><img src="images/ajax-loader.gif" width="66"
                  height="66"></div>
                  </div>
                  </div>

                  In my callbacks I swap between them as follows:

                  YAHOO.example.container.waitDialog.hide();
                  YAHOO.example.container.loginDialog.show();

                  However there is a very brief period between the show and hide which
                  causes the screen to "flicker" (for want of a better word).

                  Can you reuse the one dialog and swap the content easily, or is this
                  the best option?

                  Many thanks,
                  Andrew.
                • kc_6800
                  Hi everyone, I am trying to show a dialog when the user clicks a button. I am using YUI 2.3.0. The problem is that the dialog stretches to the entire width of
                  Message 8 of 10 , Feb 5, 2008
                  • 0 Attachment
                    Hi everyone,

                    I am trying to show a dialog when the user clicks a button. I am using
                    YUI 2.3.0. The problem is that the dialog stretches to the entire
                    width of the screen by default (in IE 7.0).

                    I am trying to get away without specifying an exact width for the
                    dialog because I might change the text that is displayed in the dialog
                    in the future and that might involve me having to re-adjust the width
                    at that time.

                    Is there a simple setting for invoking the Dialog that would ensure
                    that the width is automatically set based on the text that is being
                    displayed?

                    Here's my source code. Thanks.

                    <html>
                    <head>
                    <title>Dialog Test</title>

                    <!-- YAHOO Global Object source file -->
                    <script type="text/javascript"
                    src="./yui/build/yahoo/yahoo-min.js" ></script>

                    <!-- Source File -->
                    <link rel="stylesheet" type="text/css"
                    href="./yui/build/reset-fonts-grids/reset-fonts-grids.css"/>

                    <!-- ************************* YAHOO Connection Manager
                    ****************************** -->
                    <!-- Used for Custom Events and event listener bindings -->
                    <script type="text/javascript"
                    src="./yui/build/event/event-min.js"></script>

                    <!-- Source file -->
                    <script type="text/javascript"
                    src="./yui/build/connection/connection-min.js"></script>
                    <!-- ************************* End of YAHOO Connection Manager
                    ****************************** -->

                    <!-- ************************* Dialog
                    ****************************** -->
                    <!-- CSS -->
                    <link rel="stylesheet" type="text/css"
                    href="./yui/build/container/assets/skins/sam/container.css">

                    <!-- Dependencies -->
                    <script type="text/javascript"
                    src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>

                    <!-- OPTIONAL: Connection (not required if not using
                    Dialog/SimpleDialog) -->
                    <script type="text/javascript"
                    src="./yui/build/connection/connection-min.js"></script>

                    <!-- OPTIONAL: Animation (not required if not enabling animation) -->
                    <script type="text/javascript"
                    src="./yui/build/animation/animation-min.js"></script>

                    <!-- Source file -->
                    <script type="text/javascript"
                    src="./yui/build/container/container-min.js"></script>

                    <!-- ************************* End of Dialog
                    ****************************** -->

                    <script language="Javascript" TYPE="text/javascript">
                    function showDialog()
                    {
                    document.getElementById('testSection').style.display = "block";
                    var oWaitDialog = new YAHOO.widget.Dialog("waitDialog",
                    {
                    fixedcenter : true,
                    visible : true,
                    constraintoviewport : true,
                    close: true,
                    draggable : false
                    }
                    );
                    oWaitDialog.render();
                    }
                    </script>
                    </head>
                    <body class="yui-skin-sam">
                    <input type='button' value='Show Dialog'
                    onClick='showDialog();'></input>

                    <div id="testSection" style='display: none;'>
                    <div id="waitDialog">
                    <div class="hd"><div>Loading...</div></div>
                    <div class="bd">
                    <div>
                    Loading the Dialog
                    </div>
                    </div>
                    </div>
                    </div>

                    </body>
                    </html>
                  • sania
                    ... using ... dialog ... width ... animation) -- ... = block ;
                    Message 9 of 10 , Feb 5, 2008
                    • 0 Attachment
                      --- In ydn-javascript@yahoogroups.com, "kc_6800"
                      <karthikchandrasekhar@...> wrote:
                      >
                      > Hi everyone,
                      >
                      > I am trying to show a dialog when the user clicks a button. I am
                      using
                      > YUI 2.3.0. The problem is that the dialog stretches to the entire
                      > width of the screen by default (in IE 7.0).
                      >
                      > I am trying to get away without specifying an exact width for the
                      > dialog because I might change the text that is displayed in the
                      dialog
                      > in the future and that might involve me having to re-adjust the
                      width
                      > at that time.
                      >
                      > Is there a simple setting for invoking the Dialog that would ensure
                      > that the width is automatically set based on the text that is being
                      > displayed?
                      >
                      > Here's my source code. Thanks.
                      >
                      > <html>
                      > <head>
                      > <title>Dialog Test</title>
                      >
                      > <!-- YAHOO Global Object source file -->
                      > <script type="text/javascript"
                      > src="./yui/build/yahoo/yahoo-min.js" ></script>
                      >
                      > <!-- Source File -->
                      > <link rel="stylesheet" type="text/css"
                      > href="./yui/build/reset-fonts-grids/reset-fonts-grids.css"/>
                      >
                      > <!-- ************************* YAHOO Connection Manager
                      > ****************************** -->
                      > <!-- Used for Custom Events and event listener bindings -->
                      > <script type="text/javascript"
                      > src="./yui/build/event/event-min.js"></script>
                      >
                      > <!-- Source file -->
                      > <script type="text/javascript"
                      > src="./yui/build/connection/connection-min.js"></script>
                      > <!-- ************************* End of YAHOO Connection Manager
                      > ****************************** -->
                      >
                      > <!-- ************************* Dialog
                      > ****************************** -->
                      > <!-- CSS -->
                      > <link rel="stylesheet" type="text/css"
                      > href="./yui/build/container/assets/skins/sam/container.css">
                      >
                      > <!-- Dependencies -->
                      > <script type="text/javascript"
                      > src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
                      >
                      > <!-- OPTIONAL: Connection (not required if not using
                      > Dialog/SimpleDialog) -->
                      > <script type="text/javascript"
                      > src="./yui/build/connection/connection-min.js"></script>
                      >
                      > <!-- OPTIONAL: Animation (not required if not enabling
                      animation) -->
                      > <script type="text/javascript"
                      > src="./yui/build/animation/animation-min.js"></script>
                      >
                      > <!-- Source file -->
                      > <script type="text/javascript"
                      > src="./yui/build/container/container-min.js"></script>
                      >
                      > <!-- ************************* End of Dialog
                      > ****************************** -->
                      >
                      > <script language="Javascript" TYPE="text/javascript">
                      > function showDialog()
                      > {
                      > document.getElementById('testSection').style.display
                      = "block";
                      > var oWaitDialog = new YAHOO.widget.Dialog("waitDialog",
                      > {
                      > fixedcenter : true,
                      > visible : true,
                      > constraintoviewport : true,
                      > close: true,
                      > draggable : false
                      > }
                      > );
                      > oWaitDialog.render();
                      > }
                      > </script>
                      > </head>
                      > <body class="yui-skin-sam">
                      > <input type='button' value='Show Dialog'
                      > onClick='showDialog();'></input>
                      >
                      > <div id="testSection" style='display: none;'>
                      > <div id="waitDialog">
                      > <div class="hd"><div>Loading...</div></div>
                      > <div class="bd">
                      > <div>
                      > Loading the Dialog
                      > </div>
                      > </div>
                      > </div>
                      > </div>
                      >
                      > </body>
                      > </html>
                      >
                    • Saqib
                      Hi usually the dialog doesn t take th width of full screen but only the width of the content which is provided to be shown. Anyways try specifying the width of
                      Message 10 of 10 , Feb 5, 2008
                      • 0 Attachment
                        Hi
                        usually the dialog doesn't take th width of full screen but only the width of the content which is provided to be shown. Anyways try specifying the width of the dialog. i am sure it will work.

                        Regards
                        Saqib

                        On Feb 5, 2008 7:56 PM, sania <djogja_00@...> wrote:

                        --- In ydn-javascript@yahoogroups.com, "kc_6800"
                        <karthikchandrasekhar@...> wrote:
                        >
                        > Hi everyone,
                        >
                        > I am trying to show a dialog when the user clicks a button. I am
                        using
                        > YUI 2.3.0. The problem is that the dialog stretches to the entire
                        > width of the screen by default (in IE 7.0).
                        >
                        > I am trying to get away without specifying an exact width for the
                        > dialog because I might change the text that is displayed in the
                        dialog
                        > in the future and that might involve me having to re-adjust the
                        width
                        > at that time.
                        >
                        > Is there a simple setting for invoking the Dialog that would ensure
                        > that the width is automatically set based on the text that is being
                        > displayed?
                        >
                        > Here's my source code. Thanks.
                        >
                        > <html>
                        > <head>
                        > <title>Dialog Test</title>
                        >
                        > <!-- YAHOO Global Object source file -->
                        > <script type="text/javascript"
                        > src="./yui/build/yahoo/yahoo-min.js" ></script>
                        >
                        > <!-- Source File -->
                        > <link rel="stylesheet" type="text/css"
                        > href="./yui/build/reset-fonts-grids/reset-fonts-grids.css"/>
                        >
                        > <!-- ************************* YAHOO Connection Manager
                        > ****************************** -->
                        > <!-- Used for Custom Events and event listener bindings -->
                        > <script type="text/javascript"
                        > src="./yui/build/event/event-min.js"></script>
                        >
                        > <!-- Source file -->
                        > <script type="text/javascript"
                        > src="./yui/build/connection/connection-min.js"></script>
                        > <!-- ************************* End of YAHOO Connection Manager
                        > ****************************** -->
                        >
                        > <!-- ************************* Dialog
                        > ****************************** -->
                        > <!-- CSS -->
                        > <link rel="stylesheet" type="text/css"
                        > href="./yui/build/container/assets/skins/sam/container.css">
                        >
                        > <!-- Dependencies -->
                        > <script type="text/javascript"
                        > src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
                        >
                        > <!-- OPTIONAL: Connection (not required if not using
                        > Dialog/SimpleDialog) -->
                        > <script type="text/javascript"
                        > src="./yui/build/connection/connection-min.js"></script>
                        >
                        > <!-- OPTIONAL: Animation (not required if not enabling
                        animation) -->
                        > <script type="text/javascript"
                        > src="./yui/build/animation/animation-min.js"></script>
                        >
                        > <!-- Source file -->
                        > <script type="text/javascript"
                        > src="./yui/build/container/container-min.js"></script>
                        >
                        > <!-- ************************* End of Dialog
                        > ****************************** -->
                        >
                        > <script language="Javascript" TYPE="text/javascript">
                        > function showDialog()
                        > {
                        > document.getElementById('testSection').style.display
                        = "block";
                        > var oWaitDialog = new YAHOO.widget.Dialog("waitDialog",
                        > {
                        > fixedcenter : true,
                        > visible : true,
                        > constraintoviewport : true,
                        > close: true,
                        > draggable : false
                        > }
                        > );
                        > oWaitDialog.render();
                        > }
                        > </script>
                        > </head>
                        > <body class="yui-skin-sam">
                        > <input type='button' value='Show Dialog'
                        > onClick='showDialog();'></input>
                        >
                        > <div id="testSection" style='display: none;'>
                        > <div id="waitDialog">
                        > <div class="hd"><div>Loading...</div></div>
                        > <div class="bd">
                        > <div>
                        > Loading the Dialog
                        > </div>
                        > </div>
                        > </div>
                        > </div>
                        >
                        > </body>
                        > </html>
                        >


                      Your message has been successfully submitted and would be delivered to recipients shortly.