Facebook Style Event Creator With jQuery and Ajax.

Another Facebook style tutorial for you with jquery and Ajax. Facebook event creator is used for creating events on facebook. So after adding some awesome tutorials on facebook I have now created facebook style event creator for you. This is awesome piece of script. Hope you will like it
Database
CREATE TABLE IF NOT EXISTS `facebook_event` ( `id` int(11) NOT NULL AUTO_INCREMENT, `EventInput` varchar(255) NOT NULL, `datepicker` int(11) NOT NULL, `where_text` varchar(255) NOT NULL, `WhoInvited` varchar(255) NOT NULL, `users_ip` varchar(200) NOT NULL, `date_created` int(11) NOT NULL, PRIMARY KEY (`id`) )
jQuery Code
<script type="text/javascript"> // <![CDATA[ $(document).ready(function(){ // click to submit an event $('#CreateEvent').click(function(){ var a = $("#EventInput").val(); if(a != "What are you planning?") { $.post("event.php?val=1&"+$("#EventForm").serialize(), { }, function(response){ $('#ShowEvents').prepend($(response).fadeIn('slow')); clearForm(); }); } else { alert("Enter event name."); $("#EventInput").focus(); } }); // delete event $('a.delete').livequery("click", function(e){ if(confirm('Are you sure you want to delete?')==false) return false; e.preventDefault(); var parent = $(this).parent(); var id = $(this).attr('id').replace('record-',''); $.ajax({ type: 'get', url: 'delete.php?id='+ id, data: '', beforeSend: function(){ }, success: function(){ parent.fadeOut(200,function(){ parent.remove(); }); } }); }); // show form when input get focus $('#EventInput').focus(function(){ $('#EventBox').fadeIn(); $('a.cancel').fadeIn(); }); // hide for when click on cancel $('a.cancel').click(function(){ $('#EventBox').fadeOut(); $('a.cancel').hide(); }); // watermark input fields jQuery(function($){ $("#EventInput").Watermark("What are you planning?"); $("#Where").Watermark("Where?"); $("#WhoInvited").Watermark("Who's Invited?"); }); jQuery(function($){ $("#EventInput").Watermark("watermark","#369"); $("#Where").Watermark("watermark","#369"); $("#WhoInvited").Watermark("watermark","#369"); }); function UseData(){ $.Watermark.HideAll(); $.Watermark.ShowAll(); } }); // show jquery calendar $(function() { $("#datepicker").datepicker(); }); function clearForm() { $('#EventInput').val("What are you planning?"); $('#datepicker').val("Today"); $('#WhoInvited').val("Who's Invited?"); $('#Where').val("Where?"); $('#EventBox').hide(); $('a.cancel').hide(); } // ]]> </script>
event.php
<?php include_once('dbcon.php'); function checkValues($value) { $value = trim($value); if (get_magic_quotes_gpc()) { $value = stripslashes($value); } $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES))); $value = strip_tags($value); $value = mysql_real_escape_string($value); $value = htmlspecialchars($value); return $value; } $limit = ""; $users_ip = $_SERVER['REMOTE_ADDR']; if(@$_REQUEST['val']) { $EventInput = checkValues($_REQUEST['EventInput']); $datepicker = checkValues($_REQUEST['datepicker']); $datepicker = $datepicker.' '.$_REQUEST['start_time_min']; $datepicker = strtotime($datepicker); $where_text = checkValues($_REQUEST['Where']); $WhoInvited = checkValues($_REQUEST['WhoInvited']); mysql_query("INSERT INTO facebook_event (EventInput,datepicker,where_text,WhoInvited,users_ip,date_created) VALUES('".$EventInput."','".$datepicker."','".$where_text."','".$WhoInvited."','".$users_ip."','".strtotime(date("Y-m-d H:i:s"))."')"); $limit = "limit 1"; } $result = mysql_query("SELECT * FROM facebook_event where users_ip = '".$users_ip."' order by id desc ".$limit); while ($row = mysql_fetch_array($result)) {?> <div class="show_event"> <img src="ico.png" style="float:left;" alt="" /> <label style="float:left" class="text"> <b><?php echo $row['EventInput'];?></b> <br /> <?php echo $row['where_text'];?> <br /> <?php echo date("F d, Y h:ia",$row['datepicker']);?> </label> <a href="#" class="delete" id="record-<?php echo $row['id']?>">x</a> <br clear="all" /> </div> <?php }?>
delete.php
<?php include_once('dbcon.php'); mysql_query("delete from facebook_event where id ='".mysql_real_escape_string($_REQUEST['id'])."'"); ?>
Download all files and use this awesome tutorial.
Who I Am

Zeeshan Rasool
Software Engineer - PHP
Lahore - Pakistan
zeeshan(@)99points.info
Skype: zeeshan-rasool
gTalk: zishan.rasool85
Categories
- AJAX (37)
- Codeigniter (16)
- CSS (16)
- Facebook (11)
- Joomla (1)
- JQuery (53)
- Miscellaneous (4)
- Mootools (1)
- MySQL (6)
- PHP (60)
- SEO (2)
- Technology (6)
- Tutorials (15)
- Twitter (2)
- Web Design (23)
- Web Development (57)
- WordPress (2)
Tags
99points
adobe
AJAX
ajax pagination
ajax rating
ajax tutorial
ajax voting system
captcha
Codeigniter
codeigniter 2.0
codeigniter recaptcha
CSS
css tutorials
dreamweaver cs5
Facebook
facebox
farmville
ffmpeg
flv
google api
hacking
Joomla
JQuery
JQuery Gallery
JQuery menus
Jquery tutorial
mafia war
Mootools
MySQL
pagination
Payment
PHP
php curl
recaptcha
RSS Feed
SEO
simplepie
socail networking
ssl
Tutorials
Twitter
wall script
Web
XSS
youtube
Comments
- ZeeShaN on Facebook Wall Script Clone with JQuery and PHP: Personal Project BETA Version 2.0
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on JQuery Based Flipped Image Gallery with Bounce Effects
- 20 + Fresh jQuery Image Gallery/Slider Plugins and Tutorials Worth a Look | free on Fresh JQuery Image Gallery with Captions and Auto Play/Pause Rotation
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on jQuery Tutorial: Create jQuery and CSS based Awesome navigation.
- 25 Cool and Helpful jQuery Plugins/Tutorials For Your Next Project | free on Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL
ZeeShaN






do u have all these facebook like features tutorial in codeigniter ? If have then mail me….
thank you Pavan
nice bro, keep it up.
I’m having a few troubles, If I dont set any date, instead of posting today’s date, it posts “0″ on the db, also if I change the display mode on the .js from mm-dd-yy to dd-mm-yy, it doesn’t post any date either.
please help!
@@ZeeShaN, I actually found out what I was doing wrong and it is working, but the delete button does not appear.
@ZeeShaN, I am using your reloaded facebook wall with this as well and the “Create Event” link doesn’t work. But I don’t think it has anything to do with the reloaded facebook wall, because when that is disabled, the “Create Event” link still doesn’t work. Do you have any suggestions?
Hi, thank you so much.
[...] Facebook Style Event Creator With jQuery and Ajax. Fresh Tutorial [...]
Eduardo, you welcome dude. Your feedback makes me to believe in my efforts for you all valuable members.
Thanks a lot ! be in touch
Hello thank you very much for the tutorial (the example is not) with your tutorials I am learning a lot more jquery and php.
Greetings from Spain