Jquery ui dialog opens only once

Asked
Active3 hr before
Viewed126 times

7 Answers

90%

Are you using the ui dialog? You should post some code so we can see what is causing your problem. But here iss a guess (because I made this same mistake recently). When using ui dialog you have to initialize the dialog only once.,I have a button that opens a dialog when clicked. The dialog displays a div that was hidden,After I close the dialog by clicking the X icon, the dialog can't be opened again.,The simple solution to this problem is to instantiate the dialog with autoOpen set to false and then call .dialog('open') in the event handler.

The problem that users often encounter with dialogs is that they try to instantiate a new dialog every time the user performs some action (generally clicking a link or a button). This is an understandable mistake because at first glance it seems like calling .dialog() on an element is what causes the dialog to open. In reality what is happening is that a new dialog instance is being created and then that instance is being opened immediately after instantiation. The reason that the dialog opens is because dialogs have an autoOpen option, which defaults to true. So when a user calls .dialog() on an element twice, the second call is ignored because the dialog has already been instantiated on that element.

Solution:

The simple solution to this problem is to instantiate the dialog with autoOpen set to false and then call .dialog('open') in the event handler.

$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $('#opener').click(function() {
        $dialog.dialog('open');
    });
});
load more v
88%

© 2013 jQuery Foundation

load more v
72%

Open content in an interactive overlay.,Want to learn more about the dialog widget? Check out the API documentation.,Default functionality,The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>jQuery UI Dialog - Default functionality</title>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  <link rel="stylesheet" href="/resources/demos/style.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>  <script>  $( function() {    $( "#dialog" ).dialog();  } );  </script></head><body> <div id="dialog" title="Basic dialog">  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p></div>  </body></html>
65%

Read the question carefully.,Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question. ,Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.,If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

function LoadGridView(id, row) {
   var dlg = jQuery('#Main_ProductEdit').load('ProductEdit.aspx');

   dlg.dialog({
      autoOpen: false,
      modal: true,
      show: 'slide',
      close: 'slide',
      width: 400,
      height: 160,
      buttons: {
         "cancel": function() {
            dlg.dialog("close");
         }
      }
   });
   alert('opening');
   dlg.dialog("open");

}
load more v
75%

Simply put, it replaces the core/jquery.ui.dialog dependency in core/drupal.dialog with bootstrap/modal.jquery.ui.bridge. If one wishes to keep the jQuery UI dialog, they can disable it without losing Bootstrap's Modals., My brief searching makes me think that bootstrap does not support non-modal dialogs.,Also the new experimental Layout Builder module is using the off-canvas dialog in 8.5.x so people will probably want to use that.,I got the same issue and to fixed it, i just disabled Bootstrap modal in my subtheme settings .

This page using the simplest render array to make the 2 links

 return [
    'modal_link' => [
       '#title' => 'Click Me Modal!',
       '#type' => 'link',
       '#url' => Url::fromRoute('tester.dialog_callback'),
       '#attributes' => [
          'class' => ['use-ajax'],
          'data-dialog-type' => 'modal',
       ],
       '#attached' => [
          'library' => [
             'core/drupal.dialog.ajax',
          ],
       ],
    ],
    'dialog_link' => [
       '#title' => 'Click Me Dialog!',
       '#type' => 'link',
       '#url' => Url::fromRoute('tester.dialog_callback'),
       '#attributes' => [
          'class' => ['use-ajax'],
          'data-dialog-type' => 'dialog',
       ],
       '#attached' => [
          'library' => [
             'core/drupal.dialog.ajax',
          ],
       ],
    ],
 ];
load more v
40%

Only needed when the height of the modal changes while it is open.,Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.,Bootstrap's alert plugin exposes a few events for hooking into alert functionality.,Bootstrap's affix plugin exposes a few events for hooking into affix functionality.

$(document).off('.data-api')
load more v
22%

I’m working on a project where the client wants to offer two forms for users to fill out, each to appear in a modal or dialog (I chose dialog). I’ve got them opening just fine, closing just fine, but since they both occupy the same space (and use the same z-index) on the page I want to detect if one is open before going any further.,$(.dialog) is a selector with 2 members, so the behavior of a group’s status ($(".dialog").dialog("isOpen")) is at best ambiguous, and probably misleading you.,Alternatively, simply check ("#dialog1") isOpen || ("#dialog2") isOpen, if you know you’re sticking with 2 dialogs.,So, the code I have will work if the first form is already opened; the second form detects that the first one is open and will close it before opening the second form.

My code:

<div class="rmh button"><a href="javascript:void(0);" title="Report an Event" id="rmn_rae">Report an Event</a></div>
<div class="rmh button"><a href="javascript:void(0);" title="Update Contacts" id="rmn_uc">Update Contacts</a></div>
<div id="dialog1" title="Report An Event" class="dialog">
	<p>This is the first dialog.  This is just placement text.  Whoa.</p>
</div>
<div id="dialog2" title="Update Contacts" class="dialog">
  <p>This is the second dialog.  It's not closing the first dialog (if open) before opening when I click the button.  Joy.</p>
</div>
<script>
$(document).ready(function(){
	const rae = $('#rmn_rae'), uc = $('#rmn_uc');
	var isOpen;
    $(".dialog").dialog({
	  resizable: false,
      autoOpen: false,
	  width: 800,
      height: 500,
	  modal: false,
      show: {
        effect: "explode",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 500
      }
    });
	rae.on('click',function(){
		isOpen = $(".dialog").dialog("isOpen"); alert(isOpen);
		switch(isOpen){
			case true:
				$(".dialog").dialog("close");
				setTimeout(function(){
					$("#dialog1").dialog("open");
					},501);
			break;
			default:
				$("#dialog1").dialog("open");
			break;
			}
		});
	uc.on('click',function(){
		isOpen = $(".dialog").dialog("isOpen"); alert(isOpen);
		switch(isOpen){
			case true:
				$(".dialog").dialog("close");
				setTimeout(function(){
					$("#dialog2").dialog("open");
					},501);
			break;
			default:
				$("#dialog2").dialog("open");
			break;
			}
		});
});
</script>
load more v

Other "undefined-undefined" queries related to "Jquery ui dialog opens only once"