views:

30

answers:

1

I've been trying to figure out how to get a jquery dialog box to work. For the life of me, I can't get it to work. Here is some html with in-line javascript I've written:

<html>  
<head>  
    <script type="text/javascript" src="jquery.js"></script>  
    <script type="text/javascript">  
        function showDialog() {  
            $('#dialogBox').dialog();  
        }  
    </script>  
</head>  
<body>  

<input type="button" value="Click me" onclick="showDialog();" />

<div id="dialogBox">
    <p>This is the text of my dialog box.</p>
</div>

</body>
</html>

When I click the button in Internet Explorer, it says Object doesn't support this property of method. What am I doing wrong?

+3  A: 

As far as I know, the dialog() function is part of jQuery UI, and it doesn't look like your code references the UI library. Try adding something like

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>

in the <head> below where you reference the jQuery library. This will pull in the Google-hosted version of the source.

I would imagine that the Google-hosted version includes lots of things you don't need, so you might be able to speed up loading times by downloading your own copy and only selecting the components that you need.

mlms13
Accepted: That's correct, I didn't know that jquery and jquery UI were two different script libraries. Thanks!
Rice Flour Cookies