Web app calendar..

techguy · 01-04-2010 10:07pm #1

I'm currently developing a web app with PHP and CodeIgniter w/ MySQL.

There is a class booking element to it that stores around 5 time slots for every weekday. It's not really practical to be presenting them in a dropdown list when making a new booking.

I was thinking of using a calendar so that when a day is clicked it will load those available timeslots into the dropdown box.

I know that what I really need is ajax but I just don't have the time to get into that now as my Javascript is crap

I'm thinking now that I could just display a calendar and each day is a link to the current page but providing the date as a POST or GET paramater. This would be used to grab the timeslots and place them in the dropdown box.

I can see that this might be a bit slower but the app will be running on a LAN so maybe it won't be that bad.

Any ideas on this would be greatly apppreciated.

Oh and is there any kind of AJAX frameworks that would allow me to implement the AJAX solution without exposing me to too much JS?

Thanks..

TheWaterboy · 02-04-2010 8:12am

Use JQuery - Very simle and the framework is there for you.

Here is the JQuery Datepicker:

http://docs.jquery.com/UI/Datepicker

Loads of examples and Tutorials out there on how to build a dynamic one. Here is one such example

http://www.stefanoverna.com/wp-content/tutorials/ical_like_calendar/

Using Ajax and JQuery will make it much more user friendly.

techguy · 02-04-2010 10:31am

Would there be much involved in getting group of links and clicking them will make an ajax request to poulate a dropdown box.

Thats essentially all I really want. Would you recommend any ajax frameworks?

techguy · 05-04-2010 5:22pm

I've decided that I can go with the jQuery datepicker and some simple ajax.

Here's what i've got so far:

<html>
<head>
 <title>Ajax with jQuery Example</title>
 <script type="text/JavaScript" src="jquery.js"></script>
 <script type="text/JavaScript">
 $(document).ready(function(){
   $("#generate").click(function(){
     $("#quote p").load("server.php");
   });
 });
 </script>
 
   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

   <script>
  $(document).ready(function(){
    $("#datepicker").datepicker();
  });
  </script>

 
 
 
<style type="text/css">
   #wrapper {
     width: 240px;
     height: 80px;
     margin: auto;
     padding: 10px;
     margin-top: 10px;
     border: 1px solid black;
     text-align: center;
   }
 </style>
</head>
<body>
 <div id="wrapper">
   <div id="quote"><p> </p></div>
   <input type="submit" id="generate" value="Generate!">
 </div>
 <div type="text" id="datepicker"></div>
</body>
</html>

Basically, it's a simple button that makes an ajax call for a randomly generated string. The second part is the jQuery date picker. I would like to be able to set up the date picker so that when I click a day it will make an ajax call and print the result into a dropdown box.

Any help on this would be greatly appreciated. I've only been at this 5 minutes and I can already feel my blood boiling.. I'm just not cut out to work with JS

Creamy Goodness · 05-04-2010 5:29pm

difficult to see what's going on tbh.

if i suggest one thing to you it is to download firebug for firefox, it's a great debugger for javascript along with a lot more.

from looking quickly at your code it seems you're loading jQuery twice, whilst is may not be the source of your problem it could be if this:

<script type="text/JavaScript" src="jquery.js"></script>

doesn't load, or isn't the proper jquery javascript file because following after this you have jQuery code. so if it doesn't load jQuery won't work you then include jquery from google's servers after your JQuery code.

anyways install firebug, run it whilst you're trying to get this to work in your browser and come back with the error messages (if any).

techguy · 05-04-2010 5:33pm

In that html is the jQuery daetpicker and another piece of ajax functionality.

The ajax part prints a random piece of text on the page when the button is clicked.

The there's just the datepicker which is a fancy calendar.

I'm just wondering how I can tie the two together. i.e. generate a random piece of text when I click on a day of the month in the datepicker?

All this is copied directly from the web, I don't have a clue how to do anything to any of it.

Creamy Goodness · 05-04-2010 6:00pm

ahh ok so it works now when you click the button you get random text in a certain div?

$("#generate").click(function(){
     $("#quote p").load("server.php");
   });
 });

this is the core of your code. when you click the button with the id "generate" the jquery goes and loads up "server.php" which will do the random string generation and pass it back to the correct div.

what you need to do is instead of having .click() function being called on the button have it called on the datepicker element.

techguy · 05-04-2010 6:16pm

Ok, I'm going to be blunt and just as what the code should be.

This jQuery stuff really is double dutch to me..

Here's some code that puts the selected date into a text box called 'date'.

 		$(document).ready(function(){
    			$("div#calendar").datepicker({ altField: 'input#date', altFormat: 'dd-mm-yy' });
  		});

Here's code that says when the generate button is clicked put the output of server.php into a 'p' tag with the id quote.

 $(document).ready(function(){
   $("#generate").click(function(){
     $("#quote p").load("server.php");
   });
 });

How can I tie these together so that I can call server.php with the selected date as a parameter when a date is selected in the jQuery datepicker.

Apologies for the bluntness here but it's 3 hours later and i'm still where I was around 2.5 hours ago..:mad:

techguy · 05-04-2010 6:26pm

Ok, so I have the following..

 <script type="text/JavaScript">
 $(document).ready(function(){
   $("div#calendar").click(function(){
     $("#quote p").load("server.php?date=DATE");
   });
 });
 </script>

It will print out 'DATE' on the page. How do I change this to the current date. I.e. how do I pull the selected date from the calendar?

I know there is a function .datepicker( "getDate" ) but I just don't know how to use it..

mewso · 07-04-2010 7:49am

The better docs on the datepicker are here I think - http://jqueryui.com/demos/datepicker/

Maybe it's the same but it lists the events there. Where you setup the datepicker you can assign the event for selection:-

$("div#calendar").datepicker({ 
   altField: 'input#date', 
   altFormat: 'dd-mm-yy',
   [B]onSelect: function(dateText, inst) {
      $("#quote p").load("server.php?date=" + dateText);
   }[/B]
});

You'll need to check the format of that dateText parameter to see if it's in the format you want. I assume it will be in the format you have specified but just in case.

techguy · 08-04-2010 9:41pm

Yeah I saw that page but unfortunately I can't understand the jQuery syntax.

I've got the calendar to work for me so i'm happy. The dateText format isn't the way I want it but I can manipulate it in PHP.

Thanks for your help.

Web app calendar..

Comments