CODEWITHSUNDEEP
jquery
sly_Chandan
sly_Chandan

Reputation: 3515

jQuery dialog content not displaying

$(function () {
    $('#records').dialog({
        autoOpen: true,
        modal: false,
        buttons: {
            "Ok": function () {
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

<div id="records" title="Results">
    Content to Display
</div>

The dialog box appears without any content. Can anyone tell me why this is?

Upvotes: 1

Views: 3621

Answers (3)

Andiih
Andiih

Reputation: 12413

This works for me - see this http://jsfiddle.net/rqf3t/ but this has no css. I imagine the problem must be the css you are using - you don't have a <p> tag around Content to Display (which the samples on the jQuery site do) so I wonder if the CSS is hiding the content. Try

1) Adding a <p> tag around your content, as in the example

2) Using firebug or similar to see if "Content to Display" is actually there, but hidden by CSS.

Upvotes: 2

salawu azeez
salawu azeez

Reputation: 1

If you have modified your jquery-ui.css then this may happen because it happened to me and I just replaced the original jquery-ui.css and it was fine

Upvotes: 0

Daniel Bidulock
Daniel Bidulock

Reputation: 2354

Something is definitely amiss, because your code works fine for me. Here's what I used with all the bits and pieces put together:

<html>
<head>
<link href="jqueryUI/ui-lightness/query-ui-1.8.19.custom.css" rel="stylesheet" type="text/css">
<script src="jquery-1.7.1.js"></script>
<script src="jqueryUI/js/jquery-ui-1.8.19.custom.min.js"></script>

<script type="text/javascript">
$(function () {
    $('#records').dialog({
        autoOpen: true,
        modal: false,
        buttons: {
            "Ok": function () {
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

</script>

</head>
<body>

<div id="records" title="Results">
    Content to Display
</div>

</body>

</html>

Upvotes: 0

Related Questions