Non unique view id

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

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

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>