Ajax

Drawing on google maps

Dummy marker.sql


CREATE TABLE IF NOT EXISTS `markers` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `address` varchar(80) NOT NULL,
  `lat` float(10,6) NOT NULL,
  `lng` float(10,6) NOT NULL,
  `image` text NOT NULL,
  `type` varchar(125) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1  ;



INSERT INTO `markers` ( `name`, `address`, `lat`, `lng`, `image`, `type`) VALUES
( 'Pan Africa Market', '1521 1st Ave, Seattle, WA', 47.608940, -122.340141, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Buddha Thai & Bar', '2222 2nd Ave, Seattle, WA', 47.613590, -122.344391, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'The Melting Pot', '14 Mercer St, Seattle, WA', 47.624561, -122.356445, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Ipanema Grill', '1225 1st Ave, Seattle, WA', 47.606365, -122.337654, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Sake House', '2230 1st Ave, Seattle, WA', 47.612823, -122.345673, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'Crab Pot', '1301 Alaskan Way, Seattle, WA', 47.605961, -122.340363, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Mama''s Mexican Kitchen', '2234 2nd Ave, Seattle, WA', 47.613976, -122.345467, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'Wingdome', '1416 E Olive Way, Seattle, WA', 47.617214, -122.326584, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'Piroshky Piroshky', '1908 Pike pl, Seattle, WA', 47.610126, -122.342834, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant');


phpsqlajax_genxml.php


$username="ab";   //db username
$password="ab";    //db password
$database="ab";    // database name

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("image", $row['image']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

Maps.html


<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_BROWSER_KEY_HERE&libraries=places,drawing,geometry"
            type="text/javascript"></script>
<script type="text/javascript">
var markers = [];
	var markersToRemove = [];
	var ploy;
	var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };
    //function called on body load
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
	  
	  
	  /****controlss *********************************/
	  
	  
	  var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.POLYGON,
            ]
        },
        markerOptions: {
            icon: 'images/beachflag.png'
        },
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        },
		
    });
    drawingManager.setMap(map);
	google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
		 for(var i = 0; i < markersToRemove.length; i++) {
			markersToRemove[i].setMap(null);
		}
		polyOptions  = event.overlay.getPath().getArray();   //get coordinates of polygon
		
		var poly = new google.maps.Polygon({
				paths : polyOptions,
				strokeColor: '#FF0000',
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: '#FF0000',
				fillOpacity: 0.35,
				});  //get polygon using its coordinates
		downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
		document.getElementById("content_list").innerHTML = "";
        for (var i = 0; i < markers.length; i++) {
                        //get our marker points from database
			var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
			console.log(google.maps.geometry.poly.containsLocation(point,poly));
			 if(google.maps.geometry.poly.containsLocation(point,poly)) { // check if marker point is inside polygon drawn
						var m = new google.maps.Marker({
							position: point,
							map: map
						});
						
						/************create list in sidebar again and render new list in sidebar*******/
						 var infoWin = new google.maps.InfoWindow;
						  var name = markers[i].getAttribute("name");
						  var address = markers[i].getAttribute("address");
						  var type = markers[i].getAttribute("type");
						  var image = markers[i].getAttribute("image");
						  var point = new google.maps.LatLng(
							  parseFloat(markers[i].getAttribute("lat")),
							  parseFloat(markers[i].getAttribute("lng")));
						  var html = "<b>" + name + "</b> <br/>" + address;
						  var icon = customIcons[type] || {};
						  bindInfoWindow(m, map, infoWin, html);
						  var listt = createSidebarEntry(m, name, address, image);
						  document.getElementById("content_list").appendChild(listt);
						
						/**************list in sidebar******************/
			}	
        }
      });

				//add clear overlay button on overlaycomplete,not sure if it is working
				var controlDiv = document.getElementById("control-div");
				var controlUI = document.getElementById("control-ui");
				var controlText = document.getElementById("control-text");
				controlUI.click(function() {
					map.setZoom(11);
				 });
				map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
				
	});

  
   
   
	  
	  
	  
	  
	  /**********controls ****************************/
	  
	  
	  
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
		  var image = markers[i].getAttribute("image");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
		  markersToRemove.push(marker);
          bindInfoWindow(marker, map, infoWindow, html);
		  var listt = createSidebarEntry(marker, name, address, image);
		  document.getElementById("content_list").appendChild(listt);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
