2

I'm using jquery nestable to create a list of academic programs a prospective student might be interested in. 16 programs pulled from mysql and listed like this:

<ol class="dd-list">

if(mysqli_num_rows($result)) {
    $order = array();
    while($item = mysqli_fetch_assoc($result)) {
        echo '<li class="dd-item" data-id="'.$item['id'].'"><div class="dd-handle">',$item['program'],'</div></li>';
    }

   </ol>
 } else { 
   <p>Sorry!  There are no items in the system.</p>
 }

No issue there. I have a second container to place the programs in:

<div class="dd" id="nestable2">
 <h4>Place programs below in order of preference</h4>
  <ol class="dd-list dd-placeholder">
   <li class="dd-item" data-id="17">
   <div class="dd-handle">Health Sciences Advisor</div>
  </li>
 </ol> 
</div>

And the original list and the output to the second container are output as serialized json data in textareas like this:

 Serialised Output (per list)
 <textarea id="nestable-output"></textarea>
 <textarea id="nestable2-output" name="nestable2-output"></textarea>

Again no real issue. The textareas will be changed to hidden inputs later.Except that sometimes when i drag a list item from the left column to the right the value doesn't update. here is a link to the jquery.nestable.js

and here is the script in the form:

$(document).ready(function()
{
var updateOutput = function(e)
{
    var list   = e.length ? e : $(e.target),
        output = list.data('output');
    if (window.JSON) {
        output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
    } else {
        output.val('JSON browser support required for this application.');
    }
};
// activate Nestable for list 1
$('#nestable').nestable({
    group: 1
})
.on('change', updateOutput);
// activate Nestable for list 2
$('#nestable2').nestable({
    group: 1
})
.on('change', updateOutput);
// output initial serialised data
$('#nestable2').attr('data-id', 'newvalue');
$('#nestable2').data('id', 'newvalue');

updateOutput($('#nestable').data('output', $('#nestable-output')));

updateOutput($('#nestable2').data('output', $('#nestable2-output')));

});

It only fails sometimes. then if i re-order the list in the second container it updates, but won't update any new items until i re-order again. Any help is greatly appreciated.

trf
  • 143
  • 2
  • 14
  • `No issue there.` -> `,$item['program'],` I wouldn't be so sure about that if I were you. Those commas sure will cause some issues. I garantuee it! – icecub Sep 02 '15 at 21:29
  • Doesn't seem to. list is populated, no errors thrown. But I changed it to this: echo '
  • '.$item['program'].'
    • '; – trf Sep 02 '15 at 21:33
  • Well have a look at this question: [Difference between “,” and “.” in PHP?](http://stackoverflow.com/questions/1466408/difference-between-and-in-php) and be amazed. – icecub Sep 02 '15 at 21:36
  • gotcha. however that isn't the issue. my list was generated. the issue seems to be with the e.target and closest list. As I stated it does work sometimes when i drag from one column to another. re-sorting in the original column works too, but i don't want to submit 16 programs, just the ones they choose. – trf Sep 02 '15 at 21:38
  • I know. I haven't catched on to that part yet. Making sure your code is correct is the first step to finding the issue. That's all – icecub Sep 02 '15 at 21:40
  • thanks. it appears old eyes thought commas were periods. it actually did list the items though. probably why i didn't catch it. – trf Sep 02 '15 at 21:45
  • Ye that's because echo allows multiple expressions. Basicly because you used commas on both sides, it didn't cause any issue. It's just very rare to see and usually not intended. I'm afraid I can't help any further though. My knowledge of JSON is absolute zero. – icecub Sep 02 '15 at 21:50