jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › Missing functionality with jQuery < 1.9
This topic contains 5 replies, has 3 voices, and was last updated by Peter Stoev 9 years, 11 months ago.
-
Author
-
I am in charge of updating an older site with some new functionality. I am looking at using your tools, but am running into a few issues. The site is using jQuery 1.7.2 and while I’d like to update this to a more recent version, there are currently other components that are dependant on this version. According to your documentation you widgets should work with jQuery 1.7+. Unfortunately when using jQuery 1.7.2 with the ComboBox I am running into a couple of issues that I hope you can fix.
The Setup:
ComboBox
Remote Data Source
Multiple SelectionThe Problem:
1. After selecting the first item, the cursor does not return to the input box. It does not matter whether you mouse click, tab or press enter to select the item, the input box no longer retains focus.
2. When one or more items are selected, clicking in the input box does not cause it to gain focus unless you click very near the end (right side) of the last selected item.Both of these issues are present in every version of jQuery 1.7 and 1.8 but are resolved when using jQuery 1.9+. I would love to use your tools, so if you can find a way to fix these issues in jQuery 1.7 that would be great!
Hello dthayer,
We could not reproduce the reported issues when running the online demos of jqxComboBox with jQuery 1.7.2. We suggest you update to the latest version of jQWidgets (3.8.0) for the best widgets experience.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Nadezhda,
To test out whether the problem existed in our code versus your widget, I did not even download the libraries, but rather referenced them from your demo site. Below is the code that I copied locally that shows the problem. By simply changing the value of the jquery library from 1.11.1 to any version less than 1.9.0 (minimum 1.7.2), you can see that the example changes behavior according to my original post. This code was copied directly from your ComboBox demo page and all libraries are referenced directly from your server.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>
This sample illustrates the Multi Select feature of jqxComboBox. That feature allows the selection of multiple values from jqxComboBox.
</title>
<link rel=”stylesheet” href=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js”></script>
</head>
<body>
<div id=’content’>
<script type=”text/javascript”>
$(document).ready(function () {
var countries = new Array(“Afghanistan”, “Albania”, “Algeria”, “Andorra”, “Angola”, “Antarctica”, “Antigua and Barbuda”, “Argentina”, “Armenia”, “Australia”, “Austria”, “Azerbaijan”, “Bahamas”, “Bahrain”, “Bangladesh”, “Barbados”, “Belarus”, “Belgium”, “Belize”, “Benin”, “Bermuda”, “Bhutan”, “Bolivia”, “Bosnia and Herzegovina”, “Botswana”, “Brazil”, “Brunei”, “Bulgaria”, “Burkina Faso”, “Burma”, “Burundi”, “Cambodia”, “Cameroon”, “Canada”, “Cape Verde”, “Central African Republic”, “Chad”, “Chile”, “China”, “Colombia”, “Comoros”, “Congo, Democratic Republic”, “Congo, Republic of the”, “Costa Rica”, “Cote d’Ivoire”, “Croatia”, “Cuba”, “Cyprus”, “Czech Republic”, “Denmark”, “Djibouti”, “Dominica”, “Dominican Republic”, “East Timor”, “Ecuador”, “Egypt”, “El Salvador”, “Equatorial Guinea”, “Eritrea”, “Estonia”, “Ethiopia”, “Fiji”, “Finland”, “France”, “Gabon”, “Gambia”, “Georgia”, “Germany”, “Ghana”, “Greece”, “Greenland”, “Grenada”, “Guatemala”, “Guinea”, “Guinea-Bissau”, “Guyana”, “Haiti”, “Honduras”, “Hong Kong”, “Hungary”, “Iceland”, “India”, “Indonesia”, “Iran”, “Iraq”, “Ireland”, “Israel”, “Italy”, “Jamaica”, “Japan”, “Jordan”, “Kazakhstan”, “Kenya”, “Kiribati”, “Korea, North”, “Korea, South”, “Kuwait”, “Kyrgyzstan”, “Laos”, “Latvia”, “Lebanon”, “Lesotho”, “Liberia”, “Libya”, “Liechtenstein”, “Lithuania”, “Luxembourg”, “Macedonia”, “Madagascar”, “Malawi”, “Malaysia”, “Maldives”, “Mali”, “Malta”, “Marshall Islands”, “Mauritania”, “Mauritius”, “Mexico”, “Micronesia”, “Moldova”, “Mongolia”, “Morocco”, “Monaco”, “Mozambique”, “Namibia”, “Nauru”, “Nepal”, “Netherlands”, “New Zealand”, “Nicaragua”, “Niger”, “Nigeria”, “Norway”, “Oman”, “Pakistan”, “Panama”, “Papua New Guinea”, “Paraguay”, “Peru”, “Philippines”, “Poland”, “Portugal”, “Qatar”, “Romania”, “Russia”, “Rwanda”, “Samoa”, “San Marino”, ” Sao Tome”, “Saudi Arabia”, “Senegal”, “Serbia and Montenegro”, “Seychelles”, “Sierra Leone”, “Singapore”, “Slovakia”, “Slovenia”, “Solomon Islands”, “Somalia”, “South Africa”, “Spain”, “Sri Lanka”, “Sudan”, “Suriname”, “Swaziland”, “Sweden”, “Switzerland”, “Syria”, “Taiwan”, “Tajikistan”, “Tanzania”, “Thailand”, “Togo”, “Tonga”, “Trinidad and Tobago”, “Tunisia”, “Turkey”, “Turkmenistan”, “Uganda”, “Ukraine”, “United Arab Emirates”, “United Kingdom”, “United States”, “Uruguay”, “Uzbekistan”, “Vanuatu”, “Venezuela”, “Vietnam”, “Yemen”, “Zambia”, “Zimbabwe”);
// Create a jqxComboBox
$(“#jqxComboBox”).jqxComboBox({source: countries, multiSelect: true, width: 350, height: 25});
$(“#jqxComboBox”).jqxComboBox(‘selectItem’, ‘United States’);
$(“#jqxComboBox”).jqxComboBox(‘selectItem’, ‘Germany’);
$(“#arrow”).jqxButton({ });
$(“#arrow”).click(function () {
$(“#jqxComboBox”).jqxComboBox({ showArrow: false });
});
// trigger selection changes.
$(“#jqxComboBox”).on(‘change’, function (event) {
var items = $(“#jqxComboBox”).jqxComboBox(‘getSelectedItems’);
var selectedItems = “Selected Items: “;
$.each(items, function (index) {
selectedItems += this.label;
if (items.length – 1 != index) {
selectedItems += “, “;
}
});
$(“#log”).text(selectedItems);
});
});
</script>
<span style=”font-size: 13px; font-family: Verdana;”>Select countries</span>
<div style=”margin-top: 5px;” id=’jqxComboBox’>
</div>
<input type=”button” id=”arrow” style=”margin-top: 20px;” value=”Hide DropDown Button” />
<div style=”margin-top: 10px; font-size: 13px; font-family: Verdana;” id=”log”></div>
</div>
</body>
</html>Hi dthayer,
Regarding your issue:
Actually the behavior is: in jQuery 1.7, the focus method of jQuery works in a different way than the focus method in current jQuery version. In jQuery 1.7 you will have to click next to the item and then you will be able to write. In the current version of jQuery you will be able to click anywhere to begin writing.
Best Regards,
Peter StoevPeter,
The same problem exists in jQuery 1.8. If you are unable to fix this due to a limitation of jQuery, I would suggest you increase your minimum supported version to 1.9.0 or at least make some additional notes in your documentation surrounding this focus issue.
Thanks,
Dan
Hi Dan,
We will make changes in the ComboBox, if we find it necessary. There is no such thing in the world which we can’t fix or improve. I explained you where you should click so the reported behavior for me is a slightly different behavior in an old jQuery version compared to new jQuery versions.
Best Regards,
Peter Stoev -
AuthorPosts
You must be logged in to reply to this topic.