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

Definitive YUI Menu Button replacement for HTML Select Form Element

Expand Messages
  • D. Wayne Fincher
    The example can be found here: http://www.phphorizons.com/forum/examples/javascript/select-menu.html I ve seen the question posted a few times about attaching
    Message 1 of 8 , Sep 17, 2008
    • 0 Attachment
      The example can be found here:
      http://www.phphorizons.com/forum/examples/javascript/select-menu.html


      I've seen the question posted a few times about attaching an onClick
      event to the Menu of a Menu Button. The answer I've seen for these
      questions is to check out either the YUI Events page (tons of great
      info there by the way, definitely worth the look) and to look at the
      part of the YUI Button page about "Handling Events" or something to
      that affect.

      I've struggled with this and tried to avoid using YUI Menu Buttons in
      favor of just using HTML Select Elements because the select element
      has the default behavior of setting the Label of the select element to
      the selected option, which YUI Menu Buttons do not have. In fact,
      accomplishing such a thing turns out to be a rather convoluted deal
      IF, and I stress the IF, you want to instantiate the menu using a
      select element, without using onclick="" in the html, and/or you
      prefer to simply create the button first without going through what
      seems to me as a complete run around which is instantiating a menu
      first and adding a click function to each menu item individually.

      It is possible of course to instantiate the menu, and attach an
      onclick event listener to the menu, but why should that be necessary
      when Button makes a menu for you? Well, of course it's not necessary,
      but I've found it hard to do, and it seems like others have as well.
      Since I've managed to bang out a solution to the problem that to me,
      is relatively straightforward, I'll share it with the folks in the
      hopes that someone like me that struggled with this might find it useful.

      The ultimate goal here though is to convince the YUI guys to put this
      example or some form of it on their site! I think an example for
      Button that shows exactly how to replicate, exactly, the behavior of
      an HTML Select Menu (which I would presume would be a pretty common
      use of the Menu Button) would prove quite useful to many people.

      Please take a look at the page I've linked to. It has what to me, is
      the most compact and straightforward method of replicating a Select
      Element.

      It should be noted that my example requires one change as to how
      Select Elements are marked up in HTML.

      It will require an Input element that contains a value used for the
      Default label of the Menu. This element should have a class attached
      to it that allows the script to find this element. It will be the only
      part of the HTML that links us to the javascript. Alternatively, you
      could use an ID attribute and use the Dom.get method, and then you
      would skip the Dom.batch since you will only have one element to deal
      with, and go straight to the code in the batch function, but without
      using the batch method.

      The Input element must come immediately before the Select Element
      because I'm using Dom.getNextSibiling() on that Input Element in order
      to get the Menu. No ID's need to be placed on the elements. Where the
      code requires use of an ID, one is generated.
    • Walter Torres
      Nice work! Now, take this to the next step, if you please... How can we defined a default value/display for the Menu? As we can do that in the HTML SELECT
      Message 2 of 8 , Sep 18, 2008
      • 0 Attachment
        Nice work!

        Now, take this to the next step, if you please...

        How can we defined a default value/display for the Menu? As we can do
        that in the HTML SELECT Object.

        If I have a (lets say) a list of States, and I want to edit someone
        profile, then the State they defined when they signed up should be
        displayed in the MENU of states.

        I can't seem to figure how how to mimic that behavior in YUI Menu Button.

        Any ideas?

        Thanks, Walter
      • D. Wayne Fincher
        Thanks Walter Torres :D I ve looked at that one and it turns out that doing something like selected= selected doesn t force the menu to have a default
        Message 3 of 8 , Sep 19, 2008
        • 0 Attachment
          Thanks Walter Torres :D

          I've looked at that one and it turns out that doing something like
          selected="selected" doesn't force the menu to have a default selected
          menu. Through a bit of detective work, I've discovered that the menu
          items for the button do not exist as a javascript object until the
          button is clicked on. I assume that if a menu is passed into the Menu
          Button contructor, and that menu had menu items generated from
          javascript, that menu items would exist as objects before the menu is
          displayed.

          I could not find a "defaultSelectedItem" attribute, or anything to
          that affect in the API documenation (not yet anyways).

          That would certainly be key in figuring out a way to set that
          attribute with just html markup.

          If you do want to programatically check a menu item for attributes,
          you whould have to subscribe to the "show" event, at which point, menu
          items marked up in HTML would be available. I still couldn't find any
          difference between selected="selected" menu items and non selected
          menu items.

          My solution: toss in a "✔" at the right hand side of the text
          for the default selected menu item.

          No, this would not cause the form to submit that value, but the user
          shouldn't be expected to think that the form would submit it by
          default since the menu label would not match the checked item.
          ✔ is a check mark by the way lol.

          So, it's not what I wanted, it doesn't submit the default selected
          menu item by default, but it does indicate to the user what item was
          previously selected, so that at least they know that the value they
          selected before is shown to them.

          I hate to sound like I'm complaining, especially since I have found
          YUI to be TREMENDOUSLY helpful!! I can't emphasize that enough!

          But, but but, Menu Buttons really should have more functionality for
          replicating the behavior of select elements better and more naturally.

          In fact, I'd like to see a input text element included in button.
          Think about it, Button is really THE deal for making forms with YUI,
          but input type="text" is the only one that doesn't get a YUI
          treatment. Even text area gets a YUI treatment.

          If I were on the YUI team, I'd be proposing a YUI.widget.Form utility.

          Form would inherit all of button (extending Menu Button to replicate
          select elements exactly if an attribute is set to true, perhaps
          defaulted to false), and then it could inherit from RTE and/or Simple
          RTE. Combining those deals seems a natural thing to me. :S

          But back to the default selected. I hope someone knows how to do with
          with html markup! I really need it myself!


          --- In ydn-javascript@yahoogroups.com, "Walter Torres" <jsWalter@...>
          wrote:
          >
          > Nice work!
          >
          > Now, take this to the next step, if you please...
          >
          > How can we defined a default value/display for the Menu? As we can do
          > that in the HTML SELECT Object.
          >
          > If I have a (lets say) a list of States, and I want to edit someone
          > profile, then the State they defined when they signed up should be
          > displayed in the MENU of states.
          >
          > I can't seem to figure how how to mimic that behavior in YUI Menu
          Button.
          >
          > Any ideas?
          >
          > Thanks, Walter
          >
        • Todd Kloots
          D. Wayne & Walter - Todd Kloots here, author of the YUI Button widget. I wanted to follow up with you both regarding using the YUI Button of type menu as a
          Message 4 of 8 , Oct 11, 2008
          • 0 Attachment
            D. Wayne & Walter -

            Todd Kloots here, author of the YUI Button widget. I wanted to follow
            up with you both regarding using the YUI Button of type "menu" as a
            replacement for a <SELECT> element.

            As of YUI 2.6.0, when building a Button of type "menu" whose Menu is
            based on a <SELECT>, you can set the Button's default selected item by
            using the "selected" attribute of the <SELECT>.

            I created an example for you both:
            http://yuiblog.com/sandbox/yui/v260/examples/button/example01.php

            This example covers all of the various ways to use a Button of type
            "menu" to replace a <SELECT> element, and how to set a default value in
            each scenario. I wrote a lot of comments to explain things, so be sure
            to view the source.


            D. Wayne, in your previous message you wrote:

            "Through a bit of detective work, I've discovered that the menu items
            for the button do not exist as a javascript object until the button is
            clicked on. I assume that if a menu is passed into the Menu Button
            contructor, and that menu had menu items generated from javascript, that
            menu items would exist as objects before the menu is displayed."

            I wanted to let you know that this behavior (what I call lazy loading)
            is intentional. If you don't want this behavior, you can simply set a
            Button's "lazyloadmenu" attribute to "false" and all of the items in its
            Menu will be created and rendered upfront, as opposed to when the Button
            is initially clicked.

            I hope you find the new example helpful. Let me know if either of you
            have any further questions or suggestions.

            - Todd



            D. Wayne Fincher wrote:
            >
            > Thanks Walter Torres :D
            >
            > I've looked at that one and it turns out that doing something like
            > selected="selected" doesn't force the menu to have a default selected
            > menu. Through a bit of detective work, I've discovered that the menu
            > items for the button do not exist as a javascript object until the
            > button is clicked on. I assume that if a menu is passed into the Menu
            > Button contructor, and that menu had menu items generated from
            > javascript, that menu items would exist as objects before the menu is
            > displayed.
            >
            > I could not find a "defaultSelectedItem" attribute, or anything to
            > that affect in the API documenation (not yet anyways).
            >
            > That would certainly be key in figuring out a way to set that
            > attribute with just html markup.
            >
            > If you do want to programatically check a menu item for attributes,
            > you whould have to subscribe to the "show" event, at which point, menu
            > items marked up in HTML would be available. I still couldn't find any
            > difference between selected="selected" menu items and non selected
            > menu items.
            >
            > My solution: toss in a "✔" at the right hand side of the text
            > for the default selected menu item.
            >
            > No, this would not cause the form to submit that value, but the user
            > shouldn't be expected to think that the form would submit it by
            > default since the menu label would not match the checked item.
            > ✔ is a check mark by the way lol.
            >
            > So, it's not what I wanted, it doesn't submit the default selected
            > menu item by default, but it does indicate to the user what item was
            > previously selected, so that at least they know that the value they
            > selected before is shown to them.
            >
            > I hate to sound like I'm complaining, especially since I have found
            > YUI to be TREMENDOUSLY helpful!! I can't emphasize that enough!
            >
            > But, but but, Menu Buttons really should have more functionality for
            > replicating the behavior of select elements better and more naturally.
            >
            > In fact, I'd like to see a input text element included in button.
            > Think about it, Button is really THE deal for making forms with YUI,
            > but input type="text" is the only one that doesn't get a YUI
            > treatment. Even text area gets a YUI treatment.
            >
            > If I were on the YUI team, I'd be proposing a YUI.widget.Form utility.
            >
            > Form would inherit all of button (extending Menu Button to replicate
            > select elements exactly if an attribute is set to true, perhaps
            > defaulted to false), and then it could inherit from RTE and/or Simple
            > RTE. Combining those deals seems a natural thing to me. :S
            >
            > But back to the default selected. I hope someone knows how to do with
            > with html markup! I really need it myself!
            >
            > --- In ydn-javascript@yahoogroups.com
            > <mailto:ydn-javascript%40yahoogroups.com>, "Walter Torres" <jsWalter@...>
            > wrote:
            > >
            > > Nice work!
            > >
            > > Now, take this to the next step, if you please...
            > >
            > > How can we defined a default value/display for the Menu? As we can do
            > > that in the HTML SELECT Object.
            > >
            > > If I have a (lets say) a list of States, and I want to edit someone
            > > profile, then the State they defined when they signed up should be
            > > displayed in the MENU of states.
            > >
            > > I can't seem to figure how how to mimic that behavior in YUI Menu
            > Button.
            > >
            > > Any ideas?
            > >
            > > Thanks, Walter
            > >
            >
            >
          • D. Wayne Fincher
            Hi Todd Kloots, You sir are a genius! And again, the folks at YUI go above and beyond and set the bar even higher. That example will help out tremendously.
            Message 5 of 8 , Oct 11, 2008
            • 0 Attachment
              Hi Todd Kloots,

              You sir are a genius! And again, the folks at YUI go above and beyond
              and set the bar even higher. That example will help out tremendously.
              Rest assured that some of that code will make it's way into my scripts
              very soon. It all makes sense (except for one question I have), so I
              have no doubt I won't have any trouble getting it installed.

              Question: For the third button "oMenuButton3", you subscribe to the
              render event and add a listener to the submit event. If the form is
              submitted before the menu is rendered, I see that the submit event
              handler registers a second render event handler. ---- Do both render
              event handlers still handle the render event at that point? It seems
              like it would because the first render handler sets the
              selectedMenuItem, and the second render handler submits the form, but
              I am not 100% sure it works that way. ----

              I like how you went through every combination of pre existing html/no
              pre existing html, lazy load/no lazy load, and selected item/no
              selected item!

              /me bows before the great Todd Kloots
              ;)





              --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
              >
              > D. Wayne & Walter -
              >
              > Todd Kloots here, author of the YUI Button widget. I wanted to follow
              > up with you both regarding using the YUI Button of type "menu" as a
              > replacement for a <SELECT> element.
              >
              > As of YUI 2.6.0, when building a Button of type "menu" whose Menu is
              > based on a <SELECT>, you can set the Button's default selected item by
              > using the "selected" attribute of the <SELECT>.
              >
              > I created an example for you both:
              > http://yuiblog.com/sandbox/yui/v260/examples/button/example01.php
              >
              > This example covers all of the various ways to use a Button of type
              > "menu" to replace a <SELECT> element, and how to set a default value in
              > each scenario. I wrote a lot of comments to explain things, so be sure
              > to view the source.
            • D. Wayne Fincher
              I m back :P I ve just revisited the select menu deal and have a couple questions. I notice that you set the label for the button menu in the constructor on the
              Message 6 of 8 , Nov 1, 2008
              • 0 Attachment
                I'm back :P

                I've just revisited the select menu deal and have a couple questions.

                I notice that you set the label for the button menu in the constructor
                on the first example. (I'll focus on the first example for this entire
                post)

                I've checked a few things out, and without that label there, there
                won't be any text on the button, just on the menu. Not a problem yet. ;)

                I've checked the "selectedMenuItem" config using this code here:
                alert(oMenuButton1.get('selectedMenuItem'));

                As soon as the menu button is rendered, this is NULL. Clicking on the
                button to display the menu, but without clicking on any of the menu
                items, it's still NULL. After clicking a menu item, it then shows the
                selected menu item.

                I did see the form does submit the default selected item though, which
                is great.

                The next step for me is to be able to detect, programatically, which
                menu item is selected. I suppose I could get all the option elements
                and check each one for the selected item, but I'm assuming YUI Button
                is already doing this, else it wouldn't know which menu item was selected.

                I'm not sure where that data is stored though, since
                "selectedMenuItem" just doesn't seem to contain the data, until a menu
                item is actually clicked on.

                I've taken the example from the previous post, and stripped it down to
                just one select button menu. The form does submit, and the default
                menu item is passed in the form.

                I've got a button on there that lets me check the "selectedMenuItem"
                at any time, and I put a button in there that does:
                "YAHOO.widget.Button.addHiddenFieldsToForm" that. I figured that using
                that, then checking the "selectedMenuItem" might show me the default.
                Didn't work lol.

                The page I have this example posted on is:
                http://www.phphorizons.com/test.php

                Thanks for checking it out :D
              • Todd Kloots
                To provide a very late answer to your question: Yes, both render event handlers are called.
                Message 7 of 8 , Dec 9, 2008
                • 0 Attachment
                  To provide a very late answer to your question: Yes, both render event handlers are called.

                  On Oct 11, 2008, at 10:54 AM, D. Wayne Fincher wrote:

                  Hi Todd Kloots,

                  You sir are a genius! And again, the folks at YUI go above and beyond
                  and set the bar even higher. That example will help out tremendously.
                  Rest assured that some of that code will make it's way into my scripts
                  very soon. It all makes sense (except for one question I have), so I
                  have no doubt I won't have any trouble getting it installed.

                  Question: For the third button "oMenuButton3" , you subscribe to the
                  render event and add a listener to the submit event. If the form is
                  submitted before the menu is rendered, I see that the submit event
                  handler registers a second render event handler. ---- Do both render
                  event handlers still handle the render event at that point? It seems
                  like it would because the first render handler sets the
                  selectedMenuItem, and the second render handler submits the form, but
                  I am not 100% sure it works that way. ----

                  I like how you went through every combination of pre existing html/no
                  pre existing html, lazy load/no lazy load, and selected item/no
                  selected item!

                  /me bows before the great Todd Kloots
                  ;)

                  --- In ydn-javascript@ yahoogroups. com, Todd Kloots <kloots@...> wrote:
                  >
                  > D. Wayne & Walter -
                  > 
                  > Todd Kloots here, author of the YUI Button widget. I wanted to follow 
                  > up with you both regarding using the YUI Button of type "menu" as a 
                  > replacement for a <SELECT> element.
                  > 
                  > As of YUI 2.6.0, when building a Button of type "menu" whose Menu is 
                  > based on a <SELECT>, you can set the Button's default selected item by 
                  > using the "selected" attribute of the <SELECT>.
                  > 
                  > I created an example for you both: 
                  > http://yuiblog. com/sandbox/ yui/v260/ examples/ button/example01 .php
                  > 
                  > This example covers all of the various ways to use a Button of type 
                  > "menu" to replace a <SELECT> element, and how to set a default value in 
                  > each scenario. I wrote a lot of comments to explain things, so be sure 
                  > to view the source.


                • D. Wayne Fincher
                  No worries :) I see you ve been very busy here hehe Thanks for the help!
                  Message 8 of 8 , Dec 10, 2008
                  • 0 Attachment
                    No worries :) I see you've been very busy here hehe

                    Thanks for the help!

                    --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
                    >
                    > To provide a very late answer to your question: Yes, both render
                    > event handlers are called.
                    >
                    > On Oct 11, 2008, at 10:54 AM, D. Wayne Fincher wrote:
                    >
                    > > Hi Todd Kloots,
                    > >
                    > > You sir are a genius! And again, the folks at YUI go above and beyond
                    > > and set the bar even higher. That example will help out tremendously.
                    > > Rest assured that some of that code will make it's way into my scripts
                    > > very soon. It all makes sense (except for one question I have), so I
                    > > have no doubt I won't have any trouble getting it installed.
                    > >
                    > > Question: For the third button "oMenuButton3", you subscribe to the
                    > > render event and add a listener to the submit event. If the form is
                    > > submitted before the menu is rendered, I see that the submit event
                    > > handler registers a second render event handler. ---- Do both render
                    > > event handlers still handle the render event at that point? It seems
                    > > like it would because the first render handler sets the
                    > > selectedMenuItem, and the second render handler submits the form, but
                    > > I am not 100% sure it works that way. ----
                    > >
                    > > I like how you went through every combination of pre existing html/no
                    > > pre existing html, lazy load/no lazy load, and selected item/no
                    > > selected item!
                    > >
                    > > /me bows before the great Todd Kloots
                    > > ;)
                    > >
                    > > --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@> wrote:
                    > > >
                    > > > D. Wayne & Walter -
                    > > >
                    > > > Todd Kloots here, author of the YUI Button widget. I wanted to
                    > > follow
                    > > > up with you both regarding using the YUI Button of type "menu" as a
                    > > > replacement for a <SELECT> element.
                    > > >
                    > > > As of YUI 2.6.0, when building a Button of type "menu" whose Menu is
                    > > > based on a <SELECT>, you can set the Button's default selected
                    > > item by
                    > > > using the "selected" attribute of the <SELECT>.
                    > > >
                    > > > I created an example for you both:
                    > > > http://yuiblog.com/sandbox/yui/v260/examples/button/example01.php
                    > > >
                    > > > This example covers all of the various ways to use a Button of type
                    > > > "menu" to replace a <SELECT> element, and how to set a default
                    > > value in
                    > > > each scenario. I wrote a lot of comments to explain things, so be
                    > > sure
                    > > > to view the source.
                    > >
                    > >
                    > >
                    >
                  Your message has been successfully submitted and would be delivered to recipients shortly.