jQuery UI Widgets › Forums › Lists › DropDownList › open list issue

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    open list issue Posts
  • May 13, 2013 at 6:53 am open list issue #20999

    Mhanna AbuTareef
    Participant

    Hi,

    I’m using drop down list inisde a modal window.

    I registered to the window open event. Each time i clicked on the list the window open event is fired !

    I want this event to be fired only when the window is opened.

    Regards,

    Mhanna 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title id='Description'>Move the mouse cursor over the jqxDropDownList to Open its DropDown.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    	<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = getDemoTheme();
    				
    				$('#showWindowButton').jqxButton({ theme: theme, width: '100px'});
    				$('#showWindowButton').mousedown(function () {
    					$('#eventWindow').jqxWindow('open');
    				});
    				
    				// Create window
    				$('#eventWindow').jqxWindow({autoOpen: false, maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
    					theme: theme, resizable: false, isModal: true, modalOpacity: 0.3,
    					okButton: $('#ok'), cancelButton: $('#cancel'),
    					initContent: function () {
    						$('#ok').jqxButton({ theme: theme, width: '65px' });
    						$('#cancel').jqxButton({ theme: theme, width: '65px' });
    						$('#ok').focus();
    					}
    				});
    			
    				//Open event
    				$('#eventWindow').on('open', function (event) {
    					alert('Window open');
    				});
    			
                    var source = [
                        "Affogato",
                        "Americano",
                        "Bicerin",
                        "Breve",
                        "Café Bombón",
                        "Café au lait",
                        "Caffé Corretto",
                        "Café Crema",
                        "Caffé Latte",
                        "Caffé macchiato",
                        "Café mélange",
                        "Coffee milk",
                        "Cafe mocha",
                        "Cappuccino",
                        "Carajillo",
                        "Cortado",
                        "Cuban espresso",
                        "Espresso",
                        "Eiskaffee",
                        "The Flat White",
                        "Frappuccino",
                        "Galao",
                        "Greek frappé coffee",
                        "Iced Coffee",
                        "Indian filter coffee",
                        "Instant coffee",
                        "Irish coffee",
                        "Liqueur coffee"
    		        ];
                    // Create a jqxDropDownList
                    $("#jqxWidget").jqxDropDownList({source: source, selectedIndex: 1, width: '200', height: '25', theme: theme });
                });
            </script>
            
    		<input type="button" value="Show" id="showWindowButton" />
    		<div id="eventWindow">
                    <div>
                        Modal Window</div>
                    <div>
                        <div>
                            <div id='jqxWidget'>
    						</div>
                        </div>
                        <div>
                        <div style="float: right; margin-top: 15px;">
                            <input type="button" id="ok" value="OK" style="margin-right: 10px" />
                            <input type="button" id="cancel" value="Cancel" />
                        </div>
                        </div>
                    </div>
                </div>
    			
        </div>
    </body>
    </html>
    May 13, 2013 at 7:13 am open list issue #21006

    Dimitar
    Participant

    Hello

    This is due to event bubbling and is a normal behaviour. For a workaround, add the following to your code:

    $('#jqxWidget').on('open', function (event) {
        return false;
    });

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.