Add a new node

[michaelbanet]

Is there any way to add a new list item dynamically? I attempted the following, but it causes the browser to crash from running out of memory:

$('#MappingEditor').append('<li id="New_Category"><div>New Category</div></li>').sortableLists(mappingOptions);

It seems to work for about a second before running out of memory. Is there an alternate way to re-instantiate sortableLists maybe?

[michaelbanet]

#MappingEditor ul object

Thanks for the quick response! If it helps, I threw everything into a CodePen

https://codepen.io/michaelbanet/pen/vYLLVqK

[camohub]

I test it right now. This works without any problems:

        $('#add-test').on('click', function( e )
    	{
    		$('#sTree2').append( "<li id='add-test-li'><div>Add test</div></li>" );
    	});

The problem can be with maxLevels option which needs to have data-insideLevs and data-upperLevs set.

[michaelbanet]

You're right! I disabled maxLevels and it's working great! I'll leave that feature off for the time being (I guess I can use the isAllowed callback to limit level for now. Still early development)

[camohub]

This works also with maxLevels.

	$('#add-test').on('click', function( e )
	{
		var item = $("<li id='add-test-li'><div>Add test</div></li>");
		item.data('insideLevels', 0);
		item.data('upperLevels', 0);
		$('#sTree2').append( item );
	});

I made maxLevels feature yesterday so if you will have a problem feel free to create an issue. I will fix it ASAP

[michaelbanet]

This works for me! If anything, maybe a small paragraph in your documentation would be super helpful for the next person.

Thanks!

[camohub]

Do not close it for now. If somebody will search solution for this case.

[michalgala]

If someone is looking for a way to add an element to an existing empty node (with id:current_id_append in my example) Without appending the "hintwrap" variable, the new created element would not be draggable within the node

	$('#add-test').on('click', function( e )
	{
                var hintwrap = $("<ul id='s-l-hint-wrapper' style=\"display: block;\"></ul>");
                $('#'+current_id_append).append( hintwrap );
		var item = $("<li id='add-test-li'><div>Add test</div></li>");
		item.data('insideLevels', 0);
		item.data('upperLevels', 1);
		$('#'+current_id_append).children('ul').append( item );
                $('#'+current_id_append).children('ul').removeAttr( 'id' )
	});

I am still trying to figure out how to append the plus/minus icon to the div (with event)

[camohub]

@michalgala What s the problem with plus/minus icons?