mjsarfatti
problem with nesting
I can't nest an item under an item that doesnt have a sub-item. But in the demo this is ok why?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>val demo</title>
<style>
p {
color: red;
margin: 4px;
}
b {
color: blue;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.mjs.nestedSortable.js"></script>
</head>
<body>
<ol class="sortable" id="lolec">
<li><div>Some content</div></li>
<li>
<div>Some content</div>
<ol>
<li><div>Some sub-item content</div></li>
<li><div>Some sub-item content</div></li>
</ol>
</li>
<li><div>Some content</div></li>
</ol>
</body>
</html>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('ol.sortable').nestedSortable({
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
maxLevels: 3,
isTree: true,
expandOnHover: 700,
startCollapsed: true
})
});
$('.disclose').on('click', function() {
$(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
})
function dump(arr,level) {
var dumped_text = "";
if(!level) level = 0;
//The padding given at the beginning of the line.
var level_padding = "";
for(var j=0;j<level+1;j++) level_padding += " ";
if(typeof(arr) == 'object') { //Array/Hashes/Objects
for(var item in arr) {
var value = arr[item];
if(typeof(value) == 'object') { //If it is an array,
dumped_text += level_padding + "'" + item + "' ...\n";
dumped_text += dump(value,level+1);
} else {
dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
}
}
} else { //Strings/Chars/Numbers etc.
dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
}
return dumped_text;
}
</script>
Is that your actual code? I believe you need to apply the right classes to each li tag in your DOM structure, as in the demo (mjs-nestedSortable-leaf / mjs-nestedSortable-branch), otherwise the library doesn't know what is what. For example, you have no disclose class on any item inside the lis, so the $('.disclose') line isn't going to do anything...
Also, note that the demo page uses a newer version of the library (2.0, Oct 2012) than what is on the Github page (1.3.5, June 2012).
When I have this code, I still have same problem why?
<ol class="sortable">
<li id="list_1"><div><span class="disclose"><span></span></span>Novinky</div>
<li id="list_2"><div><span class="disclose"><span></span></span>Polozka_2</div>
<ol>
<li id="list_10"><div><span class="disclose"><span></span></span>Zkouska</div>
</ol>
<li id="list_3"><div><span class="disclose"><span></span></span>Učitelé</div>
<li id="list_4"><div><span class="disclose"><span></span></span>Rozvrhy</div>
<li id="list_5"><div><span class="disclose"><span></span></span>Fotogalerie</div>
<li id="list_6"><div><span class="disclose"><span></span></span>Kalendář</div>
<li id="list_7"><div><span class="disclose"><span></span></span>Osnovy</div>
<li id="list_8"><div><span class="disclose"><span></span></span>Kontakty</div>
</ol>
and its not because the classes, because in the code in the demo, there are no such classes (mjs-nestedSortable-leaf / mjs-nestedSortable-branch), maybe the JS change it after the load of page
In the demo, there are the classes that I mentioned--how are you checking that the classes don't exist? Check the screenshot that I just took from Firebug:
yes but this is after the JS change. I have this same code when i am looking on my page through firebug, but its not the actual code. https://www.dropbox.com/s/4l1jk7yfze9favr/Screenshot%202014-02-13%2006.49.45.png And this is the problem: https://www.dropbox.com/s/884nrj89ko3uk9w/Screenshot%202014-02-13%2006.51.09.png
Hm, so I'm a bit confused. If I understand the library right, you can't put things under leafs--that is the behavior in the demo, too, just like it seems to be in your example. Can you point to which item in the demo applies to: "I can't nest an item under an item that doesnt have a sub-item. But in the demo this is ok why?". In the demo, I can't nest anything under items 2, 4, or 5 (which are leafs and don't have sub-items), so it seems like that is the expected behavior.
Have you tried putting an empty ol element under an item? That should make it possible to nest things under it. Like:
<ol class="sortable">
<li id="list_1"><div><span class="disclose"><span></span></span>Novinky</div>
<ol></ol>
<li id="list_2"><div><span class="disclose"><span></span></span>Polozka_2</div>
<ol>
<li id="list_10"><div><span class="disclose"><span></span></span>Zkouska</div>
</ol>
<li id="list_3"><div><span class="disclose"><span></span></span>Učitelé</div>
<li id="list_4"><div><span class="disclose"><span></span></span>Rozvrhy</div>
<li id="list_5"><div><span class="disclose"><span></span></span>Fotogalerie</div>
<li id="list_6"><div><span class="disclose"><span></span></span>Kalendář</div>
<li id="list_7"><div><span class="disclose"><span></span></span>Osnovy</div>
<li id="list_8"><div><span class="disclose"><span></span></span>Kontakty</div>
</ol>
Why i have problem when i am using Jquery 1.10.3 or 1.9.1? i get
Uncaught TypeError: Cannot read property 'msie' of undefined jquery-ui-1.8.16.custom.min.js:48
Does anyone know why?
EDIT: you must have 1.7.2 to plugin start working :(
I had this issue too with FinalAngel's fork. Slightly different cause but result is the same. What fixed it was to replace the hard-coded 'li' on rows 145 and 158 with $(o.items)[0].nodeName.toLowerCase(). (the problem is caused by multiple ul's or ol's on one page). Hope this helps someone else.
