Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Followers 0
Christopher Bergin

Chapter 13 Jquery Widget

By Christopher Bergin, in Modern Javascript: Develop and Design

Recommended Posts

Christopher Bergin    1

Christopher Bergin
Posted

Am I approaching this correctly? I'm trying to produce a datepicker widget but it's not working. Here is the code:

 

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

 

</head>

<body>

<h1>This is a JQuery test of it's plug-ins</h1>

<a href='' id= 'dateInput'><p id= 'pickOne'>Please select a date</p></a>

 

<script src= 'utilities/jquery-1.8.3.js'></script>

<script src= 'utilities/jquery-ui-1.9.2.custom.min.js'></script>

<script src= 'utilities/jquery.ui.datepicker.js'></script>

<script type= 'text/javascript'>$('#dateInput').onclick(function(){$('#pickOne').datepicker();})</script>

</body>

</html>

Share this post

Link to post
Share on other sites

benjamin.morgan    6

benjamin.morgan
Posted

jQuery (don't forget the document.ready function.

<script type= 'text/javascript'>
$(document).ready(function() {
$('#datepicker').datepicker();
});
</script>

 

HTML

Date: <input type="text" id="datepicker" value="Please select a date!">

Share this post

Link to post
Share on other sites

benjamin.morgan    6

benjamin.morgan
Posted

I like to be safe than sorry, there has been plenty of times when I forgot that little function and couldn't get the script to work.. :( Even when I tested it it wouldn't work without the ready function.

 

@Christoper, don't forget you can shorten the ready function to this if you like.

 

$(function() {

});

 

 

Basically the point of the post was to have an input element not a paragraph element.

Share this post

Link to post
Share on other sites

HartleySan    826

HartleySan
Posted

I rarely use jQuery, so I'm not sure why your scripts sometimes don't work without the ready method, but no script should ever be dependent on the ready method.

The only thing the ready method really gives you is the ability to set up event handlers slightly sooner than you'd be able to with the standard onload event handler. If anything, using the ready method could cause issues that otherwise wouldn't be present.

Share this post

Link to post
Share on other sites

Christopher Bergin    1

Christopher Bergin
Posted

well, I was able to go to the site and copy the code. The syntax was pretty much correct, the problem was the input type I was using. After some testing using different input methods and inline JS events, it seems the widget only responds to input type of text.

Share this post

Link to post
Share on other sites

HartleySan    826

HartleySan
Posted

Christopher, I suppose it makes sense that the date picker can only be attached to a text input. With that said, I imagine that the date picker library could be easily edited to allow you to attach the onclick event handler to other kinds of elements.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...