• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Ajax - Calender / Form Date

Question

Trix.Neo    1

Hi Everyone,

I have written a quick "year planner" style calender script to set out the dates for 2007, with passed dates greyed out, weekends/weekdays highlighted and each date has a number 1-31 with a link containing the timestamp for that date.

What I would like to do is allow a user to drag a day and drop it into a form field for a start and end date and for the script to take the stamp and place the stamp in a hidden field but display it in the field as yyyy-mm-dd.

I think this is possible but I've done no ajax short of populating a search box well over a year ago. I wondered if anyone could help me/point me in the write direction? I would be using PHP to do this, just incase someone asked :)

Neo

Share this post


Link to post
Share on other sites

16 answers to this question

Recommended Posts

  • 0
gigapixels    99

Just to understand, why can't they just click on the date to populate the field?

Share this post


Link to post
Share on other sites
  • 0
raskren    0

You don't need to involve AJAX techniques for the drag and drop. That's all JavaScript. Unless when the user drops the date into the field it is sent to the server immediately.

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1
Just to understand, why can't they just click on the date to populate the field?

Well there are 2 fields one start date and one end. I couldn't see a way (short of making the window pop-up and passing a variable so it knew which field to populate) that would allow me to use the same calender to poulate both fields seperately?

Share this post


Link to post
Share on other sites
  • 0
gigapixels    99

Ah, okay I get it now. I didn't realize that you wanted to use the same calendar to populate two different fields.

Well this would probably be the best place to start: http://wiki.script.aculo.us/scriptaculous/show/DragAndDrop

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1

ok cheers I'll take a look :)

Share this post


Link to post
Share on other sites
  • 0
gigapixels    99

Let us know how it goes. I haven't gotten the chance to use Scriptaculous yet, but I've heard nothing but good things.

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1

do you happen to have any basic scripts that I could borrow that would work on a local installation? I've tried running the tests and they work but I can't get any actual functionality to work?

Share this post


Link to post
Share on other sites
  • 0
Wilhelmus    12

Some sort of example.

See source.

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1

bloody genius :D

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1

Ok head -> brickwall :blink:

I've got the example you gave working locally and on my server.

I have modded this script but nothing will drag. :pinch:

I've idetified that the scrip doesn't need the Google link so im not sure if I havn't done the modifications correctly, any help :D

Share this post


Link to post
Share on other sites
  • 0
gigapixels    99

The Error Inspector in Firefox shows these:

Error: element has no properties

Source File: http://www.howz-trix.co.uk/ajax/lib/prototype.js

Line: 1367

Error: uncaught exception: script.aculo.us requires the Prototype JavaScript framework >= 1.5.0

Error: Droppables is not defined

Source File: http://www.howz-trix.co.uk/ajax/calender.php

Line: 29

Looks like something's wrong with the Prototype script. I'd help more but I've got to get some sleep. Good luck.

Share this post


Link to post
Share on other sites
  • 0
Wilhelmus    12
Ok head -> brickwall :blink:

I've got the example you gave working locally and on my server.

I have modded this script but nothing will drag. :pinch:

I've idetified that the scrip doesn't need the Google link so im not sure if I havn't done the modifications correctly, any help :D

Yeah, you do not need the script from Google link. I just used it to quickly create calendar template.

It seems to drag and drop now?

At least in Firefox and Internet Explorer 7.

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1

you be me to it.

turns out i missed ut one for the javascript files doh :pinch:

but yeah works now, which is great, thanx for your help :)

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1

k another task....

Lets say the year at the top here: Script was a select box and had an onchange event which would reload the calender to match that year but to do that I would want ajax to take the year, pass it to a script and for the external page to be loaded into a div, lets say its id would be calender.

I know its possible not sure where to look.

Neo

Share this post


Link to post
Share on other sites
  • 0
Wilhelmus    12

Download Sajax.

From the archive, copy Sajax.php (note capital S) to your server, to same folder as calendar.php.

Modify Sajax.php, find line header ("Pragma: no-cache"); and add after it:

header("Content-type: charset=iso-8859-1");

(or if you want to use UTF-8: change it to utf-8 and then you need to change all escape() functions to encodeURI() or encodeURIComponent(), have not tested this...)

Source. Look the comments how it is done.

Demo.

Share this post


Link to post
Share on other sites
  • 0
Trix.Neo    1

ok cheers i'll give that a go :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.