jQWidgets Forums

Tagged: jqwidgets listbox control, ListBox, listbox control

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

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

Author

Html property does not work properly for addItem. Posts
March 3, 2014 at 4:07 am Html property does not work properly for addItem. #50364

Dmitry Istomin
Participant

I set html property for an input object used in addItem function. First item is added fine. Then I change html property again but for some reason old HTML code is added. Am I doing something wrong? I also tried render and refresh but nothing helps. It happens here as well if you replace this piece of code:

$(‘#jqxButton’).on(‘click’, function () {
$(“#jqxListBox”).jqxListBox(‘addItem’, ‘jQuery’);
});

to this:

var i = 0;
$(‘#jqxButton’).on(‘click’, function () {
$(“#jqxListBox”).jqxListBox(‘addItem’, { html: ‘<span>Item ‘ + (i++) + ‘</span>’});
$(‘body’).append(i + ‘ ‘);
});

At this piece of code I also render counter to body to make sure that it is incremented correctly.

March 3, 2014 at 7:03 am Html property does not work properly for addItem. #50378
Peter Stoev
Keymaster
Hi Dmitry,

The value identifier of the item is missing here.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
    <title id='Description'>The jqxListBox represents a widget that contains a list of selectable
        items. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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>
</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"];

                // Create a jqxListBox
                $("#jqxListBox").jqxListBox({
                    source: source,
                    theme: 'energyblue',
                    width: '200px',
                    height: '250px',
                    selectedIndex: 3

                });
                $("#jqxButton").jqxButton({
                    theme: 'energyblue'
                });
                var f = 0;
                $('#jqxButton').on('click', function () {
                    $("#jqxListBox").jqxListBox('addItem', {value: f, html: '<span>Item ' + f + '</span>' });
                    f++;
                });
            });
        </script>
        <div id='jqxListBox'></div>
<div>
    <input style="margin-top: 20px;" type="button" id='jqxButton' value="Add item" />
</div>
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/
March 3, 2014 at 9:03 pm Html property does not work properly for addItem. #50422

Dmitry Istomin
Participant

Hi, Peter!

Thanks for your reply. But for me it does not really make sense. Why do I need to specify this value property? The string is compiled and it looks like “Item 1” – there is no any placeholder or keyword to use this value.

It is also not obvious at API description. It does not say anything about value usage inside the HTML:

Adds a new item to the jqxListBox. Returns ‘true’, if the new item is added or ‘false’ if the item is not added.

The following fields can be used for the new item:
label – determines the item’s label.
value – determines the item’s value.
disabled – determines whether the item is enabled/disabled.
checked – determines whether item is checked/unchecked.
hasThreeStates – determines whether the item’s checkbox supports three states.
html – determines the item’s display html. This can be used instead of label.
group – determines the item’s group.

Is it possible to resolve?

Thanks!

March 3, 2014 at 9:45 pm Html property does not work properly for addItem. #50429

Peter Stoev
Keymaster

Hi Dmitry,

I am sorry that you do not like the solution I suggested you, but that is the only working solution I can propose you.

Best Regards,
Peter Stoev

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

March 4, 2014 at 1:19 am Html property does not work properly for addItem. #50431

Dmitry Istomin
Participant

Hi, Peter!

Thank you for your solution! As long as it solves the issue – it is fine. Actually, problem is not the solution but the API description. This feature is not obvious and it is not described there so there is no any way to understand it from reading documentation. Perhaps, it is good idea to declare and clarify that feature.

Thank you!

March 4, 2014 at 6:27 am Html property does not work properly for addItem. #50446

Peter Stoev
Keymaster

Hi Dmitry,

Thanks for the suggestion.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.