CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
AggieDev
AggieDev

Reputation: 5045

jQuery dialog won't open when loading page

I am new to javascript and am trying to make a simple dialog open when the page opens, but it simply just displays the

text of the dialog as if its a normal paragraph, no dialog. Here's my index.html:

<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
  <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
  <script type='text/javascript' src='js/jquery.js'></script>
  <title>Welcome to Jetty-9</title>
  <style type="text/css" title="maincss">
    @import url(maincss.css);
  </style>
  <script type="text/javascript">
    $(function() {
      $("#dialog").dialog();
    });
  </script>
</head>
<body>

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

</body>
</html>

And my maincss.css simply puts a background image in for the body nothing else, and the js/jquery.js file is the latest version of jquery, and I ensured it is linked right by loading the page, viewing page source, then opening the js file by clicking it

Upvotes: 0

Views: 367

Answers (5)

Praveen
Praveen

Reputation: 56501

Your code looks good and it is working. My guess is you're not properly importing the jQuery or jQuery UI.

Updated with reference to MaVRoSCy comments and take a look at this fiddle, working good.

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68400

I'll assume you're trying to use jquery-ui dialog, if this is the case, you need to include jquery-ui files

These are latest versions from CDN 

http://code.jquery.com/ui/1.10.3/jquery-ui.js
http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

You could pick a different theme if required

Upvotes: 0

MaVRoSCy
MaVRoSCy

Reputation: 17839

you have to import the JQuery UI's api's AFTER the JQuery main file

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

This way is should work:

<html xmlns=\ "http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
  <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
  <script type='text/javascript' src='js/jquery.js'></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <title>Welcome to Jetty-9</title>
  <style type="text/css" title="maincss">
    @import url(maincss.css);
  </style>
  <script type="text/javascript">
    $(function() {
      $("#dialog").dialog();
    });
  </script>
</head>
<body>

  <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

</body>
</html>

Upvotes: 0

user405398
user405398

Reputation:

You are missing jQuery UI. Include the below code in head of your page.

<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css' rel='stylesheet' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>

Visit here for more CDN links of various versions of jquery ui & its themes.

Upvotes: 0

Tim Wasson
Tim Wasson

Reputation: 3656

You need to include jQuery UI to take advantage of the dialog.

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Upvotes: 1

Related Questions