使用Jquery UI對話框的問題

Question

Dial和place是調用該函數的html代碼中存在的兩個划分。 我可以同時打開它們，但在通過“繪制”按鈕打開圖形后，無法在“位置”分區中使用繪圖嵌入圖形。 僅當我最初打開兩個盒子時，它才能正常工作。

function abcd (dial,place,xrange){

var dial = conv(dial)

var xr = document.getElementById("xrange");

var yr = document.getElementById("yrange");

var gtype = document.getElementById("pattern");

xr.value = ""; yr.value = ""; gtype.value = "Line" ;

var place = conv(place);

$(dial).dialog("close");

$(dial).dialog("open");

$(place).dialog({
            autoOpen: false,
            show: 'Explode',
            height: 500,
            width: 450,
            modal: true})

$(dial).dialog({
            autoOpen: false,
            show: 'Explode',
            height: 300,
            width: 350,
            modal: false,
            buttons :
                        { "Draw" : function() {
                        $((place)).dialog("open");


            $(function () {

//manipulate input values to plot data

    $.plot(document.getElementById(plac2), [ {data:d1roe,label:"abc"},
                                 {data:d1roa, label:"xyz"} ], {
                  series: {stack: 0},
                  xaxis: {ticks: ticks},
                  ticks: ticks
               });


});

//function open(xyz) {$(xyz).dialog("open");}

function conv (myid) { 
return ( '#' + myid );
 }

Answer 1

我想出了一個快速解決方案。 問題在於該對話框將打開，但由於無法提取對話框的寬度和高度，因此無法通過浮動操作。 因此，在打開對話框之前，我們可以固定高度和寬度。

在我的情況下，在html樣式表中指定高度無效。

 $(dial).dialog({
        autoOpen: false,
        show: 'Explode',
        height: 300,
        width: 350,
        modal: false,
        buttons :
                    { "Draw" : function() {
                     $(place).width(500);    // can take this as an input as well
                     $(place).height(500);
                     $(place).dialog("open");
                     //ploting code
}})}

Answer 2

使flot起作用的關鍵是使plac2 div具有一定的寬度和高度，並使其可見（即繪制到屏幕上）。 因此，在繪制之前，請嘗試提醒div是否具有寬度和高度：

var placeholder = document.getElementById(plac2);
alert($(placeholder).width()+','+$(placeholder).height());

//plotting code here

讓我們知道會發生什么。