Solved

jquery datepicker

Posted on 2012-03-28
9
374 Views
Last Modified: 2012-03-29
I am facing a very weird situation.

I downloaded the source code of datepicker from http://jqueryui.com/demos/datepicker/default.html

i saved default.html on c:

when i run c:\default.html it works perfectly fine.

i copied the same file to my server and ran it from server http://10.0.1.2/default.html

it does not work????

I have been trying to figure out this since more than a week now. Please advice.
0
Comment
Question by:genius_geek
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 37780264
It looks like the server ip is not actually available on the Internet?
0
 

Author Comment

by:genius_geek
ID: 37780272
it is not. it is a local ip on the development machine. but that is not an issue...
i mentioned the ip to give a reference. only i can access the ip. i have many other pages on the ip, php, other jquery dynamic forms... they all work fine with the ip.

The point is datepicker is not working.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 37780295
OK, and forgive me if I say the obvious, but you have double checked the links on the page, the script url's, etc. and they all check out as being connected and the files are being accessed correctly?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:genius_geek
ID: 37780302
i think its the problem with script urls and link urls... since i am a beginner at jquery, i dont hv basic foundation knowledge of what scripts are compulsory while using jquery ui

this is all i have

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>

Open in new window


I need someone to help me identify, if something is missing? or is anything not required?
0
 
LVL 17

Assisted Solution

by:OmniUnlimited
OmniUnlimited earned 100 total points
ID: 37780314
Wow, yeah, you have a lot of unnecessary stuff there.  You probably are running into conflicts.  I would recommend that you download a custom theme from http://jqueryui.com/themeroller/.  Select the "Gallery" tab from the sidebar on the left, select the look you want, and click on "Download" to move to the download page, then click on the "Download" button there to download the custom theme zip file.

Decompress it, and the only real files you need will be the two javascript files from the js folder and the files from the CSS folder.  Make sure that the paths are right to these files on your server, then everything should work.  I'd take out the rest of those links and scripts.
0
 
LVL 17

Assisted Solution

by:sonawanekiran
sonawanekiran earned 150 total points
ID: 37780320
I think you just need
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>

Open in new window


Again try with class instead of id

like

<html>
<head>

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 
  $(function() {
    $( ".myDatePicker" ).datepicker(); // [b]see myDatePicker [/b]
  });

});

</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" class="myDatePicker"></p>
</body>
</html>

Open in new window

0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 37780336
The only problem I see with sonawanekiran's solution is that it relies on a third party's site, in this case ajax.googleapis.com.  If that's what you want to do, you can do that as well, but my solution provides greater flexibility, reliability, speed, control and customization.
0
 
LVL 4

Accepted Solution

by:
Nguyen Doan Tien earned 250 total points
ID: 37780382
There are some difference url resources (stylesheet, javascript) in default.html file
In your case, here is the best soultion to run default.html:
1) Download all resource on your local disk
2) re-config src url in default.html file
=> I have built and tested datetime picker, please see the attachment file and copy to your server and run it again.
datetimepicker-demo.zip
0
 

Author Closing Comment

by:genius_geek
ID: 37785187
thanks nguyen. it was a perfect demo & solution.
thanks sonawanekiran and omniunlimited. cheers.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question