Non unique view Id

Webix JS
1

Hello…

I have a datatable with a filter and button in the header. The data displays properly, and the custom filter and button work properly upon first entry.

However, I get a “Non unique view id: customerFilter” when I navigate away from, and then back to the view. The chrome browser turns grey with a ‘Paused in debugger’ message.

Has anyone else come across this behavior?

I’m very new to Webix, so any guidance would be greatly appreciated.
At the moment, I am completely stalled… help please.

JC

2

Hello

could you provide some demo ? You can use http://webix.com/snippet/ for demo

3

Hello Maria,

Спасибо за ваш ответ - очень высоко ценится. It may be a little challenging to provide a simple snippet demo. Below is the code from my view that now also includes snippets I got from your examples…This all works nicely until I navigate away and attempt to come back again…

Please review - I hope this provides enough information to assist.

Thanks,

JC

Template.customer.rendered = function () {
    var proxy = webix.proxy('meteor', Customer);

    var newCustomer = {
        view: "window", modal: false, id: "customerWindow", left: 160, top: 120, css: "bradius",
        head: {height: 38, template: "Add Customer"},
        body: {
            padding: 18, view: "form", id: "customerForm", elements: [
                {view: "text", label: "Name", placeholder: "Customer Name", width: 350},
                {view: "text", label: "Phone", placeholder: "1-800-555-1212"},
                {view: "text", label: "Address", placeholder: "Full Address"},
                {view: "text", label: "Email", placeholder: "company@company.com"},
                {
                    cols: [
                        {view: "button", label: "Add", type: "form", width: 150, click: '$$("customerWindow").hide();'},
                        {},
                        {view: "button", label: "Cancel", width: 150, click: '$$("customerWindow").hide();'},
                    ]
                }
            ]
        }
    };

    //datatable
    var table = {
        id: "customerList",
        view: "datatable",
        scrollY: false,
        scroll: false,
        select: true,
        editable: true,
        editaction: "dblclick",
        columns: [
            {id: "name", header: "Name", sort: "string", editor: "text", fillspace: 1},
            {id: "status", header: "Status", sort: "string", editor: "text", fillspace: 1},
            {id: "email", header: "E-mail", sort: "string", width: 200, editor: "text", fillspace: 1},
            {id: "phone", header: "Phone", sort: "string", width: 150, editor: "text", fillspace: 1},
            {id: "address", header: "Address", sort: "string", width: 200, width: 300, editor: "text", fillspace: 1},
            {id: "trash", header: "&nbsp;", align: "center", width: 35, template: "<span style='cursor:pointer;' class='webix_icon fa-trash-o'></span>"}
        ],

        autoheight: true,
        url: proxy,
        save: proxy

    };

    var toolbar = {
            view: 'toolbar',
            elements: [
                {view: 'label', label: 'Customers'},
                {view: "button", value: " Add New Customer", width: 170, batch: "customerList", click: '$$("customerWindow").show();'},
                {view: "text", id: "customerFilter", placeholder: "Filter..", width: 200, batch: "customerList"}
            ]
        };


    webix.ready (function() {
        webix.ui({
            container: 'tableArea',
            rows: [toolbar, table]
        });

        webix.ui(newCustomer);

        $$("customerFilter").attachEvent("onTimedKeypress", function () {
            var text = this.getValue().toString().toLowerCase();
            $$("customerList").filter(function (obj) {
                var filter = [obj.name, obj.name].join("|");
                filter = filter.toString().toLowerCase();
                return (filter.indexOf(text) != -1);
            });
        });

       $$('customerList').attachEvent('onClick', function () {
           webix.confirm({
               text: "Are you sure", ok: "Yes", cancel: "Cancel",
               callback: function (res) {
                   if (res)
                       return false
               }
           });
       });

        $$('customerForm').bind('customerList');

    });

};


Template.customer.destroyed = function () {
    if (this.ui) this.ui.destructor();
};
4

The key point, you need to destroy all ui in “destroyed” handler

So store links to the UI

        this.ui1 = webix.ui({
            container: 'tableArea',
            rows: [toolbar, table]
        });

        this.ui2 = webix.ui(newCustomer);

and destroy them after disposing the template

Template.customer.destroyed = function () {
    if (this.ui1) this.ui1.destructor();
    if (this.ui2) this.ui2.destructor();
};
5

Thanks Maksim… I will give it a go.

6

Maksim, that worked nicely! However, the exception I submitted previously regarding the “TypeError: Cannot read property ‘name’ of undefined” is back:

http://forum.webix.com/discussion/4457/10debug-js-41-exception-in-queued-task-typeerror-cannot-read-property-name-of-undefined#latest

any ideas?

Thanks.

7

Such error can occur if you are using something like next in the init of component.

save:false

save parameter must be set to non-null URL or proxy object

8

Thanks Maksim… I implemented your suggestion, same result – exception is thrown. Perhaps I missed a step…

In the template (…first thing), I define the proxy for my collection as:

var proxy = webix.proxy(‘meteor’, Customer);

and then, on the datatable component, I reference it on the save and url properties as:

var table = {
            id: "customerList",
            view: "datatable",
            scrollY: false,
            scroll: false,
            autoheight: true,
            select: true,
            editable: true,
            editaction: "dblclick",
            columns: [
                {id: "name", header: "Name", sort: "string", editor: "text", fillspace: 1},
                {id: "status", header: "Status", sort: "string", editor: "text", fillspace: 1},
                {id: "email", header: "E-mail", sort: "string", width: 200, editor: "text", fillspace: 1},
                {id: "phone", header: "Phone", sort: "string", width: 150, editor: "text", fillspace: 1},
                {id: "address", header: "Address", sort: "string", width: 200, width: 300, editor: "text", fillspace: 1},
                {id: "trash", header: "&nbsp;", align: "center", width: 35, template: "<span style='cursor:pointer;' class='webix_icon fa-trash-o'></span>"}
            ],

            url: proxy,
            save: proxy

        };

and then the constructor(s):

 this.ui1 = webix.ui({
            container: 'table_area',
            rows: [toolbar, table]
        });

        this.ui2 = webix.ui(newCustomer);

Generally, it works… the datatable is populated correctly and I can edit any row. However, as soon as I navigate away (…and back), the exception is thrown… I’ve tried moving the url and save properties to the UI constructor, but it didn’t make a difference – exception was still thrown.

JC