//create sidebar entry for properties
function createSidebarEntry(marker, name, address, image) {
      var div = document.createElement('div');
	  var html ='<div class="images"><img src ="'+image+'" class="images_property" height="100px" width="100px"/></div>';
      html += '<div class="content"><b class="title">' + name + '</b><p class="address">' + address + '</p></div>';
      div.innerHTML = html;
	  div.className = "list_item";
      div.style.cursor = 'pointer';
	  div.style.float = 'left';
	  div.style.width = '100%';
      div.style.marginBottom = '5px'; 
	  google.maps.event.addDomListener(div, 'click', function() {
        google.maps.event.trigger(marker, 'click');
      });
     return div;
    }
</script>

 <body onload="load()">
  <div class="container">
    <div id="map" style="width: 60%; height: 800px;float:left;"></div>
	<div id="content_list" style="width: 40%; height: 800px;float:left;overflow: auto;"></div>
	</div>
</body>
.list_item {
     cursor: pointer;
    float: left;
    height: 110px;
    margin-bottom: 5px;
    width: 100%;
}
.images {
    float: left;
    height: 100px;
}

.content {
    float: left;
    height: 100px;
	padding:5px;
}
.title{
color :#0074e4;
font-size:15px;
}
.address{
color :#666;
}
.top{
	position: absolute;
    transition: width 0.3s ease 0s;
    z-index: 21;
}

Before drawing map looks like

google_maps_all_list

After drawing map looks like

google_maps

Advertisements

Upload image plus all form data using jquery

Html

<form action="" method="post" enctype="multipart/form-data" id="form_portfolio_save">
				<input type="text" name="title" id="title" placeholder=""/><br/>
				<textarea id="about_project" name="about_project">About project</textarea><br/>
				<input type="file" name="photo" id="port_image" placeholder="Add Files"/><br/>
				<input type="text" name="caption" id="caption" placeholder="Image caption"/><br/>
				<input type="button" id="submit" value="Submit" class="button submit" onclick="save_portfolio();return false;"/>
				<input type="button" class="button cancel" id="submit" value="Cancel" />
			  </form>

JQuery

function save_portfolio(){
		var fd = new FormData();
		var file_data = $('input[name^="photo"]')[0].files; 
		for(var i = 0;i<file_data.length;i++){
			fd.append("file_"+i, file_data[i]);
		}
		var  other_data = $("#form_portfolio_save").serializeArray();
		 $.each(other_data,function(key,input){
			fd.append(input.name,input.value);
		});
	   
		$.ajax({
		url : 'save_portfolio.php',
		type : "post",
		data : fd,
		cache: false,
		contentType: false,
		processData: false,
		success : function(data){
				$("#append_portfolio").append(data);
				
		}
	});
	}

PHP

include("includes/session.php");
include("includes/database.php");
if(!empty($_FILES['file_0'])){
		$filename = time().$_FILES['file_0']['name'];
		$path= "upload/user_portfolio/".$filename;
		move_uploaded_file($_FILES['file_0']['tmp_name'],$path);
	}
$query = "insert into user_portfolio(title,description,images,image_captions,employee_id) values('".$_POST['title']."','".$_POST['about_project']."','".$filename."','".$_POST['caption']."','".$_SESSION['user_details']['id']."')";
mysql_query($query);

Filter on search results

js code

