CODEWITHSUNDEEP
jqueryjquery-ui
jason m
jason m

Reputation: 6835

jQuery dialog text issue

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?

Upvotes: 1

Views: 1331

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70149

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" />

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

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" );
                }
            }
        });
    });​

Upvotes: 0

Related Questions