CODEWITHSUNDEEP
jquerydialoghighcharts
Kokozaurus
Kokozaurus

Reputation: 639

Highcharts chart doesn't show in jquery dialog

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.

Upvotes: 3

Views: 1787

Answers (1)

Kokozaurus
Kokozaurus

Reputation: 639

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+)

Upvotes: 2

Related Questions