$(document).ready(function() {
    function showValues() {
		
		$("#wrapper").css("opacity","0.4");
		$( "#loading-image" ).show(0);	
		var mainarray = new Array();
		
		var subcategoriesarray = new Array();		
		$('input[name="subcategories"]:checked').each(function(){			
			subcategoriesarray.push($(this).val());		
			
		});
		
		var subcategories_checklist = "&subcategories="+subcategoriesarray;
				
		var job_typearray = new Array();		
		$('input[name="job_type"]:checked').each(function(){			
			job_typearray.push($(this).val());	
			
		});
		
		var job_type_checklist = "&job_type="+job_typearray;
		
		
		var budgetarray = new Array();		
		$('input[name="budget"]:checked').each(function(){			
			budgetarray.push($(this).val());
					
		});
		
		var budget_checklist = "&budget="+budgetarray;
		
		
		var experiencearray = new Array();		
		$('input[name="experience"]:checked').each(function(){			
			experiencearray.push($(this).val());
					
		});
		
		var experience_checklist = "&experience="+experiencearray;
		
		var job_durationarray = new Array();		
		$('input[name="job_duration"]:checked').each(function(){			
			job_durationarray.push($(this).val());
					
		});
		
		var job_duration_checklist = "&job_duration="+job_durationarray;
		var category = $("#category_selectbox").val();
		if(category.length > 0){
		var categoryname = "&category="+category;
		var main_string = subcategories_checklist+job_type_checklist+budget_checklist+experience_checklist+job_duration_checklist+categoryname;
		}
		else {
		var main_string = subcategories_checklist+job_type_checklist+budget_checklist+experience_checklist+job_duration_checklist;
		}
		main_string = main_string.substring(1, main_string.length)
		//alert(main_string);
		
		
		$.ajax({
			type: "POST",
			url: "ajax/filter_jobs.php",
			data: main_string, 
			cache: false,
			success: function(html){
				//alert(html);
				$("#place_content_here").html(html);		
				$("#wrapper").css("opacity","1");
				$( "#loading-image" ).hide(0);
				
				
				
			}
			});
		
		
	}
	
	$("input[type='checkbox']").on( "click", showValues );
    $("select").on( "change", showValues );

PHP filter queries




<?php
//error_reporting(E_all);
include("../includes/database.php");
$subcategory = $_REQUEST['subcategories'];
$workload = $_REQUEST['job_type'];
$budget = $_REQUEST['budget'];
$experience = $_REQUEST['experience'];
$job_duration = $_REQUEST['job_duration'];
$category = $_REQUEST['category'];

$query = "select * from job where";
$where = array();
if(!empty($category)){
$where[] = " category = $category";
}
if(!empty($subcategory)){
$where[] = " subcategory IN($subcategory)";
}
if(!empty($workload)){
$workload = explode(",",$workload);
$workload = "'".implode("','", $workload)."'";
$where[] = " workload IN($workload)";
}
if(!empty($budget)){
$budget = explode(",",$budget);
$budget = "'".implode("','", $budget)."'";
$where[] = " budget IN($budget)";
}
if(!empty($experience)){
$experience = explode(",",$experience);
$experience = "'".implode("','", $experience)."'";
$where[] = " desired_experience IN($experience)";
}
if(!empty($job_duration)){
$job_duration = explode(",",$job_duration);
$job_duration = "'".implode("','", $job_duration)."'";
$where[] = " duration IN($job_duration)";
}
    

$where = implode(" or ",$where);
$query .= $where;
//echo $query;
$jobs = mysql_query($query);
function time_ago($date)

											{

											if(empty($date)) {

											return "No date provided";

											}

											$periods = array("second", "minute", "hour", "day", "week", "month", "year", "decade");

											$lengths = array("60","60","24","7","4.35","12","10");

											$now = time();

											$unix_date = strtotime($date);

											// check validity of date

											if(empty($unix_date)) {

											return "Bad date";

											}

											// is it future date or past date

											if($now > $unix_date) {

											$difference = $now - $unix_date;

											$tense = "ago";

											} else {

											$difference = $unix_date - $now;
											$tense = "from now";}

											for($j = 0; $difference >= $lengths[$j] && $j < count($lengths)-1; $j++) {

											$difference /= $lengths[$j];

											}

											$difference = round($difference);

											if($difference != 1) {

											$periods[$j].= "s";

											}

											return "$difference $periods[$j] {$tense}";

											}
?>
						<div class="search_btm_text">
                    	
						<?php
						   
						   if(mysql_num_rows($jobs) > 0){
	                       while($job = mysql_fetch_array($jobs))
			                { //echo "<pre>";print_r($job);
                              ?>
                        <div class="work_div">
                        	<h4><a href="job_detail.php?number=<?php echo base64_encode($job['id']);?>"><?php echo $job['title'];?></a></h4>
                            <div class="supported_info">
                            	<p><strong class="fixedprice"><?php echo $job['workload'];?>:<?php echo ucfirst($job['desired_experience']);?> level </strong>Budget :<strong><?php echo $job['budget'];?></strong> - Posted <?php echo time_ago($job['date']);?></p>
                               
                            </div><!--supported_info-->
                            <div class="cDescription"><p><?php echo $job['description'];?>....<a href="job_details.php?job=<?php echo $job['id'];?>">more</a></p></div>
                            <div class="supported_info">
                            	<p><strong class="ipaid">Client: </strong><img src="assets/images/star4.png" alt=""><strong>Working Hours:<?php echo $job['duration'];?> </strong> 
								<?php 
										if(!empty($job['qualification'])){
										$quali = mysql_query("select * from skills where id IN(".$job['qualification'].")");
											$array = array(); 
											while($skil = mysql_fetch_array($quali)){
												$array = $skil['skill'];
											}
											echo implode(",",$array);
										}
										
										?>
								</p>
                                
                            </div>
                        </div><!--work_div-->
						
						<?php } } else { ?>
						 <div class="work_div">
						 <h4>No matching results were found !</h4>
						 </div>
						<?php } ?>
                       <?php //echo $pagination;?>
                      
                    </div><!--search_btm_text-->

	
	
	
});	


