JQUERY
Jquery Common Applications
Jquery Autocomplete
The autocomplete is a widget which attaches to and adds functionality for a standard HTML text field; it provides suggestions while you type into the field.
The autocomplete gets its list of suggestions from a javascript array, and you can provide that javascript array from one of three locations:
* A URL which returns data in JSON format
* A callback function
<̑?php
$arr = array(
array("name"=>"amar", "value"=>"7"),
array("name"=>"subharam", "value"=>"17"),
array("name"=>"lalit", "value"=>"71"),
array("name"=>"bishnu", "value"=>"2"),
array("name"=>"ashsis", "value"=>"721"),
array("name"=>"sambit", "value"=>"77"),
array("name"=>"debasish", "value"=>"77"),
array("name"=>"saswat", "value"=>"77"),
array("name"=>"soumindra", "value"=>"77")
);
$searching_about = urlencode($_REQUEST['q']);
$searched='';
foreach($arr as $key=>$val){
if(preg_match('/'.$searching_about.'/', $val['name'])){
echo $val['name'].'|'.$val['value']."\n";
}
}
exit;
?>
Jquery Fancybox
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
Jquery Datepicker
The default behavior of jQuery UI Datepicker control is to show Datepicker on click to the element to which it is bind.
But sometimes it is required to open the datepicker control on click of button
Jquery validation
There are lots of ways to perform validation on your html forms but nothing is easier than using jQuery’s validation plug-in.
Ajax file upload
Ajax file upload process uploads file without refreshing whole page during submitting.
<̑?php
ajax_file_upload_fn();
function ajax_file_upload_fn(){
$fname = strtotime(date('Y-m-d H:i:s'))."_".str_replace(' ','_',$_FILES['image']['name']);
$ftmpname=$_FILES['image']['tmp_name'];
copy($ftmpname,$_SERVER['DOCUMENT_ROOT'].'/tutorials/jquery/image/preview/'.$fname);//here you specify preview image document path to copy the image
// copying to a folder
echo "{img_name: '" . $fname . "'}";
// returning the name of the file to javascript as json object with name -- img_name
exit;
}
?>
A modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.
Modal window content