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

How can I manage events in a Button created from a ?

Expand Messages
  • Denis
    I have a Button object created from an existing markup . The Button is correctly renderend and the menu I see when I press it lists all the
    Message 1 of 9 , Oct 3, 2007
    • 0 Attachment
      I have a Button object created from an existing markup <SELECT>. The
      Button is correctly renderend and the menu I see when I press it lists
      all the <OPTION> items available in the <SELECT>, but when I click on
      an item from the menu nothing happens. I tried to create different
      Event.addListener to that object, but nothing happens.

      The only way I can link a function to an item in the menu is to create
      the Button from javascript...

      This is the code to create the Button:

      var oMenuDate = new YAHOO.widget.Button("menudate", { type: "menu",
      menu: "filterDate" })

      and filterDate is the id of

      <select id="filterDate" style="width: 85px;" name="filterDate">
      <option value="">All Dates</option>
      <option value="sdd=2007-3-10">Today</option>
      <option value="sdd=2007-2-10">Yesterday</option>
      <option value="sdf=2007-30-9">Last 3 days</option>
      <option value="sdf=2007-19-9">Last week</option>
      <option value="sdf=2007-3-9">Last Month</option>
      </select>

      What's the correct code to say: "When you click on one item do
      something?". I think something like

      YAHOO.util.Event.addListener(oMenuDate, "change", filterContent);

      but I tried different events, but without success.

      Thanks
    • Gopal Venkatesan
      ... If the input/button type of menudate is submit , you don t have to do anything, the form is submitted automatigically when you select an option
      Message 2 of 9 , Oct 3, 2007
      • 0 Attachment
        On Wed, Oct 03, 2007 at 10:05:43AM -0000, Denis wrote:
        > I have a Button object created from an existing markup <SELECT>. The
        > Button is correctly renderend and the menu I see when I press it lists
        > all the <OPTION> items available in the <SELECT>, but when I click on
        > an item from the menu nothing happens. I tried to create different
        > Event.addListener to that object, but nothing happens.
        >
        > The only way I can link a function to an item in the menu is to create
        > the Button from javascript...
        >
        > This is the code to create the Button:
        >
        > var oMenuDate = new YAHOO.widget.Button("menudate", { type: "menu",
        > menu: "filterDate" })
        >
        > and filterDate is the id of
        >
        > <select id="filterDate" style="width: 85px;" name="filterDate">
        <snip>

        If the input/button type of "menudate" is "submit", you don't have to
        do anything, the form is submitted automatigically when you select an
        option from the menu button.

        --
        Gopal Venkatesan

        http://gopalarathnam.com/weblog/
      • Denis
        ... The button is not a submit one, but it s a menu button. Thanks -d
        Message 3 of 9 , Oct 3, 2007
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, Gopal Venkatesan <gopal@...> wrote:
          >
          > On Wed, Oct 03, 2007 at 10:05:43AM -0000, Denis wrote:
          > > I have a Button object created from an existing markup <SELECT>. The
          > > Button is correctly renderend and the menu I see when I press it lists
          > > all the <OPTION> items available in the <SELECT>, but when I click on
          > > an item from the menu nothing happens. I tried to create different
          > > Event.addListener to that object, but nothing happens.
          > >
          > > The only way I can link a function to an item in the menu is to create
          > > the Button from javascript...
          > >
          > > This is the code to create the Button:
          > >
          > > var oMenuDate = new YAHOO.widget.Button("menudate", { type: "menu",
          > > menu: "filterDate" })
          > >
          > > and filterDate is the id of
          > >
          > > <select id="filterDate" style="width: 85px;" name="filterDate">
          > <snip>
          >
          > If the input/button type of "menudate" is "submit", you don't have to
          > do anything, the form is submitted automatigically when you select an
          > option from the menu button.
          >
          > --
          > Gopal Venkatesan
          >
          > http://gopalarathnam.com/weblog/
          >

          The button is not a "submit" one, but it's a "menu" button.
          Thanks

          -d
        • Gopal Venkatesan
          ... Since you mentioned you re creating the Button object from the existing markup, what element has the id menudate ? Ideally, the menu button markup would
          Message 4 of 9 , Oct 3, 2007
          • 0 Attachment
            On Wed, Oct 03, 2007 at 10:41:34AM -0000, Denis wrote:
            > --- In ydn-javascript@yahoogroups.com, Gopal Venkatesan <gopal@...> wrote:
            > >
            > > If the input/button type of "menudate" is "submit", you don't have to
            > > do anything, the form is submitted automatigically when you select an
            > > option from the menu button.
            > >
            >
            > The button is not a "submit" one, but it's a "menu" button.

            Since you mentioned you're creating the "Button" object from the
            existing markup, what element has the id "menudate"?

            Ideally, the menu button markup would be something like:

            <input type="submit" id="menudate" value="Filter">
            <select id="filterDate">
            <option value="1">One</option>
            <option value="2">Two</option>
            <!-- ... -->
            </select>

            Then, you can use:

            YAHOO.widget.Button("menudate", { type: "menu", menu: "filterDate" })

            Instead of the "input" element, you can also use the "button"
            element like:

            <button id="menudate" type="submit">Filter</button>

            IE has a strange bug, if you don't specify the "type" attribute,
            clicking on the button does not submit the form (not in this context
            though), so I'll try to include it always.

            --
            Gopal Venkatesan

            http://gopalarathnam.com/weblog/
          • Denis
            ... to ... an ... I tried to use a as you suggest, but nothing happens, maybe because my item is not inside a element. I created my
            Message 5 of 9 , Oct 3, 2007
            • 0 Attachment
              --- In ydn-javascript@yahoogroups.com, Gopal Venkatesan <gopal@...> wrote:
              >
              > On Wed, Oct 03, 2007 at 10:41:34AM -0000, Denis wrote:
              > > --- In ydn-javascript@yahoogroups.com, Gopal Venkatesan gopal@ wrote:
              > > >
              > > > If the input/button type of "menudate" is "submit", you don't have to
              > > > do anything, the form is submitted automatigically when you select an
              > > > option from the menu button.
              > > >
              > >
              > > The button is not a "submit" one, but it's a "menu" button.
              >
              > Since you mentioned you're creating the "Button" object from the
              > existing markup, what element has the id "menudate"?
              >
              > Ideally, the menu button markup would be something like:
              >
              > <input type="submit" id="menudate" value="Filter">
              > <select id="filterDate">
              > <option value="1">One</option>
              > <option value="2">Two</option>
              > <!-- ... -->
              > </select>
              >
              > Then, you can use:
              >
              > YAHOO.widget.Button("menudate", { type: "menu", menu: "filterDate" })
              >
              > Instead of the "input" element, you can also use the "button"
              > element like:
              >
              > <button id="menudate" type="submit">Filter</button>
              >
              > IE has a strange bug, if you don't specify the "type" attribute,
              > clicking on the button does not submit the form (not in this context
              > though), so I'll try to include it always.
              >
              > --
              > Gopal Venkatesan
              >
              > http://gopalarathnam.com/weblog/
              >

              I tried to use a <button> as you suggest, but nothing happens, maybe because my <input> item is not inside a <form> element. I created my menu as you can show in Button 2 in example 7 in YUI Button Examples.

              <input type="button" id="menubutton2" name="menubutton2_button" value="Menu Button 2">
              <select id="menubutton2select" name="menubutton2select">
                      <option value="0">One</option>
                      <option value="1">Two</option>
                      <option value="2">Three</option>               
              </select>

              ...

              var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menu", menu: "menubutton2select" });
            • Denis
              ... to ... an ... I tried to use a as you suggest, but nothing happens, maybe because my item is not inside a element. I created my
              Message 6 of 9 , Oct 3, 2007
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, Gopal Venkatesan <gopal@...> wrote:
                >
                > On Wed, Oct 03, 2007 at 10:41:34AM -0000, Denis wrote:
                > > --- In ydn-javascript@yahoogroups.com, Gopal Venkatesan gopal@ wrote:
                > > >
                > > > If the input/button type of "menudate" is "submit", you don't have to
                > > > do anything, the form is submitted automatigically when you select an
                > > > option from the menu button.
                > > >
                > >
                > > The button is not a "submit" one, but it's a "menu" button.
                >
                > Since you mentioned you're creating the "Button" object from the
                > existing markup, what element has the id "menudate"?
                >
                > Ideally, the menu button markup would be something like:
                >
                > <input type="submit" id="menudate" value="Filter">
                > <select id="filterDate">
                > <option value="1">One</option>
                > <option value="2">Two</option>
                > <!-- ... -->
                > </select>
                >
                > Then, you can use:
                >
                > YAHOO.widget.Button("menudate", { type: "menu", menu: "filterDate" })
                >
                > Instead of the "input" element, you can also use the "button"
                > element like:
                >
                > <button id="menudate" type="submit">Filter</button>
                >
                > IE has a strange bug, if you don't specify the "type" attribute,
                > clicking on the button does not submit the form (not in this context
                > though), so I'll try to include it always.
                >
                > --
                > Gopal Venkatesan
                >
                > http://gopalarathnam.com/weblog/
                >

                I tried to use a <button> as you suggest, but nothing happens, maybe because my <input> item is not inside a <form> element. I created my menu as you can show in Button 2 in example 7 in YUI Button Examples.

                <input type="button" id="menubutton2" name="menubutton2_button" value="Menu Button 2">
                <select id="menubutton2select" name="menubutton2select">
                        <option value="0">One</option>
                        <option value="1">Two</option>
                        <option value="2">Three</option>               
                </select>

                ...

                var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menu", menu: "menubutton2select" });
              • Gopal Venkatesan
                ... Yes, all input controls should be inside a form element. -- Gopal Venkatesan http://gopalarathnam.com/weblog/
                Message 7 of 9 , Oct 3, 2007
                • 0 Attachment
                  On Wed, Oct 03, 2007 at 01:33:35PM -0000, Denis wrote:
                  >
                  >
                  > I tried to use a <button> as you suggest, but nothing happens, maybe
                  > because my <input> item is not inside a <form> element. I created my
                  > menu as you can show in Button 2 in example 7 in YUI Button Examples.
                  >

                  Yes, all input controls should be inside a form element.

                  --
                  Gopal Venkatesan

                  http://gopalarathnam.com/weblog/
                • Todd Kloots
                  Hi Denis - If you are building a Button from existing markup then you can add an event listener to the Button s Menu instance by simply subscribing to the
                  Message 8 of 9 , Oct 3, 2007
                  • 0 Attachment
                    Hi Denis -

                    If you are building a Button from existing markup then you can add an
                    event listener to the Button's Menu instance by simply subscribing to
                    the Menu's "click" event. The MenuItem that is clicked will be passed
                    back to your "click" event handler. I created an example for you:

                    http://yuiblog.com/sandbox/yui/v231/examples/button/example03.html

                    - Todd

                    Denis wrote:
                    >
                    > I have a Button object created from an existing markup <SELECT>. The
                    > Button is correctly renderend and the menu I see when I press it lists
                    > all the <OPTION> items available in the <SELECT>, but when I click on
                    > an item from the menu nothing happens. I tried to create different
                    > Event.addListener to that object, but nothing happens.
                    >
                    > The only way I can link a function to an item in the menu is to create
                    > the Button from javascript...
                    >
                    > This is the code to create the Button:
                    >
                    > var oMenuDate = new YAHOO.widget.Button("menudate", { type: "menu",
                    > menu: "filterDate" })
                    >
                    > and filterDate is the id of
                    >
                    > <select id="filterDate" style="width: 85px;" name="filterDate">
                    > <option value="">All Dates</option>
                    > <option value="sdd=2007-3-10">Today</option>
                    > <option value="sdd=2007-2-10">Yesterday</option>
                    > <option value="sdf=2007-30-9">Last 3 days</option>
                    > <option value="sdf=2007-19-9">Last week</option>
                    > <option value="sdf=2007-3-9">Last Month</option>
                    > </select>
                    >
                    > What's the correct code to say: "When you click on one item do
                    > something?". I think something like
                    >
                    > YAHOO.util.Event.addListener(oMenuDate, "change", filterContent);
                    >
                    > but I tried different events, but without success.
                    >
                    > Thanks
                    >
                    >
                  • Denis
                    ... That s great... Thanks a lot
                    Message 9 of 9 , Oct 3, 2007
                    • 0 Attachment
                      --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
                      >
                      > Hi Denis -
                      >
                      > If you are building a Button from existing markup then you can add an
                      > event listener to the Button's Menu instance by simply subscribing to
                      > the Menu's "click" event. The MenuItem that is clicked will be passed
                      > back to your "click" event handler. I created an example for you:
                      >
                      > http://yuiblog.com/sandbox/yui/v231/examples/button/example03.html
                      >
                      > - Todd
                      >
                      > Denis wrote:
                      > >
                      > > I have a Button object created from an existing markup <SELECT>. The
                      > > Button is correctly renderend and the menu I see when I press it lists
                      > > all the <OPTION> items available in the <SELECT>, but when I click on
                      > > an item from the menu nothing happens. I tried to create different
                      > > Event.addListener to that object, but nothing happens.
                      > >
                      > > The only way I can link a function to an item in the menu is to create
                      > > the Button from javascript...
                      > >
                      > > This is the code to create the Button:
                      > >
                      > > var oMenuDate = new YAHOO.widget.Button("menudate", { type: "menu",
                      > > menu: "filterDate" })
                      > >
                      > > and filterDate is the id of
                      > >
                      > > <select id="filterDate" style="width: 85px;" name="filterDate">
                      > > <option value="">All Dates</option>
                      > > <option value="sdd=2007-3-10">Today</option>
                      > > <option value="sdd=2007-2-10">Yesterday</option>
                      > > <option value="sdf=2007-30-9">Last 3 days</option>
                      > > <option value="sdf=2007-19-9">Last week</option>
                      > > <option value="sdf=2007-3-9">Last Month</option>
                      > > </select>
                      > >
                      > > What's the correct code to say: "When you click on one item do
                      > > something?". I think something like
                      > >
                      > > YAHOO.util.Event.addListener(oMenuDate, "change", filterContent);
                      > >
                      > > but I tried different events, but without success.
                      > >
                      > > Thanks
                      > >
                      > >
                      >
                      That's great... Thanks a lot
                    Your message has been successfully submitted and would be delivered to recipients shortly.