JQUERY UI Dialog not showing the div

Question

Using the div divDialog for displaying the jquery UI Dialog box. Dialog window pops up and display the message. But I am not able to see the divsection divDialog in the html page at the end. Thought Jquery UI dialog code is hiding it with display:none when dialog is initialized. Tried many way to display it but nothing is working. Pasted the code below

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
  <link rel="stylesheet" href="http://bbsmt01.dev.aapt.com.au:8080/testmanager/jquery/jquery-ui-themes-1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://bbsmt01.dev.aapt.com.au:8080/testmanager/jquery/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
  <script src="http://bbsmt01.dev.aapt.com.au:8080/testmanager/jquery/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<script>
$(function(){

        $("#divDialog").dialog({
                resizable: true,
                autoOpen:false,
                show: {
                        effect: "blind",
                        duration: 1000
                },
                hide: {
                        effect: "explode",
                        duration: 1000
                },
                modal: true,
                width:400,
                height:300,
                buttons: {
                        ok: function() {
                                $(this).dialog('close');
                        } //end cancel button
                }//end buttons

        });//end dialog

               $("#divDialog").html("<b>test123</b>");
                $("#divDialog").dialog('option','title','Display Example');
                $('#divDialog').dialog('open');


});
</script>
</head>

<body>
<p>Demonstrate JQUERY UI DIalog box.</p>
<br><br>
<div id="div1"  class="gen"  style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" class="gen"  style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" class="gen" style="width:80px;height:80px;background-color:blue;"></div>
<div id="divDialog"  style="width:80px;height:80px;background-color:blue;">testdivDialog</div>
</body>
</html>

why do you have 2 different version of jQuery? remove `jquery-ui-1.10.3/jquery-1.9.1.js`? and check — Arun P Johny, Feb 04 '14 at 06:26
also check whether the files `http://bbsmt01.dev.aapt.com.au:8080/testmanager/jquery/jquery-ui-1.10.3/jquery-1.9.1.js` exists — Arun P Johny, Feb 04 '14 at 06:28
jquery dialog removes the div from it's location in the DOM when it opens/creates the dialog and places it within a different DIV for the dialog. On dialog destroy, it returns the div back into it's original place in the DOM. — David Fleeman, Feb 04 '14 at 06:34

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

jQuery dialog removes the div from it's location in the DOM when it opens/creates the dialog and places it within a different DIV for the dialog with class "ui-dialog". On dialog destroy, it returns the div back into it's original place in the DOM. This link explains it better:

Jquery Dialog - div disappears after initialization

edited May 23 '17 at 10:31

Community

1
1

answered Feb 04 '14 at 06:37

David Fleeman

2,588
14
17

score 0 · Answer 2 · answered Feb 04 '14 at 06:33

0

You have 2 versions of jQuery in your page. If you want to use two or more versions of jQuery, you should use the jQuery .noConflict() method. Either way, check this simple dialog tutorial http://api.jqueryui.com/dialog/. Hope this helps!

answered Feb 04 '14 at 06:33

Knx

107
7

score 0 · Answer 3 · answered Feb 04 '14 at 06:37

Here is your working code...

Fiddle

Your div with id divDialog get removed when you popup it..

Create new div with different id

like..

<p>Demonstrate JQUERY UI DIalog box.</p>
<br><br>
<div id="div1"  class="gen"  style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" class="gen"  style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" class="gen" style="width:80px;height:80px;background-color:blue;"></div>
    <br>
<div id="divDialog1"  style="width:80px;height:80px;background-color:blue;">testdivDialog</div>

 <div id="divDialog"  style="width:80px;height:80px;background-color:blue;"></div>

Note: please do not include same framework multiple times..

JQUERY UI Dialog not showing the div

3 Answers3