Html code

<div class="my_categories">
                    	<h5>Choose Category</h5>
                        <select class="categories_list" id="category_selectbox" name="category" onchange="get_subcategory($(this).val());">
						<?php $cats  = mysql_query("select * from categories"); 
						 while($c = mysql_fetch_array($cats)){
						?>
                        	<option value="<?php echo $c['id'];?>"><?php echo $c['name'];?></option>
                           
							<?php } ?>
                        </select>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Sub Categories</h5>
                        <ul class="categories_list" id="subcategory_checkbox12">
						<?php $subcats = mysql_query("select * from subcategories where category_id = 7");
						while($subcat = mysql_fetch_array($subcats)){
						?>
						<li><input type="checkbox" class="subcat_checkbox" name="subcategories" value="<?php echo $subcat['id'];?>"/><?php echo $subcat['name'];?></li>
						<?php } ?>
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Job type</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="job_type" class="job_type" value="Part Time"/>Part Time</li>
                           <li><input type="checkbox" name="job_type" class="job_type" value="Full Time"/>Full Time</li>
						
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Budget</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="budget" class="budgets" value="Less than 100$"/>Less than 100$</li>
                           <li><input type="checkbox" name="budget" class="budgets" value="Between $100 & $500"/>Between $100 & $500</li>
						   <li><input type="checkbox" name="budget" class="budgets" value="Between $500 & $1000"/>Between $500 & $1000</li>
                           <li><input type="checkbox" name="budget" class="budgets" value="Greater then $1000"/>Greater then $1000</li>
						   <li><input type="checkbox" name="budget" class="budgets" value="Not sure.."/>Not sure..</li>
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Experience</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="experience" class="experience" value="entry"/>Entry Level</li>
                           <li><input type="checkbox" name="experience" class="experience" value="intermediate"/>Intermediate Level</li>
						   <li><input type="checkbox" name="experience" class="experience" value="expert"/>Expert Level</li>
						
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Job Duration</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="job_duration" class="job_duration" value="Less then 1 week"/>Less than 1 Week</li>
                           <li><input type="checkbox" name="job_duration" class="job_duration" value="Less then 1 months"/>Less than 1 Month</li>
						   <li><input type="checkbox" name="job_duration" class="job_duration" value="1 to 3 months"/>1 to 3 Months</li>
							<li><input type="checkbox" name="job_duration" class="job_duration" value="3 to 6 months"/>3 to 6 Months</li>
							<li><input type="checkbox" name="job_duration" class="job_duration" value="More then 6 months"/>More than 6 Months</li>
                        </ul>
                    </div><!--my_categories-->
                

