Non unique view id

Webix JS
1

Hi,
i have a Webix Datatable on a web page, which works fine. I get that Non unique view id error when I navigate away from the page and then come back to it. Below is the code, can anyone help me in eliminating that message?

Thanks!

function ShowAppRulesGrid() {
            apprulegrid = webix.ui({
                container:"webixTable",
                view:"datatable", 
                id:"sslcertificategrid",
                margin:5,
                css:"webix_header_border webix_data_border",
                columns:[
                    { id:"domain_name",	        header:["Domain Name",           {content:"textFilter"}],    width:200,   sort:"int"},
                    { id:"domain_names",	header:["Domain Names",  {content:"textFilter"}],    width:200,  sort:"string"},
                    { id:"serial",	header:["Serial",  {content:"textFilter"}],    width:200,  sort:"string"},
                    { id:"expires_at",	    header:["Expires",       {content:"textFilter"}], 	width:250,  sort:"string"},
                    { id:"issuer",	header:["Issuer",  {content:"textFilter"}], 	width:220,  sort:"string"},
                    { id:"origin",	    header:["Origin",         {content:"textFilter"}], 	width:250,  sort:"string"},
                    { id:"service_id",	header:["Service ID",    {content:"textFilter"}],  width:200,  sort:"string"},
                ],
                autoheight:true,
                minHeight:150,
                resizeColumn:true,
                select:"row",
                hover:"myhover",
                scrollY:true,
                scrollX:true,
                navigation:"true",
                url:"api.php/records/certificates",
                pager: { 
                    view: 'pager', size:17, group:5,
                    container:"webixTable_Paging",
                    template:function(data, common){
                        var start = data.page * data.size;
                        var end = start + data.size;
                        if (end > data.count) {
                            end = start + (data.count - start);
                        }
                        var total = data.limit * data.size;
                        if (total > data.count) { 
                            total = data.count
                        }
                        var html = "Record  " + (start + 1) + " - " + end + " of " + total;
                        return common.first() + common.prev() + common.pages(data) + common.next() + common.last() + html;
                    },
                },
                on:{
                    onBeforeLoad:function(){
                        this.showOverlay("Loading...");
                    },
                    onAfterLoad:function(){
                        this.hideOverlay();
                    },
                    onAfterFilter:function(){
                        this.getPager().render();
                    }
                },
                
            });	
        } // End of ShowAppRuleGrid
2

Hi @dmcconnell68 ,
Unfortunately, wasn’t able to reproduce the issue. It works fine for me. Could you, please, share the snippet with the problem?

3

Hi,

Here is the entire script section on the page. I get the error “Non unique view id: sslcertificateid” when I navigate away from this page and then come back to it.

