JQuery UI Dialog is not properly resized when re-opened?

Question

I need the help of the experts on here.

My code is fine and dandy and works great a single time once the "Open" button is clicked. Once I select date it closes just fine. However, when I go to re-open it again for a second time the width and height are out of scope and the ui dialog looks different. I am wondering what I am doing wrong here?

<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->  
    <link   href="jq/jquery-ui.css"         type="text/css" rel="stylesheet" />
    <script src="jq/jquery.min.js"          type="text/javascript"> </script>
    <script src="jq/jquery-ui.min.js"       type="text/javascript"> </script>

<script type="text/javascript">
var z; 

function opendd() {

  $('#dd').dialog({  
       autoOpen:   true, 
       modal:      true, 
       overlay:    { opacity: 0.5, background: 'black'}, 
       title:      'Select the date:', 
       height:     215,  
       width:      234, 
       draggable:  false,  
       resizable:  false 

   });//end of dialog_atip 


  $("#B1").click(function(){  
        callback(); 
  }); 

  $('#d1').datepicker({ 
     onSelect:function(){ 
                    z = $(this).val(); 
                    alert(z); 
                    $("#dd").dialog("close"); 
     } 
  }); 

}//end of function


function callback() {  
    alert(z); 
} 
</script>


</head>

<body>
<a href="javascript:opendd()">open
</a>
<div style="display:none" id="dd">
<div id="d1">
</div>

</div>
<input type="button" value="CallbackValue" name="B1" id="B1"> 

</body>

</html>

Much thanks and appreciation for all your help and support in advance.

Jay

have you tried to use "auto" for height and width? : http://stackoverflow.com/questions/2231446/automatically-resize-jquery-ui-dialog-to-the-width-of-the-content-loaded-by-ajax — guy mograbi, Aug 29 '12 at 20:17
Seems consistent (albeit crowded) here http://jsfiddle.net/j08691/T8EcP/ — j08691, Aug 29 '12 at 20:20
here, have width changed for the eyes :) http://jsfiddle.net/awPGV/ — Mihai Iorga, Aug 29 '12 at 20:33
Thanks for everyones help. You all rock. Stupidity and negelect on my part I guess, I forgot to declare the and everything worked fine just as it should. I also downloaded jQuery 1.7.2 as opposed to 1.8. — Jason Kelly, Aug 30 '12 at 13:35

score 0 · Accepted Answer · answered Aug 29 '12 at 20:40

I wasn't able to duplicate your described behavior, but did rewrite some of the functionality to more accurate to what jQuery recommends, which might fix your issue.

In the code block below, I instantiate the jQuery modal dialog once on document ready, then fire the dialog('open') command each time to open / close it. (I swapped out your libraries with google api for testing).

Please let me know if this works for you :)

<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->  
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
var z; 

$(document).ready(function() {
    $('#dd').dialog({  
       autoOpen:   false, 
       modal:      true, 
       overlay:    { opacity: 0.5, background: 'black'}, 
       title:      'Select the date:', 
       height:     215,  
       width:      234, 
       draggable:  false,  
       resizable:  false 

    });//end of dialog_atip 
    $("#B1").click(function(){  
        callback(); 
    }); 
    $('#d1').datepicker({ 
        onSelect:function(){ 
                    z = $(this).val(); 
                    alert(z); 
                    $("#dd").dialog("close"); 
        } 
    }); 
});


function opendd() {
    $('#dd').dialog('open');
}//end of function


function callback() {  
    alert(z); 
} 
</script>


</head>

<body>
<a href="javascript:opendd()">open
</a>
<div style="display:none" id="dd">
<div id="d1">
</div>

</div>
<input type="button" value="CallbackValue" name="B1" id="B1"> 

</body>

</html>

guy mograbi · Answer 2 · 2012-08-30T09:03:26.840

0

I was unable to reproduce your problem as well, but if you keep getting it, you can use something like $("#dd").dialog().option("height", 215). Read more about it at jquery dialog height option - setting height in runtime.

Maybe a CSS solution would be better?

Have you noticed you have autoOpen:true but you don't use it? Is this on purpose?

Here is my JSFiddle.

edited Aug 30 '12 at 09:03

answered Aug 29 '12 at 21:00

guy mograbi

27,391
16
83
122

JQuery UI Dialog is not properly resized when re-opened?

2 Answers2