jQuery UI Widgets Forums Lists DropDownList loadFromSelect

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • loadFromSelect #6985

    silvana
    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?

    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

    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 ?

    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

    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.

    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

    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).

    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

    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.

    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

    loadFromSelect #7002

    silvana
    Member

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

    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

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

You must be logged in to reply to this topic.