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

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

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

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

{

}

}

delete.php

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

1 2	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.

Posts

Facebook Style Event Creator With jQuery and Ajax.

Database

jQuery Code

event.php

delete.php

1 thought on “Facebook Style Event Creator With jQuery and Ajax.”

Database

jQuery Code

event.php

delete.php

Few More Brilliant Posts !

1 thought on “Facebook Style Event Creator With jQuery and Ajax.”