Simple shopping cart application using php,mysql,ajax,jquery

1)
Create table named `bb_prodducts` and fields
number_of_bucks,name,price_per_package,price_per_credit,number_of_bucks,id as auto increment
2)
create a file named packages.php and paste the code below

session_start();
 $title = "BabyBoomApps - Content Page";
$page_description = "BabyBoomApps is the place to help fund and gift a baby's future through contests, drawings and online fun!";
include("includes/header.php");
include('includes/checksession.php');
include('includes/connect.php');
$packs = mysql_query("SELECT * FROM `bb_packages`");


<!--breadcrumbs start-->
<div class="breadcrumbs">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-4">
        <h1 id="main_conhdr">MEMBERS</h1>
      </div>
      <div class="col-lg-8 col-sm-8">
        <ol class="breadcrumb pull-right">
          <li><a href="#">Home</a></li>
          <li class="active">BoomBucks
          <li>
        </ol>
      </div>
    </div>
  </div>
</div>
<!--breadcrumbs end-->
<!--container start-->
<div class="container">
  <div class="row">

    <div class="col-lg-9 about">
	<section class="credits-header">
          <div id="buy-credits-default">
            <h3>Buy BoomBucks</h3>
          
            <div class="clear"></div>
         
        </section>
     <div class="boombucks_section">
           
            <section class="tile-container smaller-boombucks_section">
			<?php while($pk = mysql_fetch_array($packs)) { ?>
             <section class="boombucks" >
                <header></header>
                <h3><?php echo $pk['number_of_bucks']; ?><BR><?php echo $pk['name']; ?> </h3>
                <span class="boombuck">$<?php echo ($pk['price_per_package']); ?>&nbsp;USD</span> <span class="boombucks-unit-price">($<?php echo $pk['price_per_credit']; ?>/credit)</span>
          
               
                 <span id="s<?php echo $pk['id']; ?>"> <input type="submit" name="submit" value="Buy Now" onclick="addtocart('<?php echo $pk['id']; ?>','<?php echo $pk['number_of_bucks']; ?>','<?php echo $pk['name']; ?>','<?php echo $pk['price_per_credit']; ?>','<?php echo $pk['price_per_credit']; ?>');" class="btn btn-info"  /></span>
           
              </section>
             <?php } ?>
            
            </section>
            <div class="clear"></div>
          
            
           
          </div>
		  <span class="row button-next btn btn-info" style="float:right;width:20%;" onclick="window.location.href='checkout.php'" id="proced_checkout">Proceed to Checkout</span>
    </div>
	
    <div class="col-lg-">
      <?php include("includes/sidebar-account.php"); ?>
    </div>
	
  </div>
  <div  class="row">
  </div>
</div>
<!--container end-->
<?php include("includes/footer.php"); ?>

<script>
function addtocart(id,numbucks,name,total,ppc)
{
$("#s"+id).html("Added!");
$.ajax({
     url:"add-to-cart.php",
	 type:"post",
	 data:{'crtidpck':id,'numbucks':numbucks,'name':name,'total':total,'ppc':ppc},
	 success:function(da){
	      alert('added');
		  
    }
});
}
</script>

3)The packages added to cart will be saved to session,use the file below add-to-cart.php

<?php
if(!session_id()){
	session_start();
}
include('includes/checksession.php');
/* unset($_SESSION['cart']);  */
$_SESSION['cart']['id'][] = $_POST['crtidpck'];
$_SESSION['cart']['numbucks'][] = $_POST['numbucks'];
$_SESSION['cart']['name'][] = $_POST['name'];
$_SESSION['cart']['total'][] = $_POST['total'];
$_SESSION['cart']['ppc'][] = $_POST['ppc'];
print_r($_SESSION['cart']);
?>


