2

I'm trying to use jquery UI. I download everything and follow the instruction, I add such code in my html:

<link type="text/css" href="/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
     $(function() {
         $( "#id_myDate" ).datepicker({
             inline: true
         });
     });
</script>
.....
<div>Date: <input type="text" id="id_myDate" name="deadLine"></div>

When I load this page, the Datepicker looks so weired.

enter image description here

What's wrong? When I download jquery UI, I open the index.html and everything works fine(including datepicker), but when I put it into my app, it looks bad.

BTW. My browser is Chrome(I test this in firefox too, same problem), and I'm working on a google appengine app in python.

Thank you.

------------------------EDIT---------------------------

I'm sorry. Because this is a google appengine, so I should configure my static files, such as js and css. I forget to configure my css files in app.yaml. Now, I add this in yaml file:

- url: /js
static_dir: js

- url: /css
static_dir: css

js and css are the name of dir where these files located. Thank you very much.

hakunami
  • 2,351
  • 4
  • 31
  • 50
  • 2
    Is your browser loading the css file correctly? Press F12 in Chrome, click the network tab then reload the page to see if there were any errors loading files. – Kyle Trauberman May 12 '12 at 04:46
  • 1
    have you tried checking the error on chrome, using the console. just press **F12**, likely you are missing something – Ricardo Garza V. May 12 '12 at 04:47
  • @KyleTrauberman You are right. The css isn't loaded, because in google appengine, I need to configure my css dir in a index file. I miss this step. Thank you. – hakunami May 12 '12 at 04:55

2 Answers2

6
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

add this code to the head of your html

WAYSER
  • 107
  • 1
  • 10
1

It sounds like the css file isn't loading correctly. Check to make sure its loaded properly.

In chrome, you can press F12 to open the developer tools. Click the network tab, then refresh your page. You will see a list of every request sent to the webserver, including any errors. Make sure your css file is loaded correctly.

Kyle Trauberman
  • 25,414
  • 13
  • 85
  • 121
  • F12 is really handy. Problem is already solved. I edited this question with the solution.Thank you:) – hakunami May 12 '12 at 05:09