css - jQuery UI - Multiple serialized .selectable lists -
i'm making error report handling system, , i'm trying use jquery ui .selectable reports user has clicked, reports grouped in lists based on system come from. multiple lists can selected @ same time.
as in linked demo, i'm printing out ids, works fine single list. however, when i'm selecting items 2 or more different lists, ids listed disappear. seem still selected in .selectable's eyes, don't printed anymore. every time click on different list, previous ids disappear , new ones appear.
does have idea can printed?
also, there way apply .ui-selected class elements, given string/array of values supposed selected? basically, opposite of script's functionality. (if made sense..?)
jsfiddle here: http://jsfiddle.net/kantana/z3sbu/1/
javascript
$(function() { $(".selectable").bind("mousedown", function(event) { event.metakey = true; }).selectable({ stop: function() { var result = $("#selecteditems").empty(); $(".ui-selected", this).each(function() { var itemid = $(this).attr('id'); var item = itemid.replace("report_", ""); result.append(" #" + item); }); } }); }) css
this example uses twitter bootstrap css.
html
<span id="selecteditems">none selected</span> <div class="accordion" id="accordion2"> <div class='accordion-group'> <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#1'>system 1 - responding</a> </div> <div id='1' class='accordion-body collapse'> <div class='accordion-inner'> <ol class='selectable'> <li class='report file ui-widget-content' id='report_60'> error #60 - responding <p class='tinytext'>check type: ping</p> <p class='tinytext'>error message: unconfirmed_down</p> </li> </ol> </div> </div> </div> <div class='accordion-group'> <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#2'>system 2 - responding</a> </div> <div id='2' class='accordion-body collapse'> <div class='accordion-inner'> <ol class='selectable'> <li class='report file ui-widget-content' id='report_62'> error #62 - responding <p class='tinytext'>check type: ping</p> <p class='tinytext'>error message: unconfirmed_down</p> </li> </ol> </div> </div> </div> <div class='accordion-group'> <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#3'>system 3 - responding</a> </div> <div id='3' class='accordion-body collapse'> <div class='accordion-inner'> <ol class='selectable'> <li class='report file ui-widget-content' id='report_56'> error #56 - responding <p class='tinytext'>check type: free memory</p> <p class='tinytext'>error message: check_nrpe: socket timeout after 20 seconds.</p> <li class='report file ui-widget-content' id='report_57'> error #57 - responding <p class='tinytext'>check type: ssh</p> <p class='tinytext'>error message: critical - socket timeout after 10 seconds</p> <li class='report file ui-widget-content' id='report_55'> error #55 - responding <p class='tinytext'>check type: ping</p> <p class='tinytext'>error message: ping critical - packet loss = 100%</p> <li class='report file ui-widget-content' id='report_54'> error #54 - responding <p class='tinytext'>check type: free space disks</p> <p class='tinytext'>error message: check_nrpe: socket timeout after 20 seconds.</p> <li class='report file ui-widget-content' id='report_58'> error #58 - responding <p class='tinytext'>check type: load average</p> <p class='tinytext'>error message: check_nrpe: socket timeout after 20 seconds.</p> </li> </ol> </div> </div> </div> <div class='accordion-group'> <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#4'>system 4 - 1 error</a> </div> <div id='4' class='accordion-body collapse'> <div class='accordion-inner'> <ol class='selectable'> <li class='report file ui-widget-content' id='report_59'> error #59 - warning <p class='tinytext'>check type: ping</p> <p class='tinytext'>error message: unknown</p> </li> </ol> </div> </div> </div> <div class='accordion-group'> <div class='accordion-heading'><a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion2' href='#5'>system 5 - 1 error</a> </div> <div id='5' class='accordion-body collapse'> <div class='accordion-inner'> <ol class='selectable'> <li class='report file ui-widget-content' id='report_61'> error #61 - warning <p class='tinytext'>check type: free space disks</p> <p class='tinytext'>error message: disk warning - free space: / 11230 mb (15% inode=78%): /dev 989 mb (99% inode=99%): /run 398 mb (99% inode=99%): /run/lock 5 mb (100% inode=99%): /run/shm 997 mb (100% inode=99%):</p> </li> </ol> </div> </div> </div> </div>
change scope of stop function select ui-selected elements within entire accordion. specifying $(".ui-selected", this) looks @ single item selected since contains reference selectable.
stop: function() { var result = $("#selecteditems").empty(); //changed #accordion $(".ui-selected", $("#accordion2")).each(function() { var itemid = $(this).attr('id'); var item = itemid.replace("report_", ""); result.append(" #" + item); }); } working example http://jsfiddle.net/z3sbu/2/
Comments
Post a Comment