4)And the checkout file managing removal of items from cart and displaying them on the page on file checkout.php as follows


<?php
session_start();
 $title = "BabyBoomApps - Content Page";
$page_description = "BabyBoomApps is the place to help fund and gift a baby's future through contests, drawings and online fun!";
include("includes/header.php");
include('includes/checksession.php');
include('includes/connect.php');

?>

<!--breadcrumbs start-->
<div class="breadcrumbs">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-4">
        <h1 id="main_conhdr">MEMBERS</h1>
      </div>
      <div class="col-lg-8 col-sm-8">
        <ol class="breadcrumb pull-right">
          <li><a href="#">Home</a></li>
          <li class="active">BoomBucks
          <li>
        </ol>
      </div>
    </div>
  </div>
</div>
<!--breadcrumbs end-->
<!--container start-->
<div class="container">
  <div class="row">

    <div class="col-lg-9 about">
	<section class="credits-header">
          <div id="buy-credits-default">
            <h3>BoomBucks Cart</h3>
          
            <div class="clear"></div>
         
        </section>
     <div class="boombucks_section">
           
            <section class="tile-container smaller-boombucks_section">
			
			
			<!-------this section runs when cart is updated----------->
			<?php if($_POST['upcart']) { 
					if($_GET['index'])
					{
					$removeindex = $_GET['index'];
					unset($_POST[$removeindex]);
					$_POST = array_values($_POST);
					}
			?>
			<table style="width:100%">
			<thead style="border-bottom:1px dashed #ccc">
			<tr>
			<th>Package</th><th>Package Price</th><th>Quantity</th><th>Sub Total</th><th>&nbsp;</th>
			</tr>
			</thead>
			<tbody>
			
			<?php 
			//echo "<pre>";print_r($_SESSION['cart']['id']); print_r($_POST);
			$countt = count($_SESSION['cart']['id']);
			$total = 0;
			for($l=0;$l<$countt;$l++)
			{
			?>
			<tr>
			<td>
			<?php echo $_SESSION['cart']['numbucks'][$l];?>&nbsp;BoomBucks
			</td>
			
			<td>
			$<span id="ppc<?php echo $_SESSION['cart']['id'][$l];?>"><?php echo $_SESSION['cart']['ppc'][$l];?></span>
			</td>
			<td>
			<form action="" method="post">
			<input type="text" value="<?php echo $_POST[$l];?>" name="<?php echo $l ;?>" id="<?php echo $_SESSION['cart']['id'][$l];?>" style=" border: 1px solid #CCCCCC;
    height: 30px;
    width: 50px;"/>
			</td>
			<td>
			$<span id="s<?php echo $l;?>">
			
			<?php echo ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l])*($_POST[$l]);?>
			
			
			</span>
			</td>
			<td>
			<span class="removespan" id="re<?php echo $l;?>" onclick="removeitem('<?php echo $l;?>')">Remove</span>
			</td>
			</tr>
			<?php 
			$total+=  ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l])*($_POST[$l]);
			} ?>
			<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>Grand Total</td><td>$<span id="grand_total"><?php echo $total; ?></span></td><td>&nbsp;</td></tr>
			</tbody>
			</table>
					
            <?php }else { ?>
			<!------------------>
		
			
			<table style="width:100%">
			<thead style="border-bottom:1px dashed #ccc">
			<tr>
			<th>Package</th><th>Package Price</th><th>Quantity</th><th>Sub Total</th><th>&nbsp;</th>
			</tr>
			</thead>
			<tbody>
			
			<?php 
			
			$countt = count($_SESSION['cart']['id']);
			$total = 0;
			for($l=0;$l<$countt;$l++)
			{
			?>
			<tr>
			<td>
			<?php echo $_SESSION['cart']['numbucks'][$l];?>&nbsp;BoomBucks
			</td>
			
			<td>
			$<span id="ppc<?php echo $_SESSION['cart']['id'][$l];?>"><?php echo $_SESSION['cart']['ppc'][$l];?></span>
			</td>
			<td>
			<form action="" method="post">
			<input type="text" value="1" name="<?php echo $l;?>" id="<?php echo $_SESSION['cart']['id'][$l];?>" style=" border: 1px solid #CCCCCC;
    height: 30px;
    width: 50px;"/>
			</td>
			<td id="sub<?php $l;?>">
			$<span id="s<?php echo $l;?>"><?php echo ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l]);?></span>
			</td>
			<td>
			<span class="removespan" id="re<?php echo $_SESSION['cart']['id'][$l];?>" onclick="removeitem('<?php echo $l;?>')">Remove</span>
			</td>
			</tr>
			<?php 
			$total+=  ($_SESSION['cart']['numbucks'][$l])*($_SESSION['cart']['ppc'][$l]);
			} ?>
			<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>Grand Total</td><td>$<span id="grand_total"><?php echo $total; ?></span></td><td>&nbsp;</td></tr>
			</tbody>
			</table>
			<?php } ?>
            </section>
            <div class="clear"></div>
          
            
           
          </div>
		  <br/><br/>
		  <input type="submit" name="upcart" class="row button-next btn btn-info" value="Update Cart" style="float:left;width:20%;"></form><span class="row button-next btn btn-info" style="float:left;width:20%;margin-left:5px;" onclick="removeall();">Remove All</span><span class="row button-next btn btn-info" style="float:right;width:20%;" onclick="window.location.href='checkout.php'" id="proced_checkout">Proceed to Checkout</span>
    </div>
	
    <div class="col-lg-">
      <?php include("includes/sidebar-account.php"); ?>
    </div>
	
  </div>
  <div  class="row">
  </div>
