Split Button Woes

Split Button Woes

I have been attempting to use this:

http://view.jqueryui.com/menu/demos/button/splitbutton.html


My code is like this ( I adjusted it to loop so I can apply to a button on each row in a table - I hope I did this correctly):

  1.     $('#sorters td div.domenu').each(function() {
            $(".rerun")
                .button()
            .next()
                .button( {
                    text: false,
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    }
                })
           
                .click( function() {
                    var menu = $(this).parent().next().show().position({
                        my: "left top",
                        at: "left bottom",
                        of: this
                    });
                                           
                    $(document).one("click", function() {
                        menu.hide();
                    });
                    return false;
                })
            .parent()
                .buttonset()
            .next()
                .hide()
                .menu();
        });



























  2. // html for menus
  1. 						<div class="domenu">
    <div class="ui-buttonset">
    <button aria-disabled="false" role="button" class="rerun ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" onclick="createTab('blah.php?ssmode=ve&amp;auid=3','View/Edit Prof Magnus Dinklo ')"><span class="ui-button-text">View Profile</span></button><button title="Select an action" aria-disabled="false" role="button" class="select ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">Select an action</span></button>
    </div>

    <ul aria-activedescendant="ui-active-menuitem" role="listbox" class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none; top: 113.3px; left: 699.667px;">
    <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#" onclick="createTab('blah.php?ssmode=ve&amp;auid=3','View/Edit Prof Magnus Dinklo ')">View Profile</a></li>






  2. 			<li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Address Book</a></li>
    <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Order History</a></li>
    <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Raise Invoice</a></li>
    <li role="menuitem" class="ui-menu-item"><a tabindex="-1" class="ui-corner-all" href="#">Lock Account</a></li>
    </ul>
    </div>





These adjustments seem to work - eg. buttons are rendered and menus generate. This is good. The trouble is that when a menu is generated, if I then click the next selector, the first menu does not close. I have attempted to remedy this with this:

  1. $('.select').click( function() {
               if ('menu' !="") {
                    menu.hide();
                        } else {
                       alert('no menu exists');
                      }
                        });        });       







But, of course this kind of works but then fails and I probably just made it very apparent that I am no JS coder!

Also, I am worried that I am possibly looping too much?















    • Topic Participants

    • sales