Facebook Style Event Creator With jQuery and Ajax.

Author: Zeeshan Rasool | Last updated on July 27th, 2010

AJAX, Facebook, JQuery, PHP, Web Development

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 ;)

[ad#ad-3]

[ad#co-2]

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`)
)

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>

// <![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
}?>

<?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))

{?>

<br />

<?php echo $row['where_text'];?>

<br />

<?php echo date("F d, Y h:ia",$row['datepicker']);?>

</label>

</div>

<?php

}?>

delete.php

<?php
	include_once('dbcon.php');
	mysql_query("delete from facebook_event where id ='".mysql_real_escape_string($_REQUEST['id'])."'");
?>

<?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.
[ad#ad-4]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com