jQuery UI Widgets › Forums › Lists › ListBox › Edit item label in list
Tagged: edit, item, jqxListBox, label, ListBox, update, updateItem
This topic contains 2 replies, has 2 voices, and was last updated by jon74 11 years, 1 month ago.
-
AuthorEdit item label in list Posts
-
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
JonHello 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,
DimitarjQWidgets team
http://www.jqwidgets.com/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
-
AuthorPosts
You must be logged in to reply to this topic.