1
$(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?

4
  • Works fine for me - perhaps you have multiple divs with the same id ???
    – Manse
    May 4, 2012 at 16:00
  • Your code appears to work fine: jsfiddle.net/hZ4LZ. I would imagine the content is being cleared elsewhere in your code. May 4, 2012 at 16:01
  • 1
    Have you tried this in js fiddle?
    – core1024
    May 4, 2012 at 16:01
  • 1
    You can try inspect your code with firebug or your favorite browser's DOM inspector to see what is actualy going wrong. Without the whole page nobody can answer you.
    – core1024
    May 4, 2012 at 16:10

3 Answers 3

2

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.

1
  • 1
    Yep! My bad. I had a similar tag with visibility hidden May 4, 2012 at 16:12
0

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>
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.