单击关闭按钮时,在jquery对话框中销毁Div及其内容

时间:2016-02-01 05:39:21

标签: javascript jquery chart.js jquery-dialog

当csv数据被拖动到图形选项卡时,我有一个应用程序,数据将在jquery对话框扩展中显示为图形。一切正常。如果单击关闭按钮,对话框将按预期关闭。但是,使用chart.js构建的图形不会被破坏。就像我再次将数据拖放到图形选项卡而不刷新页面一样,对话框扩展打开,构建旧图形。现在,我想在点击关闭按钮后销毁jquery对话框内的所有div,canvas,graph。如何制作这个?下面是我的代码?

$("#graph_container").dialog("open")
                .dialog({
                    height: height,
                    title: data1 + " " + "(1990 January to 2008 December)",
                    width: width,
                    resizable: true,
                    responsive: true,
                    droppable: true,
                    close: function(ev, ui) {
                           graph_myLine.destroy();
                            $(this).remove();
                   }

                })
                .dialogExtend({
                    "titlebar": 'transparent',
                    "closable": true,
                    "minimizable": true,
                    "minimizeLocation": "right",
                    "icons": {
                        "close": "ui-icon-circle-close",
                        "minimize": "ui-icon-circle-minus",
                        "restore": "ui-icon-circle-triangle-n"
                    },
                    open: function (event, ui) {
                        $('#graph_container').css('overflow', 'hidden'); //this line does the actual hiding
                    }
                });

如果我运行上面的代码,按下关闭按钮后,如果我再次将数据拖放到图形选项卡,则破坏功能在chart.js中不起作用。该图表仍然存在。它显示错误为未捕获的TypeError:无法读取属性'toDataURL'为null 它会在代码的下一行中引发错误

$("#graph_container").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function (event, ui) {
                    HoldOn.open();
                    //alert(ui.draggable.text());
                    // $("#info").html("dropped!");
                    canvas = document.getElementById('canvas');
                    if (canvas.toDataURL() !== document.getElementById('blank').toDataURL())

1 个答案:

答案 0 :(得分:0)

尝试在div中包装整个渲染空间并为div赋予id,假设你的div的id为graphDiv,然后清空你可以写的div中的所有内容:

$("#graphDiv").empty();

我想这可以解决你的问题。