jQWidgets Forums

Tagged: cascading dropdownlists, DropDownList, jqxDropDownList

This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 10 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

chainning dropdown list select event fires multiple times Posts
February 6, 2015 at 3:00 pm chainning dropdown list select event fires multiple times #66702

Ray Choe
Participant

Use below code, if you select first dropdownlist items multiple times then it fires select event multiple times. please, please help!

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery ComboBox, jqxDropDownList, DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget” />
<meta name=”description” content=”The jqxDropDownList comes with several useful events. When the user selects an item, the ‘select’ and ‘unselect’ events are triggered. ” />
<title id=’Description’>
The jqxDropDownList comes with several useful events. When the user selects an item, the ‘select’ and ‘unselect’ events are triggered.
</title>
<link href=”jqwidgets/styles/jqx.base.css” rel=”stylesheet” />
<script src=”Scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”scripts/demos.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/jqxpanel.js”></script>
</head>
<body>
<div id=’content’>
<script type=”text/javascript”>
$(document).ready(function () {
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
$(“#jqxDropDownList”).jqxDropDownList({ source: source, selectedIndex: 0, width: ‘200px’, height: ’25px’});

$(‘#Events’).jqxPanel({ height: ‘250px’, width: ‘200px’ });
$(‘#Events’).css(‘border’, ‘none’);
// subscribe to ‘unselect’ and ‘select’ events.

$(‘#jqxDropDownList’).on(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxDropDownList’).jqxDropDownList(‘getItem’, args.index);
if (item != null) {
//$(‘#Events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>Selected: ‘ + item.label + ‘</div>’);
getHierarchyBJH(1, 1);
}
});
$(‘#jqxDropDownList’).on(‘unselect’, function (event) {
var args = event.args;
var item = $(‘#jqxDropDownList’).jqxDropDownList(‘getItem’, args.index);
if (item != null) {
$(‘#Events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>Unselected: ‘ + item.label + ‘</div>’);
}
});

function getHierarchyBJH(iniValue, rowid) {
// Create a jqxDropDownList
$(“#jqxDropDownListSub”).jqxDropDownList({ source: source, selectedIndex: 0, width: ‘200px’, height: ’25px’ });

$(‘#jqxDropDownListSub’).on(‘select’, function (event) {
var args = event.args;
var item = $(‘#jqxDropDownListSub’).jqxDropDownList(‘getItem’, args.index);
if (item != null) {
// $(‘#Events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>Selected: ‘ + item.label + ‘</div>’);
alert(item.label);
}
});
}

});
</script>
<div style=’float: left; width: 500px;’ id=’jqxWidget’>
<div style=’float: left; margin-top: 10px;’ id=’jqxDropDownList’></div>
<div style=’float: left; margin-top: 10px;’ id=’jqxDropDownListSub’></div>
<div style=’margin-left: 20px; margin-top: 10px; float: left;’>
<div>
<span>
Events:
</span>
<div id=’Events’>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

February 9, 2015 at 10:59 am chainning dropdown list select event fires multiple times #66759

Nadezhda
Participant

Hello Ray Choe,

What exactly do you want to achieve with the above example? If you want to update the second jqxDropDownList dynamically depending on the selected in the first jqxDropDownList, please find the following topic which contains possible solution: http://www.jqwidgets.com/community/topic/populate-one-jqxdropdownlist-based-on-selection-in-another/.

In your example when select an item from jqxDropDownList you raise the ‘select’ event and when you select the other item this event is triggered again.

Best Regards,
Nadezhda

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

February 9, 2015 at 2:38 pm chainning dropdown list select event fires multiple times #66772

Ray Choe
Participant

Nadezhda,
thanks for your reply. I know I didn’t explain my issue correctly.
The question is not what I want to achieve but it seems like there’s a bug on jqwidgets any on select event.

With above example, if I select first dropdownlist item first time, it fires on select event one time. but if I select first dropdownlist item again, it starts firing on select event multiple times instead of only one time. so, if you select same first dropdownlist item third times then it fires more multiple times instead of one time.

so, what I am saying is that regardless how many times I select the first dropdownlist item, it should fire select event only one time but instead it is keep increasing on select event multiple times.

thanks for your help!

February 10, 2015 at 7:29 am chainning dropdown list select event fires multiple times #66798

Nadezhda
Participant

Hi Ray Choe,

This is not a bug in jQWidgets, it is normal event behavior. If you want to update jqxDropDownList from another jqxDropDownList, I suggest you to refer to Load data from select if you get data from an existing select element or use Cascading DropDownLists when data source of the second DropDownList is updated dynamically depending on the selected item in the first DropDownList:http://www.jqwidgets.com/community/topic/populate-one-jqxdropdownlist-based-on-selection-in-another/.

Best Regards,
Nadezhda

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

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.