使用Jquery UI对话框的问题

Question

dial and place are the two divisions which exist in the html code that calls the function. I am able to open up both of them but not able to embed the graph using plot in the 'place' division after it is opening up via the 'Draw' button. It works fine only when I open both the boxes initially.

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

I figured out a quick fix for it. The problem was that the dialog will open but will not be manipulated by flot because it was unable to extract the width and height of the dialog box. So before opening the dialog we can fix the height and width.

Specifying height in the style sheet of html did not work in my case.

 $(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

The key thing you need for flot to work is for your plac2 div to have a width and height, and be visible (ie drawn to the screen). So before you plot, try alerting whether your div has width and height:

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

//plotting code here

Let us know what happens.