<script type="text/javascript">

    $(document).ready(function() {

        $('.toolbar-button').powerTip({
            placement: 'w' 
        });

        ShowAppRulesGrid();

        function ShowAppRulesGrid() {
            apprulegrid = webix.ui({
                container:"webixTable",
                view:"datatable", 
                id:"sslcertificategrid",
                margin:5,
                css:"webix_header_border webix_data_border",
                columns:[
                    { id:"domain_name",	        header:["Domain Name",           {content:"textFilter"}],    width:200,   sort:"int"},
                    { id:"domain_names",	header:["Domain Names",  {content:"textFilter"}],    width:200,  sort:"string"},
                    { id:"serial",	header:["Serial",  {content:"textFilter"}],    width:200,  sort:"string"},
                    { id:"expires_at",	    header:["Expires",       {content:"textFilter"}], 	width:250,  sort:"string"},
                    { id:"issuer",	header:["Issuer",  {content:"textFilter"}], 	width:220,  sort:"string"},
                    { id:"origin",	    header:["Origin",         {content:"textFilter"}], 	width:250,  sort:"string"},
                    { id:"service_id",	header:["Service ID",    {content:"textFilter"}],  width:200,  sort:"string"},
                ],
                autoheight:true,
                minHeight:150,
                resizeColumn:true,
                select:"row",
                hover:"myhover",
                scrollY:true,
                scrollX:true,
                navigation:"true",
                url:"https://stsportal.epsilon.com/apiv1/api.php/records/certificates",
                pager: { 
                    view: 'pager', size:17, group:5,
                    container:"webixTable_Paging",
                    template:function(data, common){
                        var start = data.page * data.size;
                        var end = start + data.size;
                        if (end > data.count) {
                            end = start + (data.count - start);
                        }
                        var total = data.limit * data.size;
                        if (total > data.count) { 
                            total = data.count
                        }
                        var html = "Record  " + (start + 1) + " - " + end + " of " + total;
                        return common.first() + common.prev() + common.pages(data) + common.next() + common.last() + html;
                    },
                },
                on:{
                    onBeforeLoad:function(){
                        this.showOverlay("Loading...");
                    },
                    onAfterLoad:function(){
                        this.hideOverlay();
                    },
                    onAfterFilter:function(){
                        this.getPager().render();
                    }
                },
                
            });	
        } // End of ShowAppRuleGrid


        $('#btn_exporttoexcel').on('click', function(e) {
            e.preventDefault();
            console.log('Export to Excel button clicked');
            webix.toExcel("apprulegrid", {
                spans:true,
                styles:true,
                filename:"apprulegrid",
                filterHTML:true
            });
        });

        $('#btn_refreshgrid').on('click', function(e) {
            e.preventDefault();
            console.log('Refresh grid button clicked');
            apprulegrid.eachColumn( function(pCol) { var f = this.getFilter(pCol); if (f) if (f.value) f.value = ""; });   // Clear the filters
            apprulegrid.clearAll();    // Clear the grid
            //apprulegrid.load("ajax/modules/ent/ajax_ent_getapprules.php"); // Reload the grid
            apprulegrid.load("https://stsportal.epsilon.com/apiv1/api.php/records/certificates"); // Reload the grid
        });

        $('#btn_createapprule').on('click', function(e) {
            e.preventDefault();
            console.log('Create App rule button clicked');
            $("#modal_dialog").append('<div id="modal-iframe-createapprule" data-iziModal-fullscreen="false"  data-iziModal-title="Create Application Rule" data-iziModal-icon="icon-home"></div>');
                var url = "ajax/modules/iam/iam_form_apprules.php"
                $("#modal-iframe-createapprule").iziModal({
                    headerColor: '#337AB7',
                    focusInput: true,
                    iframe: true,
                    iframeHeight: 650,
                    iframeURL: url,
                    navigateCaption: true,
                    borderBottom: true,
                    width: 550,
                    radius: 5,
                    closeOnEscape: false,
                    padding: 10,
                    bodyOverflow: false,
                    transitionIn: "flipinX",
                    closeButton: false,
                    overlayClose: false,
                    onClosed: function(){
                        $("#modal-iframe-createapprule").remove();
                    },
                });
                $("#modal-iframe-createapprule").iziModal('open');
        });

        window.CloseAppRulesModal = function(){
            $("#modal-iframe-createapprule").iziModal("close");
        };
    
        $('#btn_entitleapp').on('click', function(e) {
            e.preventDefault();
            //console.log('Create App rule button clicked');
            $("#modal_dialog").append('<div id="modal-iframe-entitleapp" data-iziModal-fullscreen="false"  data-iziModal-title="Create Application Rule" data-iziModal-icon="icon-home"></div>');
                var url = "ajax/modules/iam/iam_form_apprequest.php"
                $("#modal-iframe-entitleapp").iziModal({
                    headerColor: '#337AB7',
                    focusInput: true,
                    iframe: true,
                    iframeHeight: 650,
                    iframeURL: url,
                    navigateCaption: true,
                    borderBottom: true,
                    width: 550,
                    radius: 5,
                    closeOnEscape: false,
                    padding: 10,
                    bodyOverflow: false,
                    transitionIn: "flipinX",
                    closeButton: false,
                    overlayClose: false,
                    onClosed: function(){
                        $("#modal-iframe-entitleapp").remove();
                    },
                });
                $("#modal-iframe-entitleapp").iziModal('open');
        });

        window.CloseAppRulesModal = function(){
            $("#modal-iframe-entitleapp").iziModal("close");
        };

    });

</script>
4

Such messages is produced by debug version of webix when core creates UI with already used ID. In your case it means that ShowAppRulesGrid called multiple times on the same page

Actually, as far as I can see, the code on the page never uses such ID, so you can just remove it ( view will generate an unique ID in such case )