0

I'm using jquery dialog to open a screen when the buttons clicked on the sidebar. Basically, when clicked buton, following codes run:

resizeDialog();
$("#dashboardContainer").dialog("open");

function resizeDialog() {
    var relativeDiv, relativeHeight, relativeWidth, relativeMy;

    if(myData.opening_type == 'full') {
        relativeDiv = '#sContainer';
        relativeWidth = '328';
        relativeMy = 'left top';

    } else {
        relativeDiv = '#cContainer';
        relativeMy = 'right top';

        var mqDesktop2 = window.matchMedia( "(min-width : 1500px) and (max-width : 1750px)" );
        var mqMobile = window.matchMedia( "(min-width:700px) and (max-width: 1500px)" );

        if(mqMobile.matches) {
            relativeWidth = '648';

        } else if(mqDesktop2.matches) {
            relativeWidth = '968';

        } else {
            relativeWidth = '1320';
        };
    }
    relativeHeight =  $(window).height() - ($("#cContainer").offset().top) - 20;

    $("#myDialog")
        .dialog( "option", "height", relativeHeight)
        .dialog( "option", "width", relativeWidth)
        .dialog( "option", "position", { my: relativeMy, at: "right top", of: relativeDiv, } );
}

But, when i frequently(one after another) click on the buttons, dialog opens with its previous size. When i add a timeout before opening dialog, it runs. But i don't want to add a timeout because dialog has to be opened immediately. Is there any other solutions that u can suggest?

Improve this question
3
  • Unclear why you believe the dialog would be resized. Unsure what "button" you are referring to. Please provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example
    – Twisty
    Commented Mar 30, 2020 at 15:04
  • Every button in sidebar opens dialog with different width & height. Buttons are just buttons, they all have onclick event, every onclick opens dialog and puts a different iframe in it. But before open dialog when i give height-width it works but if i clicked frequently(which means frequently close-open dialog) dialog opens with previous width-height.
    – lesstalkmorecode
    Commented Mar 30, 2020 at 15:13
  • I do not see these buttons in your example. Without a proper example it will be difficult for people to assist you.
    – Twisty
    Commented Mar 30, 2020 at 15:31

1 Answer 1

Reset to default
0

I am unable to replicate the issue as you described it. I created the following test.

$(function() {
  function resizeDialog(dlg, w, h, cb) {
    dlg.dialog("option", {
      height: h,
      width: w
    });
    if (cb != undefined) {
      cb();
    }
  }
  $("[id^='dialog']").dialog({
    autoOpen: false
  });
  resizeDialog($("#dialog-1"), 200, 320, function() {
    $("#dialog-1").dialog("open");
  });
  resizeDialog($("#dialog-2"), 120, 120);
  $("#dialog-2").dialog("option", "position", {
    my: "left top",
    at: "left+10 top+10",
    of: window
  }).dialog("open");
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog-1" title="Basic dialog 1">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="dialog-2" title="Basic dialog 2">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

I am able to resize them and open them in a similar manner as your script. I would add some checks to ensure that you're getting the relative values you are expecting.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.