loadFromSelect - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: DropDownList, jqwidgets, jqxDropDownList

This topic contains 11 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 3 months ago.

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

Author

loadFromSelect Posts

August 22, 2012 at 5:48 am loadFromSelect #6985

Member

One of the examples uses a function called loadFromSelect to populate a jqxDropDownList, but it doesn’t appear in the Documentation. Has this function been removed?
Is it documented anywhere?

August 22, 2012 at 5:55 am loadFromSelect #6986

Peter Stoev

Keymaster

Hi silvana,

The ‘loadFromSelect’ method internally uses the jqxListBox’s loadFromSelect method. The function is not removed. Thanks for the feedback about the documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 22, 2012 at 6:02 am loadFromSelect #6987

silvana

Member

Umm, jqxListBox’s documentation does not have a loadFromSelect method.
Is there any documentation you can post on the forum?
Also, where do specify the form field name to use to post the selected value ?

August 22, 2012 at 6:05 am loadFromSelect #6988

Peter Stoev

Keymaster

Hi silvana,

See the sample here: loadfromselect.htm.

And here’s how to call the function:

$("#jqxListBox").jqxListBox('loadFromSelect', 'Select');

‘Select’ is ID of Select tag.

That’s it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 22, 2012 at 6:19 am loadFromSelect #6992

silvana

Member

Peter, I have seen the sample, that’s how I started the first line of my first post. What I am after is documentation.
I presume it is a typo that the ID of the select tag is ‘select’, but the example uses ‘Select’ in the function call.

I notice that there is no input field name, so the jqxListBox cannot be used on it’s own to submit values in a form.
Is there a recommended way to submit jqWidget values in a form?
I didn’t notice any for examples.

August 22, 2012 at 6:33 am loadFromSelect #6993

Peter Stoev

Keymaster

Hi silvana,

The ‘loadFromSelect’ looks for a select element and searches for option tags. Here’s another way to achieve the same result:

<!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>
    <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.7.2.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>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // Create a jqxListBox
                $("#jqxListBox").jqxListBox({ width: 200, height: 250, theme: theme });
                // Load the data from the Select html element.
                $("#jqxListBox").jqxListBox('loadFromSelect', 'select');
                $("#jqxListBox").bind('select', function (event) {
                    if (event.args) {
                        var args = event.args;
                        // select the item in the 'select' tag.
                        var index = args.item.index;
                        $("#select").find('option').eq(index).attr("selected", "true");
                    }
                });
                $("#select").bind('change', function (event) {
                    var index = $("#select")[0].selectedIndex;
                    $("#jqxListBox").jqxListBox('selectIndex', index);
                    $("#jqxListBox").jqxListBox('ensureVisible', index);
                });
            });
        </script>
        <div style='float: left; width: 500px;' id='jqxWidget'>
            <div style='float: left;' id='jqxListBox'>
            </div>
            <select style='height: 250px; width: 200px; margin-left: 30px;' size='2' id='select'>
                <option>Affogato</option>
                <option>Americano</option>
                <option>Bicerin</option>
                <option>Breve</option>
                <option>Café Bombón</option>
                <option>Caffé Corretto</option>
                <option>Café Crema</option>
                <option>Caffé Latte</option>
                <option>Caffé macchiato</option>
                <option>Café mélange</option>
                <option>Coffee milk</option>
                <option>Cafe mocha</option>
                <option>Cappuccino</option>
                <option>Carajillo</option>
                <option>Cuban espresso</option>
                <option>Espresso</option>
                <option selected="true">The Flat White</option>
                <option>Frappuccino</option>
                <option>Galao</option>
                <option>Greek frappé coffee</option>
                <option>Iced Coffee</option>
                <option>Indian filter coffee</option>
                <option>Instant coffee</option>
                <option>Irish coffee</option>
                <option>Liqueur coffee</option>
            </select>
        </div>
    </div>
</body>
</html>

You can submit value via Ajax an pass the selected item as data or by updating hidden input fields of a Form with the widget’s selection.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 22, 2012 at 6:36 am loadFromSelect #6994

silvana

Member

There seems to be a bug with loadFromSelect.

If the select has 5 options, and option 3 is selected, after creating my jqxListBox and calling loadFromSelect, the listbox looks like option1 is selected but when I click on it to show the drop down list, option 3 is highlighted in the list (but the text from option 3 is not displayed in the selected value area at the top of the list box).

August 22, 2012 at 6:40 am loadFromSelect #6998

Peter Stoev

Keymaster

Hi silvana,

The ‘loadFromSelect’ loads items from select tag. It does not synchronizes selections of select tag with the jqxDropDownList or jqxListBox.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 22, 2012 at 7:05 am loadFromSelect #7000

silvana

Member

I guess that’s where some documentation would have spelled out the limitations of the function.
I wasn’t after full synchronisation between the two controls, but I would have thought setting the selectedIndex to the currently selected option would have been obvious.

I still consider it a bug that the drop down list shows the name from option 1, but when you open the drop down list option 3 is highlighted. Users would be confused as to what value is currently selected.

August 22, 2012 at 7:12 am loadFromSelect #7001

Peter Stoev

Keymaster

To select index in the DropDownList, you should use something like that:

$("#jqxDropDownList").jqxDropDownList('selectedIndex', '0');

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 22, 2012 at 7:20 am loadFromSelect #7002

silvana

Member

I am not sure what that has to do with “loadFromSelect” having a bug.

August 22, 2012 at 7:29 am loadFromSelect #7007

Peter Stoev

Keymaster

Hi silvana,

If you report an issue regarding our products, please include the following information in your post:

– jQuery version, jQWidgets version, device type(PC, Mobile), browser name and version.
– Please, provide step by step instructions on how to reproduce the reported issue or better paste a small sample which reproduces the issue.

After doing that, we will be able to test your specific scenario and confirm or decline whether a bug is present or not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.