</div>
<!--container end-->
<?php include("includes/footer.php"); ?>


<script>
function addtocart(id)
{
$.ajax({
     url:"add-to-cart.php",
	 type:"post",
	 data:{'crtidpck':id},
	 success:function(da){
	      alert('added');
		  $("#s"+id).html("Added!");
    }
});
}
function removeitem(id)
{

var subtotal = $("#s"+id).text();

var grand_total = $("#grand_total").text();
var new_grand_total = parseInt(grand_total) - parseInt(subtotal);
$("#grand_total").text(new_grand_total);
$("#re"+id).parent("td").parent("tr").hide(0);
 $.ajax({
     url:"remove-from-cart.php",
	 type:"post",
	 data:{'crtidpck':id},
	 success:function(da){
	      //alert('Removed!');
		  window.location.href="checkout.php?index="+id;
		 // $("#s"+id).html("Removed!");
    }
}); 
}
function removeall()
{
 $.ajax({
     url:"remove-all-from-cart.php",
	 type:"post",
	 success:function(da){
	     $("tbody tr:last").prevAll("tr").hide(0);
		 $("#grand_total").text("00.00");
    }
}); 
}
</script>

5)The other ajax request files used in checkout.php are
a)remove-from-cart.php

<?php
if(!session_id()){
	session_start();
}
include('includes/checksession.php');
$index = $_POST['crtidpck'];

unset($_SESSION['cart']['id'][$index]);
$_SESSION['cart']['id'] = array_values($_SESSION['cart']['id']);

unset($_SESSION['cart']['numbucks'][$index]);
$_SESSION['cart']['numbucks'] = array_values($_SESSION['cart']['numbucks']);

unset($_SESSION['cart']['name'][$index]);
$_SESSION['cart']['name'] = array_values($_SESSION['cart']['name']);

unset($_SESSION['cart']['total'][$index]);
$_SESSION['cart']['total'] = array_values($_SESSION['cart']['total']);

unset($_SESSION['cart']['ppc'][$index]);
$_SESSION['cart']['ppc'] = array_values($_SESSION['cart']['ppc']);


?> 

b)remove-all-from-cart.php

<?php
if(!session_id()){
	session_start();
}
include('includes/checksession.php');
unset($_SESSION['cart']);
?>

Json encode ,decode single row fetched from database


