jQuery UI Widgets Forums DataTable Maybe a bug in destroy method when using filtering?

This topic contains 9 replies, has 4 voices, and was last updated by  Kaddath 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • PiDome
    Participant

    Hi All, i have the following javascript code (in a document ready) which is loaded via an ajax call:

    
            $("#knownissuesblock").jqxExpander({width: 975, theme: siteSettings.getTheme(), expanded: false });
            var issuesSource =
                    {
                        url: "https://bitbucket.org/api/1.0/repositories/pidome/pidome-server/issues?kind=bug&kind=task&status=new&status=open",
                        dataType: "jsonp",
                        datafields: [
                            {name: 'created_on', type: 'date'},
                            {name: 'title', type: 'string'},
                            {name: 'local_id', type: 'int'},
                            {name: 'content', type: 'string'},
                            {name: 'priority', type: 'string'},
                            {name: 'status', type: 'string'}
                        ]
                    };
            var dataIssueAdapter = new $.jqx.dataAdapter(issuesSource);
            var issueRowIssuesDetails = function (id, row, element, rowinfo) {
                element.append($('<div style="height:30px; padding-left: 27px;">' + row.content + ' <a style="color:#ffffff; font-weight:bold;" href="https://bitbucket.org/pidome/pidome-server/issue/'+row.local_id+'/" target="_blank">View online</a></div>'));
            };
            $("#issuestable").jqxDataTable({filterable: true, filterMode: "simple", initRowDetails: issueRowIssuesDetails, rowDetails: true, selectionMode: "none", source: dataIssueAdapter, altRows: true, height: 300, width: 972, sortable: true, pageable: true, pageSize: 7, pagerButtonsCount: 5, theme: siteSettings.getTheme(),
                columns: [
                    {text: 'Created', dataField: 'created_on', width: 200, cellsformat: "dddd, d MMMM yyyy HH:mm"},
                    {text: 'Title', dataField: 'title', width: 600},
                    {text: 'Priority', dataField: 'priority'},
                    {text: 'Status', dataField: 'status'},
                    {text: 'issueid', datafield: 'local_id', hidden: true},
                    {text: 'description', datafield: 'content', hidden: true}
                ]
            });
    

    The next code has been put inside and outside an document ready tag:

    
        function clearHandlers(){
            $("#devicetable").jqxDataTable('destroy');
            $("#macrotable").jqxDataTable('destroy');
            $("#favoritechoices").jqxTabs('destroy');
            $("#favoriteblock").jqxExpander('destroy');
            
            $("#newstable").jqxDataTable('destroy');
            $("#newsblock").jqxExpander('destroy');
    
            $("#issuestable").jqxDataTable('destroy');
            $("#knownissuesblock").jqxExpander('destroy');
    
        }
    

    I use the following code to load the content which lives in an external js file:

    
    function loadPageContent(aEl, menuId, selectedId){
        pidomeRPCSocket.clearFallbacks();
        if (typeof clearHandlers === 'function') { 
          clearHandlers(); 
        }
        $("#contentbody").load($(aEl).attr("href") + "?requesttype=ajax", function( response, status, xhr ) {
            if ( status === "error" ) {
              showErrorMessage("Navigation error","Could not load page, Please report this error" + "<br/><br/>" + 
                      "Additional data: <br/>" +
                      "Page: " + $(aEl).text() + "<br/>" + 
                      "Url: " + $(aEl).attr("href") + "<br/>" + 
                      "Error: " + xhr.status + " " + xhr.statusText);
            } else {
                $("#mainmenu li").each(function(){
                    $(this).removeClass("selected");
                });
            }
            setPageBreadcrumbs(menuId, selectedId, $(aEl).text(), $(aEl).attr("href"));
            document.title = "PiDome - " + $(aEl).text();
        });
        return false;
    }
    

    I can see there are divs which are added while initializing the jqwidgets are removed, except for two. To explain some div’s:
    The $(“#devicetable”).jqxDataTable(); and $(“#macrotable”).jqxDataTable(); create datatables which are created by data which exist locally via table cells rendered with content in the html source. When these are destroyed they are removed completely from the dom.

    To explain one of two failing:
    $(“#issuestable”).jqxDataTable(); is loaded with remote data as you can see in the above code. But when i want to destroy this table the div containing the column names are not removed from the body (when i unhide it with the google webmaster tools) as it does with devicetable.
    The name of the div which is not removed is like: “listBoxjqxWidget70323952” which contains a div with an id like: “innerListBoxjqxWidget70323952”

    The div not removed shows the names of the columns in vertical order beginning with created and ending with description.

    It seems like it is caused by having the next options included in the $(“#issuestable”).jqxDataTable() :
    filterable: true, filterMode: “simple”

    When i remove the above two options the div previously mentioned as not removed is removed.

    I know it is a really big post. But i hope to have supplied enough information this way so it can be solved.

    Is there a workaround available to tackle the above? My web application uses a LOT of these data tables with filtering.

    Best regards,
    John.


    Peter Stoev
    Keymaster

    Hi John,

    Yes, that is an issue. All UI Elements should be removed after calling “destroy”. I will create a work item about that. Thank you for the feedback.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    PiDome
    Participant

    Hi Peter,

    No problem. But i think it is not only when filtering is applied.

    I have changed a little thing to really check it if i’m maybe in error:

    
        function clearHandlers(){
            $("#issuestable").jqxDataTable('destroy');
            $("#knownissuesblock").jqxExpander('destroy');
            
            $("#devicetable").jqxDataTable('destroy');
            $("#macrotable").jqxDataTable('destroy');
            $("#favoritechoices").jqxTabs('destroy');
            $("#favoriteblock").jqxExpander('destroy');
            
            $("#newstable").jqxDataTable('destroy');
            $("#newsblock").jqxExpander('destroy');
    
            alert("called");
    
        }
    

    My clearhandler get’s called because moving to a new ajax page load shows me the alert. When viewing the elements inspector all the divs beginning with: “listBoxgridpagerlistbottom” are staying like for example: “listBoxgridpagerlistbottomissuestable”.

    The only difference is that when: “filterable: true, filterMode: “simple”” is applied the div contains the columns and when not the div is a white block without the columns.

    I hope the above shares some more information and can narrow it down a little bit.

    Best regards,
    John.


    PiDome
    Participant

    I also feel the need to add that when the contents of the table is refreshed via the data adapter with json data extra divs are created containing id’s like: “listBoxjqxWidget37f76680” which hold the column names.

    So it is not only when the table is destroyed but also with data refreshes, in my case using dataBind function.

    I think the title of the subject is not applicable anymore and should be renamed to something like “Bug in column names div removal”.

    Good luck hunting,
    John.


    Peter Stoev
    Keymaster

    Hi John,

    I thought that my previous post confirmed the issue from your topic. There is an issue, because not all HTML Elements are removed when Filterable is set to true and jqxDataTable’s destroy method is called. The correct behavior is all HTML Elements to be removed. I created a work item and it would be resolved in one of the next versions.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    PiDome
    Participant

    That is why i added more information because it is not isolated to only when Filterable is set to true and jqxDataTable’s destroy method is called:

    The only difference is that when: “filterable: true, filterMode: “simple” is applied the div contains the columns and when not the div is a white block without the columns.

    So it is not only when the table is destroyed but also with data refreshes, in my case using dataBind function.

    Which could possible help developers to isolate it and make it less wide in possible causes.


    Peter Stoev
    Keymaster

    Hi John,

    To be more specific, a DropDownList in jqxDataTable is not destroyed. The widget has 3 DropDownLists which should be destroyed when “destroy” is called.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    PiDome
    Participant

    Hi Peter,

    That makes it more clear, is there a workaround method to destroy these on destroy and/or data refresh? If not there is no problem because my application is still in very early alpha stage, but it will help while debugging.

    Otherwise i will just wait for a new release

    Best regards,
    John.


    baranramis
    Participant

    Hi,

    We have same problem with jqxtreegrid if filtrable is true
    Did you fixed this bug for that issue
    please can you give information us.

    Best regards,


    Kaddath
    Participant

    Hi,

    We also have this issue with jqxDateTimeInput(s) created for the filter row not destroying with the grid.

    If this can help you solve it, the problem happens in our code when doing a call to jqxGrid('clear'). If you look at the DOM for the following test example, you’ll see that each time a call to clear is made on the grid (click several times the clear button), it adds a new “calendarjqxWidgetXXXXXXXX” div to the body, and when jqxGrid('destroy') is called, only the last one created is removed.

    The test example: https://jseditor.io/?key=28f5c709f4c711e9a73300224d6bfcd5

    Hope that helps you, for the moment, i’ll do a workaround by not calling the clear method.

    Kaddath

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.