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?