function abc(id)
{

	$("#id_of_registry").val(id);
	
	$.ajax({
         url:"get-ship-info.php",
	 type:"post",
	 dataType :"json",
	 data:{'id':id},
	 success:function(da){
	 
	 if(da == "1")
	 {
	 $("#addpro").show(0);
	 }
	 else{
	   $("#fname").val(da[0].fname);
           $("#lname").val(da[0].lname);
           $("#email").val(da[0].email);
           $("#phone1").val(da[0].phone1);
           $("#phone2").val(da[0].phone2);
           $("#phone3").val(da[0].phone3);
           $("#address").val(da[0].address);
           $("#city").val(da[0].city);
           $("#state").val(da[0].state);
           $("#zip").val(da[0].zip);
           $("#addpro").show(0);
  }
    }
});
}

in php file


$phone = $_POST['phone1']."-".$_POST['phone2']."-".$_POST['phone3'];
$out = mysql_query("select * from `bb_shipping_addresses` where `reg_id` = '".$_POST['id']."'");
$add = mysql_fetch_array($out);
$ph = explode('-',$add['phone']);
$num = mysql_num_rows($out);
$info = array();
if($num =="1"){
		$info[] = array( 'id' => $add['reg_id'],'fname'=>$add['fname'],'lname'=>$add['lname'],'email'=>$add['email'],'phone1'=>$ph[0],'phone2'=>$ph[1],'phone3'=>$ph[2],'address'=>$add['address'],'city'=>$add['city'],'state'=>$add['state'],'zip'=>$add['zip'] );
		echo json_encode($info);
}
else
{
		echo "1";
}

Embed vimeo,youtube new and youtube old videos


function getParm(url, base) {
        var re = new RegExp("(\\?|&)" + base + "\\=([^&]*)(&|$)");
        var matches = url.match(re);
        if (matches) {
            return(matches[2]);
        } else {
            return("");
        }
    }
	
function parseVideoURL(url) {
    
    
    
    var retVal = {};
    var matches;
    
    if (url.indexOf("youtube.com/watch") != -1) {
        retVal.provider = "youtube";
        retVal.id = getParm(url, "v");
    } else if (matches = url.match(/vimeo.com\/(\d+)/)) {
        retVal.provider = "vimeo";
        retVal.id = matches[1];
    }
	 else if(url.indexOf("/youtu.be/") != -1)
	 {
	   retVal.provider = "youtube";
	   
	   retVal.id = url.split("/")[3];
	   alert(url.split("/")[3]);
	 }
    return(retVal);
}

function createit()
{
var name= $("#nameofalbum").val();
var link1 = $("#location").val();
var details = $("#details").val();
var video = parseVideoURL(link1);
$.ajax({
     url:"createvideo.php",
	 type:"post",
	 data:{'name':name,'link':video.id,'video_from':video.provider,'details':details},
	 success:function(da){
	         $("#uppics").show(0);
			if(video.provider =="youtube")
				{
			  var row = "<tr id='"+da+"'><td>" + name + "</td><td></td><td>"+ details+"</td><td><img src='images/pencil.png' height='40px' width='40px'></td><td><img src='images/denied.png' height='40px' width='40px'></td></tr>";
				}
			if(video.provider =="vimeo")
			{
			var row =  "<tr id='"+da+"'><td>" + name + "</td><td></td><td>"+ details+"</td><td><img src='images/pencil.png' height='40px' width='40px'></td><td><img src='images/denied.png' height='40px' width='40px'></td></tr>";
			}
			$("#albumbody").append(row);
               $("input[type=text]").val(""); 
    }
});
}

Mutiple file uploader ajax,jquery

	$("#addbtnajax").click(function(e){
		var len = document.getElementById(‘addmore’).files.length;
		var file = new Array();
		var formdata = new FormData();
		for(i=0;i<len;i++)
		{
			file[i] = document.getElementById('addmore').files[i];
			formdata.append("file"+i, file[i]);
		}
		//formdata.append("file1", file);
		var ajax = new XMLHttpRequest();

		ajax.open("POST", "uploadselect.php");
		ajax.send(formdata);

		});

	   
});