Highcharts chart doesn't show in jquery dialog

Question

I'm trying to show a chart in a jQuery dialog.

I actually do it, but only the first time. When I reload the page and show the dialog, I get only an empty space. Here's my code:

function () {
    var dialog = $('#div_id').dialog({
        'autoOpen': false,
        'closeOnEscape':true, 
        'buttons':[{ 
        'text':'OK',
        'click': function() { $(this).dialog('close'); }
        }],
        'modal':true
    });
    $("#show_dialog_button").click(function () {
            dialog.dialog('open');
            var chart = Highcharts.Chart({/*some configs here*/});
            var jqChart = $("#"+chart.options.chart.renderTo);
        HighchartsHelper.autoResizeChart(jqChart,chart);
    }
}

I hope somebody can help.

Answer 1

Ok, I have found what the problem is. When a dialog is created it copies the given element and puts it in the body tag. Thus there are more than one elements with the same id. Then on the second call the dialog doesn't know which element to get and show so it just opens. The fix is to remove all those elements except the original one from the DOM. My code looks like this:

$("[id='dialog_element']").not("#dialog_parent>#dialog_element").remove();

I remove those parasite elements like that for compatibility with IE7 (Maybe all IE7+)