jQuery UI Widgets Forums Lists ListBox Edit item label in list

This topic contains 2 replies, has 2 voices, and was last updated by  jon74 11 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Edit item label in list #29994

    jon74
    Participant

    Hi all,
    I need to have a list of items for which I should be able to let user edit the label. Is there a particular solution for that?
    Currently I am using a ListBox and I’ve seen there’s the method “updateItem”, how shall I use it? I mean, are there any examples of real time updating of the item?

    Thanks in advance
    Jon

    Edit item label in list #30023

    Dimitar
    Participant

    Hello Jon,

    Here is an example of the updateItem method’s usage:

    <!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.10.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>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    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 jqxListBox
    $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: theme });
    $("#update").click(function () {
    $("#jqxWidget").jqxListBox("updateItem", { label: "Updated label", value: "Updated value" }, "Café Crema");
    });
    });
    </script>
    </head>
    <body>
    <div id='content'>
    <button id="update">
    Update "Café Crema"</button>
    <br />
    <div id='jqxWidget'>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Edit item label in list #30157

    jon74
    Participant

    Thanks Dimitar, but I face an error in script when running it on my code (“TOO MUCH RECURSION” in jqxcore)

    here is my snippet

    var items = $("#listBoxA").jqxListBox('getCheckedItems');
    var item = items[0];
    $('#editLabelWindow').jqxWindow({ height: 200, width: 415, theme: theme5,
    resizable: false, isModal: true, modalOpacity: 0.3,autoOpen:false,
    okButton: $('#ok'), cancelButton: $('#cancel2'),
    initContent: function () {
    $('#ok').jqxButton({ theme: theme5, width: '65px' });
    $('#cancel2').jqxButton({ theme: theme5, width: '65px' });
    $('#ok').focus();
    $("#newItemLabel").val(item.label);
    $("#newItemLabel").on('focus',function(){$(this).val("");});
    $('#ok').click(function () {
    var newLabel = $("input[id=newItemLabel]").val();
    if (newLabel !== null && typeof newLabel !== 'undefined'
    && newLabel !== ''){
    var newValue = item.value+"|"+newLabel;
    $("#listBoxA").jqxListBox("updateItem", { label: newLabel, value: newValue}, item);
    } else {
    return false;
    }
    });
    }
    });

    The problem seems to be on “item” object

    Thanks

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

You must be logged in to reply to this topic.