jQuery dialog text issue

Question

I have the following jQuery dialog exists on my page:

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    These items will be permanently deleted and cannot be recovered. Are you sure?
    </p>

</div>

In the jQuery UI demo page the text does not appear, yet on my site the text is shown.

I have changed nothing. Anyone else experience this?

jQuery Link

For example I see this text: These items will be permanently deleted and cannot be recovered. Are you sure?

try after add this <link rel="stylesheet" type="text/css" href="ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/…"> — NullPoiиteя
– NullPoiиteя, Commented Jul 15, 2012 at 4:14

Fabrício Matté · Accepted Answer · 2012-07-15 04:35:04Z

1

The div is hidden when you call .dialog. Call it passing the autoOpen: false option inside the DOM ready event and call .dialog('open') when you want to display it.

$("#dialog-confirm").dialog({ 
    autoOpen: false,
    modal: true,
    //your buttons and other defined options
});

Fiddle

Of course, make sure you've included the jQuery lib, jQuery UI and CSS files correctly:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />

edited Jul 15, 2012 at 4:35

answered Jul 15, 2012 at 4:21

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tats_innit · Accepted Answer · 2012-07-15 04:12:59Z

0

Working demo http://jsfiddle.net/Qd5Xe/3/

Pleas note you are missing the script source I reckon for Jq-UI and Css please see here

Hope it help the cause

script

<link rel="stylesheet" href="http://jqueryui.com/demos//css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js" type="text/javascript"></script>

Code

 $(function() {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });

answered Jul 15, 2012 at 4:12

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

3 Comments

jason m Over a year ago

I have the css referenced but maybe i am missing something. http://mypage.com/manage/jquery/css/ui-lightness/jquery-ui-1.8.21.custom.css i will try the one's you listed as well

jason m Over a year ago

also, let me specify that this works properly. also, once the dialog is opened once, the text at the bottom disappears. so it appears as if it is not being initialized properly?

jason m Over a year ago

Is it possible that my issue comes from the fact that I want the dialog box to be initialized as hidden?

Collectives™ on Stack Overflow

jQuery dialog text issue

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related