Bug Tracker

Ticket #4093: index.html

File index.html, 4.9 KB (added by skrshetty, 11 years ago)

Modified your example with query string to replicate the bug. none of the dialog will not be loaded with data

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
3    <head>
4        <title>jQuery UI Dialog - Exemplos/Examples</title>
5        <meta name="content-type" content="text/html; charset=iso-8859-1"/>
6        <link href="css/ui.dialog.css" rel="stylesheet" type="text/css"/>
7        <link href="css/ui.resizable.css" rel="stylesheet" type="text/css"/>
8        <link href="chili/javascript.css" rel="stylesheet" type="text/css"/>
9       
10                <script src="js/jquery.js" type="text/javascript"></script>
11                <script src="js/ui.core.js" type="text/javascript"></script>
12        <script src="js/ui.dialog.js" type="text/javascript"></script>
13        <script src="js/ui.resizable.js" type="text/javascript"></script>
14        <script src="js/ui.draggable.js" type="text/javascript"></script>
15
16                <!-- Chili the jQuery code highlighter plugin -->
17        <script type="text/javascript" src="chili/chili.pack.js"></script>
18        <script id="setup" type="text/javascript">
19            ChiliBook.recipeFolder = "chili/";
20            ChiliBook.stylesheetFolder = "chili/";
21        </script>
22        <style>
23            * {
24                margin: 0; padding: 0;
25            }           
26            body {
27                font-family: Tahoma; margin-bottom:20px; font-size: 11px; line-height:18px;
28            }
29                        .demo {
30                                width: 90%; margin:auto;
31                        }
32                        .ui-dialog p {
33                                text-align:justify;
34                        } 
35                        .explain {
36                                text-align:center; font-weight:bold;
37                        }     
38            h2 {
39                font-size: 14px;
40            }           
41            p {
42                padding: 5px 20px;
43            }           
44            pre {
45                font-size: 11px;
46                border: solid 1px #ccc;
47                background: #f1f1f1;
48                margin: auto;
49            }
50        </style>
51        <script>
52            var Demo = {
53                one: function(){
54                    $('<div id="demo1">').load('pag1.html?country= united kingdom').dialog({
55                        maximize: false, 
56                                                modal:true,
57                                                overlay:{background:'#000000', opacity:0.4}
58                    });
59                },
60                two: function(){
61                    $('<div id="demo2">').load('pag1.html?country= united kingdom').dialog({
62                        title: 'I\'m the demo 2!',
63                        closable: false,
64                        width: 350,
65                        height: 200,
66                        maximize: false,
67                        buttons: {
68                            'Close': function(){
69                                $(this).dialog('close')
70                            }
71                        }
72                    });
73                },
74                three: function(){
75                    $('#demo3').dialog('destroy').remove();
76                    $('<div id="demo3">').load('pag1.html?country= united kingdom').dialog({
77                        title: 'I\'m the demo 3!',
78                        width: 450,
79                        height: 220
80                    });
81                }
82            }
83        </script>
84    </head>
85    <body>
86        <p class="explain">See the details of changes <a href="http://www.profissionaisti.com.br/2008/11/jquery-dialog-melhorias-interessantes/">here</a>.
87                To download the files, <a href="http://www.profissionaisti.com.br/wp-content/plugins/download-monitor/download.php?id=2">click here</a>.</p>
88        <div class="demo">
89                <h2>Default dialog without maximize button and modal with overlay</h2>
90        <span>
91            <a href="#" onclick="Demo.one();">Demo 1</a>
92        </span>
93    <pre><code class="javascript">
94        $('&lt;div id="demo1"&gt;').load('pag1.html').dialog({
95        maximize: false, // not maximizable
96                modal:true,
97                overlay:{background:'#000000', opacity:0.4}
98    });
99        </code></pre>
100        </div>
101        <div class="demo">
102        <h2>Diaglo with Title, without close button (Not close with ESC too) and not maximizable.</h2>
103        <span>
104            <a href="#" onclick="Demo.two();">Demo 2</a>
105        </span>
106        <pre><code class="javascript">
107        $('&lt;div id="demo2"&gt;').load('pag1.html').dialog({
108        title: 'I\'m the demo 2!', closable: false, width: 350, height: 200, maximize: false,
109        buttons: {
110                'Close': function(){
111                        $(this).dialog('close')
112                }
113        }
114    });
115        </code></pre>
116        </div>
117        <div class="demo">
118        <h2>Close, maximize and restore original dialog (DoubleClick title bar maximize and restore the dialog).</h2>
119        <span>
120            <a href="#" onclick="Demo.three();">Demo 3</a>
121        </span>
122        <pre><code class="javascript">
123        $('#demo3').dialog('destroy').remove();
124        $('&lt;div id="demo3"&gt;').load('pag1.html').dialog({
125                title: 'I\'m the demo 3!', width: 450, height: 220
126    });
127        </code></pre>
128        </div>
129    </body>
130</html>