Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace doesn't appear to work correctly #69

Closed
ijstanley opened this issue Jul 7, 2017 · 6 comments
Closed

Replace doesn't appear to work correctly #69

ijstanley opened this issue Jul 7, 2017 · 6 comments
Assignees
@pjona
Labels
bug

Comments

@ijstanley
Copy link

Using the following code:

            nestableElement.nestable('replace', {
                id: replaceId,
                name: name,
                label: name,
                slug: slug,
                css_class: cssClass,
                children: children
            });

where children is similar to the following object:

[{
        "css_class" : "",
        "slug" : "/distributors/find",
        "id" : 1472820817026,
        "label" : "Find A Distributor",
        "name" : "Find A Distributor"
    }, {
        "css_class" : "",
        "slug" : "/distributors/become",
        "id" : 1472820818729,
        "label" : "Become A Distributor",
        "name" : "Become A Distributor"
    }, {
        "css_class" : "",
        "slug" : "/distributors/suggest",
        "id" : 1472820819257,
        "label" : "Suggest A Distributor",
        "name" : "Suggest A Distributor"
    }
]

It results in a new li being created inside the existing li, and the expand/collapse doesn't display. The following is copied from Chrome:

<li data-name="Distributors" data-label="Distributors" data-id="1472139716346" data-url="/distributors" data-css_class="" data-is_open="true" class="dd-item">
<li data-id="1472139716346" data-name="Distributors" data-label="Distributors" data-url="/distributors" data-css_class="" class="dd-item">
   <div class="dd-handle"><span class="dd-content">Distributors</span></div>
   <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
   <ol class="dd-list">
      <li data-css_class="" data-url="/distributors/find" data-id="1472820817026" data-label="Find A Distributor" data-name="Find A Distributor" class="dd-item">
         <div class="dd-handle"><span class="dd-content">Find A Distributor</span></div>
         <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
      </li>
      <li data-css_class="" data-url="/distributors/become" data-id="1472820818729" data-label="Become A Distributor" data-name="Become A Distributor" class="dd-item">
         <div class="dd-handle"><span class="dd-content">Become A Distributor</span></div>
         <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
      </li>
      <li data-css_class="" data-url="/distributors/suggest" data-id="1472820819257" data-label="Suggest A Distributor" data-name="Suggest A Distributor" class="dd-item">
         <div class="dd-handle"><span class="dd-content">Suggest A Distributor</span></div>
         <div class="dd-options"><button class="btn btn-sm btn-success add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add"> <i class="fa fa-plus-square"></i></button><button class="btn btn-sm btn-info edit" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"> <i class="fa fa-edit"></i></button><button class="btn btn-sm btn-danger delete" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"> <i class="fa fa-trash"></i></button></div>
      </li>
   </ol>
</li>
</li>

I'm using a custom itemRenderer:

function (item_attrs, content, children, options, item) {
                        var item_attrs_string = $.map(item_attrs, function (value, key) {
                            return ' ' + key + '="' + value + '"';
                        }).join(' ');

                        if (!item.label) {
                            setTimeout(function () {
                                $('[data-id=' + item.id + ']').find('.dd-handle').effect('highlight', {color: '#dff0d8'}, 2000);
                            }, 100);
                        }

                        var html = '<' + options.itemNodeName + item_attrs_string + '>';
                        html += '<' + options.handleNodeName + ' class="' + options.handleClass + '">';
                        html += '<' + options.contentNodeName + ' class="' + options.contentClass + '">';
                        html += content;
                        html += '</' + options.contentNodeName + '>';
                        html += '</' + options.handleNodeName + '><div class="dd-options">' +
                            "<button class='btn btn-sm btn-success add' data-toggle='tooltip' data-placement='top' title='' " +
                            "data-original-title='Add'> " +
                            "<i class='fa fa-plus-square'></i>" +
                            "</button>" +
                            "<button class='btn btn-sm btn-info edit' data-toggle='tooltip' data-placement='top' title='' " +
                            "data-original-title='Edit'> " +
                            "<i class='fa fa-edit'></i>" +
                            "</button>" +
                            "<button class='btn btn-sm btn-danger delete' data-toggle='tooltip' data-placement='top' title='' " +
                            "data-original-title='Delete'> " +
                            "<i class='fa fa-trash'></i>" +
                            "</button>" +
                            "</div>";
                        html += children;
                        html += '</' + options.itemNodeName + '>';

                        return html;
                    }

I can't see that I'm doing anything wrong here. I've inspected the nestable source and I'd suggest the replace function should use replaceWith() instead html():

replace: function (item)
        {
            var html = this._buildItem(item, this.options);
            this._getItemById(item.id).replaceWith(html);
        }

This appears to fix the HTML structure issue but the expand/collapse still doesn't display. Are you able and available to help?

Many thanks
@pjona
Copy link
Collaborator

pjona commented Jul 7, 2017 via email

@ijstanley
Copy link
Author

Awesome, thank you. The fiddle is: https://jsfiddle.net/ijstanley/oaomxk5c/

Pressing the 'Perform Replace' button will show the issue, it replaces the 'Distributors' item.

@ijstanley
Copy link
Author

Having another look this morning, it seems the data doesn't get replaced either, until you move the item manually. Updated fiddle: https://jsfiddle.net/ijstanley/oaomxk5c/2/

@ijstanley
Copy link
Author

It appears adding the line this.setParent(html); fixes the remaining issues, so the whole replace function now looks like:

        replace: function (item)
        {
            var html = $(this._buildItem(item, this.options));
            this._getItemById(item.id)
                .replaceWith(html);
            this.setParent(html);
        },

@RomanBurunkov
Copy link
Contributor

Make sence for items with children.

@pjona, should we use setParent at build function?
Such approach can be more universal...

@pjona pjona added the bug label Jul 10, 2017
@pjona pjona self-assigned this Jul 10, 2017
@pjona pjona closed this as completed in c2def01 Jul 10, 2017
@pjona
Copy link
Collaborator

pjona commented Jul 10, 2017

@ijstanley @RomanBurunkov Thanks all for good suggestions, this commit should fixed the issue. I tested also when new item has more children - https://jsfiddle.net/Lykebpo9/1/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pjona pjona

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pjona @RomanBurunkov @ijstanley