Jul
21

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.

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

  • codie

    do u have all these facebook like features tutorial in codeigniter ? If have then mail me….

    January 24 2012
    CommentsLike
    • ZeeShaN

      thank you Pavan :)

      September 21 2011
      CommentsLike
      • Pavan Lal

        nice bro, keep it up.

        September 21 2011
        CommentsLike

        • 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!

          April 13 2011
          CommentsLike

          • @@ZeeShaN, I actually found out what I was doing wrong and it is working, but the delete button does not appear.

            October 21 2010
            CommentsLike

            • @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?

              October 20 2010
              CommentsLike
              • Shekar

                Hi, thank you so much.

                July 30 2010
                CommentsLike

                • [...] Facebook Style Event Creator With jQuery and Ajax. Fresh Tutorial [...]

                  July 24 2010
                  CommentsLike
                  • ZeeShaN

                    Eduardo, you welcome dude. Your feedback makes me to believe in my efforts for you all valuable members.
                    Thanks a lot ! be in touch

                    July 22 2010
                    CommentsLike
                    • Eduardo

                      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

                      July 22 2010
                      CommentsLike








                      Enter your Email:

                      Click Here for Popular

                      Who I Am

                      Zeeshan Rasool

                      Software Engineer - PHP
                      Lahore - Pakistan

                      zeeshan(@)99points.info
                      Skype: zeeshan-rasool
                      gTalk: zishan.rasool85

                      Categories

                      Tags

                      Comments