CODEWITHSUNDEEP
jquerydialogheight
user1286322
user1286322

Reputation: 321

Second jQuery dialog retains height of the previous dialog

I'm finding a problem with the height of my jQuery dialog box when its popped from a previous jQuery dialog. In the example below, the first dialog correctly display as 200 wide x 200 high. Clicking the OK button should close the first dialog and open a second dialog at 400 wide x 400 high, but it doesn't: It second dialog displays as 200 wide x 400 high.

I initially found the issue while using jQuery 1.11.2, but it reproduces in 3.2.1 as well.

The example works in my environment, but I'm new to jsfiddle and can't get it working here.

Can someone tell me what I'm doing wrong or provide a work around? Thanks.

$(document).ready(function() {

  $("#testBox").dialog({
    dialogClass: "customDialog",
    autoOpen: false,
    draggable: false,
    modal: true,
    show: {
      effect: "blind",
      duration: 100
    },
    hide: {
      effect: "blind",
      duration: 100
    }
  });
});

function openTestDialog() {
  $('#testBox').html('<p>first pop</p>');
  $('#testBox').dialog("option", "title", "Title of the dialog");
  $('#testBox').dialog("option", "width", 200);
  $('#testBox').dialog("option", "height", 200);
  $('#testBox').dialog("option", "modal", true);
  $('#testBox').dialog({
    buttons: [{
      text: "Pop 2nd",
      click: function() {
        $(this).dialog("close");
        pop2();
      }
    }]
  });
  $('#testBox').dialog("open");

}

function pop2() {
  $('#testBox').html('<p>second pop</p>');
  $('#testBox').dialog("option", "title", "Title of the second dialog");
  $('#testBox').dialog("option", "width", 400);
  $('#testBox').dialog("option", "height", 400);
  $('#testBox').dialog("option", "modal", true);
  $('#testBox').dialog({
    buttons: [{
      text: "OK",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
  $('#testBox').dialog("open");

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="testBox"></div>
<button type="button" onclick="openTestDialog();">First pop</button>

Upvotes: 0

Views: 154

Answers (1)

Jeff B
Jeff B

Reputation: 30099

I'm not sure why it wouldn't work, but I will say that in this case you really want 2 separate dialogs. You are using them for different purposes, so they are really 2 separate entities. This also solves your isssue:

$('#testButton').on('click', function() {
    openTestDialog();
  })

  function openTestDialog() {
    $('#testBox').html('<p>first pop</p>');
    $('#testBox').dialog({
      title: "Title of the dialog",
      width: 200,
      height: 200,
      modal: true,
      buttons: [{
        text: "Pop 2nd",
        click: function() {
          $(this).dialog("close");
          pop2();
        }
      }]
    });
    $('#testBox').dialog("open");

  }

  function pop2() {
    $('#testBox2').html('<p>second pop</p>');
    $('#testBox2').dialog({
      title: "Title of the second dialog",
      width: 400,
      height: 400,
      modal: true,
      buttons: [{
        text: "OK",
        click: function() {
          $(this).dialog("close");
        }
      }]
    });
    $('#testBox2').dialog("open");
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>


<div id="testBox"></div>
<div id="testBox2"></div>
<button id="testButton" type="button">First pop</button>

Upvotes: 1

Related Questions