Showing posts with label ajax. Show all posts
Showing posts with label ajax. Show all posts
Ajax auto Suggest is our first article on 2013 .in
this article we presenting a simple auto suggest input text field. Here using Ajax,
PHP, js and jquery. process of this code snippet follows steps given bellow
- Whenever a key press event on a text box occur, a function in JavaScript is called which uses ajax to send the input in the text box to the name_fetch.php
- Then name_fetch.php receives a post request and check for any matches in the database.
- Matched result is sent back to the JavaScript code, Ajax, and display that bellow text box .
Program look like
- Index.html :-This is the index file ,which there is input box and the result to be shown as shown in the image above
- script.js :-This file holds the ajax code used to send and receive ajax requests to/from the server.
- config.php :-this code contain database connection information.
- name_fetch.php :-this code fetch name and send to script.
Download
 |
| Download full code |
name_fetch.php
<?php
include("config.php"); $keyword = $_POST['data']; $sql = "select name from ".$db_table." where ".$db_column." like '".$keyw ord."%' limit 0,20"; //$sql = "select name from ".$db_table.""; $result = mysql_query($sql) or die(mysql_error()); if(mysql_num_rows($result)) { echo '<ul class="list">'; while($row = mysql_fetch_array($result)) { $str = strtolower($row['name']); $start = strpos($str,$keyword); $end = similar_text($str,$keyword); $last = substr($str,$end,strlen($str)); $first = substr($str,$start,$end); $final = '<span class="bold">'.$first.'</span>'.$last; echo '<li><a href=\'javascript:void(0);\'>'.$final.'</a>< /li>'; } echo "</ul>"; } else echo 0; ?>
script.js
/*
cc:scriptime.blogspot.in edited by :scriptime */ $(document).ready(function(){ $(document).click(function(){ $("#ajax_response").fadeOut('slow'); }); $("#keyword").focus(); var offset = $("#keyword").offset(); var width = $("#keyword").width()-2; $("#ajax_response").css("left",offset.left); $("#ajax_response").css("width",width); $("#keyword").keyup(function(event){ //alert(event.keyCode); var keyword = $("#keyword").val(); if(keyword.length) { if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) { $("#loading").css("visibility","visible"); $.ajax({ type: "POST", url: "name_fetch.php", data: "data="+keyword, success: function(msg){ if(msg != 0) $("#ajax_response").fadeIn("slow").html(msg); else { $("#ajax_response").fadeIn("slow"); $("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>'); } $("#loading").css("visibility","hidden"); } }); } else { switch (event.keyCode) { case 40: { found = 0; $("li").each(function(){ if($(this).attr("class") == "selected") found = 1; }); if(found == 1) { var sel = $("li[class='selected']"); sel.next().addClass("selected"); sel.removeClass("selected"); } else $("li:first").addClass("selected"); } break; case 38: { found = 0; $("li").each(function(){ if($(this).attr("class") == "selected") found = 1; }); if(found == 1) { var sel = $("li[class='selected']"); sel.prev().addClass("selected"); sel.removeClass("selected"); } else $("li:last").addClass("selected"); } break; case 13: $("#ajax_response").fadeOut("slow"); $("#keyword").val($("li[class='selected'] a").text()); break; } } } else $("#ajax_response").fadeOut("slow"); }); $("#ajax_response").mouseover(function(){ $(this).find("li a:first-child").mouseover(function () { $(this).addClass("selected"); }); $(this).find("li a:first-child").mouseout(function () { $(this).removeClass("selected"); }); $(this).find("li a:first-child").click(function () { $("#keyword").val($(this).text()); $("#ajax_response").fadeOut("slow"); }); }); });
Output
Our new tutorial on image upload
using ajax jquery and php , in this tutorial I am using conventional php image
upload with little bit of Ajax and jquery ,in this code snippet upload a pic
from disk and replace a div.
Design your HTML
form like above to create your dynamic image up loader using Ajax and PHP.
Below is the PHP script to upload the image to web directory.
Upload
the Ajaximageupload.js file in the same directory and link it to the html file.
(If needed download the example file) upload all the files and run the script.
While we press upload button Ajax will submit the form Asynchronous without disturbing the status of webpage. Now PHP will get the image from your local directory and start to upload it to the server.
You can download the example file
above and change the parameter according to your requirement.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax and PHP image upload</title>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia,"Times New Roman",Times,serif;;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:640px; margin:0 auto; padding:20px; background:#FFF;}
.innerbg{ padding:6px; background:#FFF;}
.result{ border:solid 1px #CCC; margin:10px 2px; padding:4px 2px;}
.title a{ font-weight:bold; color:#c24f00; text-decoration:none; font-size:14px;}
.discptn a{ text-decoration:none; color:#999;}
.link a{ color:#008000; text-decoration:none;}
-->
</style>
<script type="text/javascript" src="Ajaxfileupload-jquery-1.3.2.js" ></script>
<script type="text/javascript" src="ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="Ajaxfile-upload.css" />
<script type="text/javascript" >
$(function(){
var btnUpload=$('#me');
var mestatus=$('#mestatus');
var files=$('#files');
new AjaxUpload(btnUpload, {
action: 'uploadPhoto.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
mestatus.text('Only JPG, PNG or GIF files are allowed');
return false;
}
mestatus.html('<img src="ajax-loader.gif" height="16" width="16">');
},
onComplete: function(file, response){
//On completion clear the status
mestatus.text('Photo Uploaded Sucessfully!');
//On completion clear the status
files.html('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="images/scriptime_'+file+'" alt="" height="200" width="180" /><br />').addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
</script>
</head>
<body>
<div style="text-align:center;">
<div style="display:none;"><img src="ajax-loader.gif" /></div>
<h1 style="color:#000;">PHP Ajax image upload with out refresh.</br><a href="http://www.scriptime.blogspot.in" style="color:#533; text-decoration:none; font-size:18px;">www.scriptime.blogspot.in</a></h1></div>
<div class="maindiv">
<div class="innerbg">
<table width="100%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3" align="left" valign="middle" bgcolor=""><div style="margin:0px 10px; font-weight:bold; color:#000; font-size:16px;"></div></td>
</tr>
<tr>
<td colspan="3" align="left" valign="middle">
<div id="flash"></div>
<div id="ajaxresult">
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="180" align="center" valign="middle">
<div id="me" class="styleall" style=" cursor:pointer;"><span style=" cursor:pointer; font-family:Verdana, Geneva, sans-serif; font-size:12px;"><span style=" cursor:pointer;"> Upload Photo</span></span></div><span id="mestatus" ></span>
</td>
<td width="208" align="center" valign="middle"><div id="files">
<li class="success">
</li>
</div>
</td>
<td width="228" align="right" valign="center"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" align="left" valign="middle">
</td>
</tr>
</table>
</div>
</div>
<div style="padding:4px; text-align:right;"></div></body>
</html>
download full code
|
A PHP image resizing script that will re size JPG and PNG images. Specify a width OR a height OR both. Images are resized proportionally if only a width or a height is specified.
code:
code:
// Get the image info from the photo
$image_info = getimagesize($photo);
$width = $new_width = $image_info[0];
$height = $new_height = $image_info[1];
$type = $image_info[2];
// Load the image
switch ($type)
{
case IMAGETYPE_JPEG:
$image = imagecreatefromjpeg($photo);
break;
case IMAGETYPE_GIF:
$image = imagecreatefromgif($photo);
break;
case IMAGETYPE_PNG:
$image = imagecreatefrompng($photo);
break;
default:
die('Error loading '.$photo.' - File type '.$type.' not supported');
}
// Create a new, resized image
$new_width = 180;
$new_height = $height / ($width / $new_width);
$new_image = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
// Save the new image over the top of the original photo
switch ($type)
{
case IMAGETYPE_JPEG:
imagejpeg($image, $photo, 100);
break;
case IMAGETYPE_GIF:
imagegif($image, $photo);
break;
case IMAGETYPE_PNG:
imagepng($image, $photo);
break;
default:
die('Error saving image: '.$photo);
}
