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

Re: YUI menu and Dialog not working correctly - possible bug

Expand Messages
  • markovuksanovic
    I after a little research i have discovered that if I firstly create the menu and after that create the dialog (as shown below and in my previous post) the
    Message 1 of 2 , Dec 27, 2007
    • 0 Attachment
      I after a little "research" i have discovered that if I firstly create the menu and after that create the dialog (as shown below and in my previous post) the submit event is fired every time I click an item in the "File" menu item (that is, any of the following items - "File", "Exit", "Log in...").  The other thing I have noticed is that the submit and cancel event handlers are not registered with the  buttons in the dialog (obviously they are registered somehow with some of the menu items.)

                                          YAHOO.util.Event.onDOMReady(function () {
                                            
                                              /*
                                                   Instantiate a MenuBar:  The first argument passed to the
                                                   constructor is the id of the element to be created; the
                                                   second is an object literal of configuration properties.
                                              */
                                         
                                              var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
                                                                                          lazyload: true,
                                                                                          itemdata: aItemData
                                                                                          });
                                         
                                         
                                              /*
                                                   Since this MenuBar instance is built completely from
                                                   script, call the "render" method passing in a node
                                                   reference for the DOM element that its should be
                                                   appended to.
                                              */
                                         
                                              oMenuBar.render(document.body);
                                             
                                         
                                              /*
                                                  Add a "show" event listener that keeps the left-most
                                                  submenu against the left edge of the browser viewport.
                                              */
                                             
      initDialog();
                                             
                                             
                                          });

      If i firstly create the dialog and after that the menu everything works fine:

                                          YAHOO.util.Event.onDOMReady(function () {
                                              initDialog();
                                              /*
                                                   Instantiate a MenuBar:  The first argument passed to the
                                                   constructor is the id of the element to be created; the
                                                   second is an object literal of configuration properties.
                                              */
                                         
                                              var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
                                                                                          lazyload: true,
                                                                                          itemdata: aItemData
                                                                                          });
                                         
                                         
                                              /*
                                                   Since this MenuBar instance is built completely from
                                                   script, call the "render" method passing in a node
                                                   reference for the DOM element that its should be
                                                   appended to.
                                              */
                                         
                                              oMenuBar.render(document.body);
                                             
                                         
                                              /*
                                                  Add a "show" event listener that keeps the left-most
                                                  submenu against the left edge of the browser viewport.
                                              */
                                             

                                             
                                             
                                          });
      I believe this is some kind of a bug.

      --- In ydn-javascript@yahoogroups.com, "markovuksanovic" <markovuksanovic@...> wrote:
      >
      > I am trying to build a simple app that opens a dialog on a menu item
      > click,.. But whenever i click the (parrent) menu item it fires the
      > "submit" event of the dialog,.. Precisely,.. File menu contains "Log
      > in..." and "Exit" menu items,.. when i click "File" it causes the submit
      > handler of the dialog to be executed.
      > I really cann't see what might cause this behaviour. Any help would be
      > greatly appreciated.
      >
      > Thanks in advance
      > Marko Vuksanovic.
      >
      > The code i use is shown below:
      >
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > "http://www.w3.org/TR/html4/strict.dtd">
      > <html>
      > <head>
      > <title>Flickr - desktop</title>
      > <meta http-equiv="content-type" content="text/html; charset=utf-8">
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/assets/yui.css" >
      >
      > <style>
      > /*Supplemental CSS for the YUI distribution*/
      > #custom-doc { width: 95%; min-width: 950px; }
      > #pagetitle {background-image: url(lib/YahooUI/assets/bg_hd.gif);}
      > #pagetitle h1 {background-image:
      > url(lib/YahooUI/assets/title_h_bg.gif);}
      >
      > </style>
      >
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/assets/dpSyntaxHighlighter.css">
      > <!--Script and CSS includes for YUI dependencies on this page-->
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/logger/assets/skins/sam/logger.css" />
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/tabview/assets/skins/sam/tabview.css" />
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/button/assets/skins/sam/button.css" />
      > <script type="text/javascript"
      > src="lib/YahooUI/yahoo/yahoo-min.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/event/event-min.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/dom/dom-min.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/logger/logger-min.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/imageloader/imageloader-beta-debug.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/element/element-beta-min.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/tabview/tabview-min.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/button/button-min.js"></script>
      >
      > <!--there is no custom header content for this example-->
      >
      > <!-- Standard reset and fonts -->
      >
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/reset/reset.css">
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/fonts/fonts.css">
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/container/assets/skins/sam/container.css">
      >
      >
      > <!-- CSS for Menu -->
      >
      > <link rel="stylesheet" type="text/css"
      > href="lib/YahooUI/menu/assets/skins/sam/menu.css">
      >
      > <!-- Page-specific styles -->
      >
      > <style type="text/css">
      >
      > html {
      >
      > background-color: #dfb8df;
      >
      > }
      >
      > em#yahoolabel {
      >
      > text-indent: -6em;
      > display: block;
      > background:
      > url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) center
      > center no-repeat;
      > width: 2em;
      > overflow: hidden;
      >
      > }
      >
      >
      > /*
      > Setting the "zoom" property to "1" triggers the "hasLayout"
      > property in IE. This is necessary to fix a bug IE where
      > mousing mousing off a the text node of MenuItem instance's
      > text label, or help text without the mouse actually exiting the
      > boundaries of the MenuItem instance will result in the losing
      > the background color applied when it is selected.
      > */
      >
      > .yuimenuitem {
      > z-index: 10000;
      > }
      >
      > #filemenu.visible .yuimenuitemlabel,
      > #editmenu.visible .yuimenuitemlabel {
      >
      > zoom: 1;
      >
      > }
      >
      > </style>
      >
      > <!-- Dependency source files -->
      >
      > <script type="text/javascript"
      > src="lib/YahooUI/utilities/utilities.js"></script>
      > <script type="text/javascript"
      > src="lib/YahooUI/container/container.js"></script>
      >
      >
      > <!-- Menu source file -->
      >
      > <script type="text/javascript" src="lib/YahooUI/menu/menu.js"></script>
      >
      >
      > </head>
      > <body id="yahoo-com" class=" yui-skin-sam">
      > <div id="custom-doc" style="margin:auto;text-align:left;width: 90%;
      > padding: 10px; min-width:750px;">
      >
      > <div id="bd">
      >
      > <div>
      > </div>
      > <div id="yui-main">
      > <div class="yui-b">
      > <div class="yui-ge">
      > <div>
      > <div class="promo">
      > <div class="example-container module ">
      > <div id="example-canvas" class="bd">
      >
      > <!--BEGIN SOURCE CODE FOR EXAMPLE
      > =============================== -->
      >
      > <html>
      >
      > <!-- optional skin for border tabs -->
      > <link rel='stylesheet' type='text/css'
      > href='http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.cs\
      > s'>
      >
      > <style type='text/css'>
      > #demo { width:350px; }
      > #demo .yui-content { padding:20px; }
      > /* pad content container */
      > #demo img { margin-right:20px; }
      > #tabone, #tabtwo, #tabthree {
      > height:80px; }
      > </style>
      >
      > <div id='demo' class='yui-navset'>
      > <ul class='yui-nav'>
      > <li class='selected'
      > id='tabOneLabel'><a href='#tabone'><em>Tab One</em></a></li>
      > <li id='tabTwoLabel'><a
      > href='#tabtwo'><em>Tab Two</em></a></li>
      > <li id='tabThreeLabel'><a
      > href='#tabthree'><em>Tab Three</em></a></li>
      > </ul>
      > <div class='yui-content'>
      > <div id='tabone'>
      > <img id='imgOne'
      > src='http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/s\
      > mall/museum.jpg' />
      > </div>
      > <div id='tabtwo'>
      > <img id='imgTwo'
      > title='"imgTwo"' />
      > <img id='imgThree'
      > title='"imgThree"' />
      > </div>
      > <div id='tabthree'>
      > <img id='imgFour'
      > title='"imgFour"' />
      > <img id='imgFive'
      > title='"imgFive"' />
      > </div>
      > </div>
      > </div>
      >
      > <div id="dialog1">
      > <div class="hd">Please enter your
      > information</div>
      > <div class="bd">
      > <div>
      > <label for="firstname">First
      > Name:</label><input type="textbox" name="firstname" />
      > <label for="lastname">Last
      > Name:</label><input type="textbox" name="lastname" />
      > <label
      > for="email">E-mail:</label><input type="textbox" name="email" />
      >
      > <label
      > for="state[]">State:</label>
      > <select multiple
      > name="state[]">
      > <option
      > value="California">California</option>
      > <option value="New
      > Jersey">New Jersey</option>
      > <option value="New
      > York">New York</option>
      > </select>
      >
      > <div
      > class="clear"></div>
      >
      > <label
      > for="radiobuttons">Radio buttons:</label>
      > <input type="radio"
      > name="radiobuttons[]" value="1" checked/> 1
      > <input type="radio"
      > name="radiobuttons[]" value="2" /> 2
      >
      > <div
      > class="clear"></div>
      >
      > <label for="check">Single
      > checkbox:</label><input type="checkbox" name="check" value="1" /> 1
      >
      > <label for="textarea">Text
      > area:</label><textarea name="textarea"></textarea>
      >
      > <div
      > class="clear"></div>
      >
      > <label for="cbarray">Multi
      > checkbox:</label>
      > <input type="checkbox"
      > name="cbarray[]" value="1" /> 1
      > <input type="checkbox"
      > name="cbarray[]" value="2" /> 2
      > </div>
      > </div>
      > </div>
      >
      >
      > <script>
      > function initDialog() {
      >
      > YAHOO.namespace("example.container");
      > // Define various event
      > handlers for Dialog
      > var handleDialogSubmit =
      > function(){
      > alert("submit");
      > //this.submit();
      > };
      > var handleDialogCancel =
      > function(){
      > this.cancel();
      > };
      > var handleSuccess =
      > function(o){
      > alert("Submission
      > succedeed: " + o.status);
      > };
      > var handleFailure =
      > function(o){
      > alert("Submission
      > failed: " + o.status);
      > };
      >
      > // Instantiate the Dialog
      >
      > YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", {
      > width: "300px",
      > fixedcenter: true,
      > visible: false,
      > constraintoviewport:
      > true,
      > buttons: [{
      > text: "Submit",
      > handler:
      > handleDialogSubmit
      > }, {
      > text: "Cancel",
      > handler:
      > handleDialogCancel
      > }]
      > });
      >
      > // Wire up the success and
      > failure handlers
      >
      > YAHOO.example.container.dialog1.callback = {
      > success: handleSuccess,
      > failure: handleFailure
      > };
      >
      > // Render the Dialog
      >
      > YAHOO.example.container.dialog1.render();
      > }
      >
      > var tabView = new
      > YAHOO.widget.TabView('demo');
      >
      > var tabTwoImageGroup = new
      > YAHOO.util.ImageLoader.group('tabTwoLabel', 'mouseover');
      >
      > tabTwoImageGroup.registerSrcImage('imgTwo',
      > 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small\
      > /uluru.jpg');
      >
      > tabTwoImageGroup.registerSrcImage('imgThree',
      > 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small\
      > /katatjuta.jpg');
      >
      > tabTwoImageGroup.addTrigger('tabTwoLabel', 'focus');
      > tabTwoImageGroup.name =
      > 'tab_two_group';
      >
      > var tabThreeImageGroup = new
      > YAHOO.util.ImageLoader.group('tabThreeLabel', 'mouseover');
      >
      > tabThreeImageGroup.registerSrcImage('imgFour',
      > 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small\
      > /morraine.jpg');
      >
      > tabThreeImageGroup.registerSrcImage('imgFive',
      > 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small\
      > /japan.jpg');
      >
      > tabThreeImageGroup.addTrigger('tabThreeLabel', 'focus');
      > tabThreeImageGroup.name =
      > 'tab_three_group';
      >
      > // "click" event handler for each
      > MenuItem instance
      >
      > function onMenuItemClick(p_sType,
      > p_aArgs, p_oValue) {
      >
      > alert(("index: " +
      > this.index +
      > ", text: " +
      > this.cfg.getProperty("text") +
      > ", value: " + p_oValue),
      > "info", "example9");
      >
      > //YAHOO.example.container.dialog1.show();
      >
      > }
      >
      >
      > /*
      > Define an array of object literals,
      > each containing
      > the data necessary to create the
      > items for a MenuBar.
      > */
      >
      > var aItemData = [
      >
      > {
      > text: "File",
      > submenu: {
      > id: "filemenu",
      > itemdata: [
      >
      > { text: "Log in...",
      > helptext: "Ctrl + L", onclick: { fn: onMenuItemClick } },
      > { text: "Exit",
      > helptext: "Ctrl + C" }
      >
      > ]
      > }
      >
      > },
      >
      > {
      > text: "Edit",
      > submenu: {
      > id: "editmenu",
      > itemdata: [
      >
      > [
      > { text: "Undo",
      > helptext: "Ctrl + Z" },
      > { text: "Redo",
      > helptext: "Ctrl + Y", disabled: true }
      > ],
      >
      > [
      > { text: "Cut",
      > helptext: "Ctrl + X", disabled: true },
      > { text: "Copy",
      > helptext: "Ctrl + C", disabled: true },
      > { text: "Paste",
      > helptext: "Ctrl + V" },
      > { text:
      > "Delete", helptext: "Del", disabled: true }
      > ],
      >
      > [ { text: "Select
      > All", helptext: "Ctrl + A" } ],
      >
      > [
      > { text: "Find",
      > helptext: "Ctrl + F" },
      > { text: "Find
      > Again", helptext: "Ctrl + G" }
      > ]
      >
      > ] }
      >
      > },
      >
      > "Help"
      > ];
      >
      > /*
      > Initialize and render the
      > MenuBar when the page's DOM is ready
      > to be scripted.
      > */
      >
      > YAHOO.util.Event.onDOMReady(function
      > () {
      >
      > /*
      > Instantiate a MenuBar: The
      > first argument passed to the
      > constructor is the id of
      > the element to be created; the
      > second is an object literal
      > of configuration properties.
      > */
      >
      > var oMenuBar = new
      > YAHOO.widget.MenuBar("mymenubar", {
      >
      > lazyload: true,
      >
      > itemdata: aItemData
      >
      > });
      >
      >
      > /*
      > Since this MenuBar instance
      > is built completely from
      > script, call the "render"
      > method passing in a node
      > reference for the DOM
      > element that its should be
      > appended to.
      > */
      >
      > oMenuBar.render(document.body);
      >
      >
      > /*
      > Add a "show" event listener
      > that keeps the left-most
      > submenu against the left
      > edge of the browser viewport.
      > */
      >
      > initDialog();
      >
      >
      > });
      >
      >
      > </script>
      >
      > </html>
      >
      > <!--END SOURCE CODE FOR EXAMPLE
      > =============================== -->
      >
      > </div>
      > </div>
      > </div>
      > </div>
      > </div>
      > </div>
      > </div>
      > </body>
      > </html>
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.