Judul : jQuery with PHP
link : jQuery with PHP
jQuery with PHP
how to add jQuery to Your Web Pages ?:
There are several ways to start using jQuery on
your web site. You can:
(1)Download the jQuery library from jQuery.com
(2)Include jQuery from a CDN, like Google
(1)Download the jQuery library from jQuery.com
(2)Include jQuery from a CDN, like Google
Downloading jQuery :
There are two versions of jQuery available for downloading:
· Production version - this is for your live website because
it has been minified and compressed
· Development version - this is for testing and development
(uncompressed and readable code)
Both versions can be downloaded from jQuery.com.
The jQuery library is a single JavaScript file, and you reference it with the HTML <script>
tag (notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-1.12.2.min.js"></script>
</head>
Tip: Place the downloaded file in the same directory as the pages where you wish to use it.
Note Do you wonder why we do not have type="text/javascript" inside the <script> tag?
This is not required in HTML5. JavaScript is the default
scripting language in HTML5 and in all modern browsers!
jQuery CDN :
If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
Both Google and Microsoft host jQuery.
To use jQuery from Google or Microsoft, use one of the following:
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
Try it Yourself »
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>
jQuery Syntax :
The jQuery syntax is tailor-made for selecting
HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
jQuery uses CSS syntax to select elements.
The Document Ready Event
You might have noticed that
all jQuery methods in our examples, are inside a document ready event:
$(document).ready(function(){
// jQuery methods go here...
});
This is to prevent any jQuery code from running
before the document is finished loading (is ready).
It is good practice to wait for the document to
be fully loaded and ready before working with it. This also allows you to have your JavaScript code
before the body of your document, in the head section.
Here are some examples of actions that can fail
if methods are run before the document is fully loaded:
Trying to hide an element that is not created yet
Trying to get the size of an image that is not loaded yet
Tip: The jQuery team has also created an even shorter method for the document ready event:
$(function(){
// jQuery methods go here...
});
jQuery Selectors :
jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
When a user clicks on a button, all <p> elements will be hidden:
Example :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
The #id Selector :
The jQuery #id selector uses the id attribute of an HTML tag to
find the specific element.
An id should be unique within a page, so you should use the #id selector
when you want to find a single, unique element.
To find an element with a specific id, write a hash character,
followed by the id of the HTML element:
$("#test")
Example :
When a user clicks on a button, the element with id="test"
will be hidden:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button> Click me</button>
</body>
</html>
The .class Selector
The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
$(".test")
Example :
When a user clicks on a button, the elements with class="test" will be hidden:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Important Javascript and Jquery Code for web development:
(1)how to make multiple preview of single image:
http://phpdevelopmenttricks.blogspot.in/2017/01/how-to-make-multiple-preview-of-single.html
(2)javascript code for confirmation before delte and update:
http://phpdevelopmenttricks.blogspot.in/2016/12/javascript-code-for-confirmation-before.html
(3)how to pass image file with text to php using Ajax:
http://phpdevelopmenttricks.blogspot.in/2016/12/how-to-pass-image-file-with-text-to-php.html
(4)how to preview form entered value in text:
http://phpdevelopmenttricks.blogspot.in/2016/12/preview-form-entered-value-in-text.html
(5)Drag and Drop file upload :
http://phpdevelopmenttricks.blogspot.in/2016/12/drag-and-drop-file-upload-using.html
jQuery css() Method :
The css() method sets or returns one or more style properties for the selected elements.
Return a CSS Property
To return the value of a specified CSS property, use the following syntax:
css("propertyname");
The following example will return the background-color value of the FIRST matched element:
Example :
$("p").css("background-color");
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>
</body>
</html>
Set Multiple CSS Properties :
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set multiple styles for p</button>
</body>
</html>
========================================================================
Login and Regsitration hide and show using jquery :
=======================================================================
<!DOCTYPE html>
<html>
<head>
<style>
#login{
display:none;
}
#register{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#click1").click(function(){
$("#login").show();
$("#register").hide();
});
});
$(document).ready(function(){
$("#click2").click(function(){
$("#register").show();
$("#login").hide();
});
});
</script>
</head>
<body>
<button id=click1> LOGIN</button>
<button id=click2> REGISTER</button>
<div id="login">
<form action=login.php method=post>
Make Login
email <input type=text name=email>
password<input type=password name=password>
<input type=submit name=submit value=Login>
</form>
</div>
<div id="register">
Make Registration
<form action=register.php method=post>
email <input type=text name=email>
password<input type=password name=password>
confirm password<input type=password name=password>
<input type=submit name=submit value=Login>
</form>
</div>
</body>
</html>
Login and Regsitration hide and show using jquery :
=======================================================================
<!DOCTYPE html>
<html>
<head>
<style>
#login{
display:none;
}
#register{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#click1").click(function(){
$("#login").show();
$("#register").hide();
});
});
$(document).ready(function(){
$("#click2").click(function(){
$("#register").show();
$("#login").hide();
});
});
</script>
</head>
<body>
<button id=click1> LOGIN</button>
<button id=click2> REGISTER</button>
<div id="login">
<form action=login.php method=post>
Make Login
email <input type=text name=email>
password<input type=password name=password>
<input type=submit name=submit value=Login>
</form>
</div>
<div id="register">
Make Registration
<form action=register.php method=post>
email <input type=text name=email>
password<input type=password name=password>
confirm password<input type=password name=password>
<input type=submit name=submit value=Login>
</form>
</div>
</body>
</html>
================================================================================================================================================
========================================================================Ajax with Jquery & php & mysql
========================================================================
================================================================================================================================================
ONCHANGE DROPDWON EXAMPLE USING JQUERY AND AJAX WITH PHP & MYSQL:
========================================================================
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#preview').hide();
$("#title").keypress(update);
});
function update(){
$('#preview').slideDown('slow');
var title = $("#title").val();
$('#Displaytitle').html(title);
}
$(document).ready(function(){
$('#preview1').hide();
$("#title1").keypress(update1);
});
function update1(){
$('#preview1').slideDown('slow');
var title1 = $("#title1").val();
$('#Displaytitle1').html(title1);
}
</script>
</head>
<body>
<form>
Add a Tagline
<input type=text id="title" class="click" name="title">This is your default advert text. </textarea>
<input type=text id="title1" class="click" name="title1" >This is your default advert text. </textarea>
</form>
<div class="right">
<div id="preview"> This is how your advert will look
<div id="Displaytitle"></div>
</div>
<br> </br>
<h1> Second Text</h1>
<div id="preview1"> This is how your advert will look
<div id="Displaytitle1"></div>
</div>
</div>
</body>
</html>
ONCHANGE DROPDWON EXAMPLE USING JQUERY AND AJAX WITH PHP & MYSQL:
STEP 1: create table categorie :
create table categorie
(
category_id int primary key auto_increment ,
type varchar(200),
categoryname varchar(200)
);
STEP 2 :
<!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=iso-8859-1" />
<title>Sections Demo</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var data=$(this).val();
var dataString = 'data='+ data;
$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
</style>
</head>
<body>
<form action=test.php method=post enctype="multipart/form-data">
<div style="margin:80px">
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
echo $sql1="select * from categorie group by type";
$result1=mysql_query($sql1) or die(mysql_error());
while($row1=mysql_fetch_array($result1))
{
echo '<option value="'.$row1['type'].'">';
echo $row1['type'];
echo '</option>';
}
?>
</select>
<textarea type=text name=hello > </textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'hello' );
</script>
<input type=file name=image>
<input type=submit name=submit value=submit>
</form> <br/><br/>
<label>City :</label>
<div name="city" class="city">
</div>
</div>
</body>
</html>
OUTPUT:
STEP 3: now write code for ajax_city.php file which will execute on onchange of dropdown:
<select name="categoryname" id="categoryname">';
<?php
include("db.php");
$type=$_POST['data'];
echo $sql2="select * from categorie where type='$type'";
$result2=mysql_query($sql2) or die(mysql_error());
while($row2=mysql_fetch_array($result2))
{
echo '<option value="'.$row2['categoryname'].'">';
echo $row2['categoryname'];
echo '</option>';
}
?>
</select>
Step 4: now write code for test.php file which will execute on click on submit button:
<?php
echo "country =". $test=$_POST['country'];
echo '<br>';
echo "categoryname=". $categoryname=$_POST['categoryname'];
echo '<br>';
echo "hello=".$hello=$_POST['hello'];
echo '<br>';
echo "image =". $image=$_FILES['image']['name'];
echo '<br>';
move_uploaded_file($_FILES['image']['tmp_name'],"upload/".$_FILES['image']['name']);
?>
========================================================================
Preview form entered value in text using jquery :
========================================================================<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#preview').hide();
$("#title").keypress(update);
});
function update(){
$('#preview').slideDown('slow');
var title = $("#title").val();
$('#Displaytitle').html(title);
}
$(document).ready(function(){
$('#preview1').hide();
$("#title1").keypress(update1);
});
function update1(){
$('#preview1').slideDown('slow');
var title1 = $("#title1").val();
$('#Displaytitle1').html(title1);
}
</script>
</head>
<body>
<form>
Add a Tagline
<input type=text id="title" class="click" name="title">This is your default advert text. </textarea>
<input type=text id="title1" class="click" name="title1" >This is your default advert text. </textarea>
</form>
<div class="right">
<div id="preview"> This is how your advert will look
<div id="Displaytitle"></div>
</div>
<br> </br>
<h1> Second Text</h1>
<div id="preview1"> This is how your advert will look
<div id="Displaytitle1"></div>
</div>
</div>
</body>
</html>
================================================================================================================================================
========================================================================
HTML File – refreshform.html
· Consists of form with id = “form”.
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Without Refreshing Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/refreshform.css" rel="stylesheet">
<script src="js/refreshform.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Without Refreshing Page</h2>
<!-- Required Div Starts Here -->
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<label>Name:</label>
<input id="name" placeholder="Your Name" type="text">
<label>Email:</label>
<input id="email" placeholder="Your Email" type="text">
<label>Contact No.</label>
<input id="contact" placeholder="Your Mobile No." type="text">
<label>Gender:</label>
<input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female
<label>Message:</label>
<textarea id="msg" placeholder="Your message..">
</textarea>
<input id="submit" type="button" value="Submit">
</form>
</div>
</body>
</html>
jQuery File – refreshform.js
· Sends request to php script with form details. Return notification on successful data submission.
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var contact = $("#contact").val();
var gender = $("input[type=radio]:checked").val();
var msg = $("#msg").val();
if (name == '' || email == '' || contact == '' || gender == '' || msg == '') {
alert("Insertion Failed Some Fields are Blank....!!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("refreshform.php", {
name1: name,
email1: email,
contact1: contact,
gender1: gender,
msg1: msg
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});
My-SQL Code
· My-SQL command for creation of database ‘mydba’ and table ‘form_elements’.
CREATE DATABASE mydba;
CREATE TABLE form_element (
id int(25) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
contact int(25) NOT NULL,
gender varchar(255) NOT NULL,
message varchar(255) NOT NULL,
PRIMARY KEY (id)
)
PHP File – refreshform.php
· Insert form information into database.
<?php
// Establishing connection with server by passing "server_name", "user_id", "password".
$connection = mysql_connect("localhost", "root", "");
// Selecting Database by passing "database_name" and above connection variable.
$db = mysql_select_db("mydba", $connection);
$name2=$_POST['name1']; // Fetching Values from URL
$email2=$_POST['email1'];
$contact2=$_POST['contact1'];
$gender2=$_POST['gender1'];
$msg2=$_POST['msg1'];
$query = mysql_query("insert into form_element(name, email, contact, gender, message) values ('$name2','$email2','$contact2','$gender2','$msg2')"); //Insert query
if($query){
echo "Data Submitted succesfully";
}
mysql_close($connection); // Connection Closed.
?>
Css File – refreshform.css
· Includes basic styling of form.
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#form{
background-color:#556b2f;
color:#D5FFFA;
border-radius:5px;
border:3px solid #d3cd3d;
padding:4px 30px;
font-weight:700;
width:350px;
font-size:12px;
float:left;
height:auto;
margin-left:35px
}
label{
font-size:15px
}
h3{
text-align:center;
font-size:21px
}
div#mainform{
width:960px;
margin:50px auto;
font-family:'Fauna One',serif
}
input[type=text]{
width:100%;
height:40px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px
}
textarea{
width:100%;
height:60px;
margin-top:10px;
border:none;
border-radius:3px;
padding:5px;
resize:none
}
input[type=radio]{
margin:10px 5px 5px
}
input[type=button]{
width:100%;
height:40px;
margin:35px 0 30px;
background-color:#f4a460;
border:1px solid #fff;
border-radius:3px;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px
}
=====================================================================
same example in different way:
=====================================================================
same example in different way:
=====================================================================
HTML File: ajaxsubmit.html
Here, we create our form
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<h2>Submit Form Using AJAX and jQuery</h2> <!-- Required div Starts Here -->
<div id="form">
<h3>Fill Your Information !</h3>
<div>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<label>Contact No :</label>
<input id="contact" type="text">
<input id="submit" type="button" value="Submit">
</div>
</div>
</div>
</body>
</html>
PHP File: ajaxsubmit.php
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("mydba", $connection); // Selecting Database
//Fetching Values from URL
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$contact2=$_POST['contact1'];
//Insert query
$query = mysql_query("insert into form_element(name, email, password, contact) values ('$name2', '$email2', '$password2','$contact2')");
echo "Form Submitted Succesfully";
mysql_close($connection); // Connection Closed
?>
jQuery File: script.js
jQuery file consist of ajax functionality.
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
if(name==''||email==''||password==''||contact=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
MY-SQL Code Segment:
Here is the My-SQL code for creating database and table.
CREATE DATABASE mydba;
CREATE TABLE form_element(
id int(10) NOT NULL AUTO_INCREMENT,
name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL,
contact varchar(255) NOT NULL,
PRIMARY KEY (id)
)
CSS File: style.css
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#form {
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px #123456;
font-weight:400;
width:350px;
margin:50px 250px 0 35px;
float:left;
height:500px
}
#form div {
padding:10px 0 0 30px
}
h3 {
margin-top:0;
color:#fff;
background-color:#3C599B;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
#mainform {
width:960px;
margin:50px auto;
padding-top:20px;
font-family:'Fauna One',serif
}
input {
width:90%;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #123456
}
input[type=button] {
background-color:#3C599B;
border:1px solid #fff;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff
}ouput:
Google Like Auto Suggest Search
Using PHP Ajax :
first of create table product:
create table product
(
id int primary key auto_increment,
name varchar(200),
price varchar(200)
);
(1)write code for style.css file:
body
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul
{
list-style: none;
margin: 17px 20px 20px 24px;
width: 330px;
}
li
{
display: block;
padding: 5px;
background-color: #ccc;
border-bottom: 1px solid #367;
}
#content
{
padding:50px;
width:500px; border:1px solid #666;
float:left;
}
#clear
{ clear:both; }
#box
{
float:left;
margin:0 0 20px 0;
text-align:justify;
}
input[type=text]
{width:330px; height:35px;}
input[type=submit]
{
width:90px; height:35px;
}
(2) write code for ajax.php file:
<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("manu",$query);
if(isset($_POST['name']))
{
$name=trim($_POST['name']);
$query2=mysql_query("SELECT * FROM product WHERE name LIKE '%$name%'");
echo "<ul>";
while($query3=mysql_fetch_array($query2))
{
?>
<li onclick='fill("<?php echo $query3['name']; ?>")'><?php echo $query3['name']; ?> </li>
<?php
}
}
?>
</ul>
(3)now write code for myinedx.php file :
<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("manu",$query); ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function fill(Value)
{
$('#name').val(Value);
$('#display').hide();
}
$(document).ready(function(){
$("#name").keyup(function() {
var name = $('#name').val();
if(name=="")
{
$("#display").html("");
}
else
{
$.ajax({
type: "POST",
url: "ajax.php",
data: "name="+ name ,
success: function(html){
$("#display").html(html).show();
}
});
}
});
});
</script>
</head>
<body>
<div id="content">
<?php
$val='';
if(isset($_POST['submit']))
{
if(!empty($_POST['name']))
{
$val=$_POST['name'];
}
else
{
$val='';
}
}
?>
<center><img src="freeze.PNG"></center>
<form method="post" action="myindex.php">
Search : <input type="text" name="name" id="name" autocomplete="off"
value="<?php echo $val;?>">
<input type="submit" name="submit" id="submit" value="Search">
</form>
<div id="display"></div>
<?php
if(isset($_POST['submit']))
{
if(!empty($_POST['name']))
{
$name=$_POST['name'];
$query3=mysql_query("SELECT * FROM product WHERE name LIKE '%$name%' ");
while($query4=mysql_fetch_array($query3))
{
echo "<div id='box'>";
echo "<b>".$query4['name']."</b>";
echo "<div id='clear'></div>";
echo $query4['price'];
echo "</div>";
}
}
else
{
echo "No Results";
}
}
?>
</div>
</body>
</html>
Now run your myinedx.php file:
output :
Dialog boxes:
Dialog boxes are one of the nice ways of presenting information on an HTML page. A dialog box is a floating window with a title and content area. This window can be moved, resized, and of course, closed using "X" icon by default.
jQueryUI provides dialog() method that transforms the HTML code written on the page into HTML code to display a dialog box.
Syntax
The dialog() method can be used in two forms:
$(selector, context).dialog (options) Method
The dialog (options) method declares that an HTML element can be administered in the form of a dialog box. The options parameter is an object that specifies the appearance and behavior of that window.
Syntax
$(selector, context).dialog(options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows:$(selector, context).dialog({option1: value1, option2: value2..... });
Following table lists the different options that can be used with this method:Option Description appendTo If this option is set to false, it will prevent the ui-draggable class from being added in the list of selected DOM elements. By default its value is true. autoOpen This option unless set to false, the dialog box is opened upon creation. When false, the dialog box will be opened upon a call to dialog('open'). By default its value is true. buttons This option adds buttons in the dialog box. These are listed as objects, and each property is the text on the button. The value is a callback function called when the user clicks the button. By default its value is {}. closeOnEscape Unless this option set to false, the dialog box will be closed when the user presses the Escape key while the dialog box has focus. By default its value is true. closeText This option contains text to replace the default of Close for the close button. By default its value is "close". dialogClass If this option is set to false, it will prevent the ui-draggable class from being added in the list of selected DOM elements. By default its value is "". draggable Unless you this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true. height This option sets the height of the dialog box. By default its value is "auto". hide This option is used to set the effect to be used when the dialog box is closed. By default its value is null. maxHeight This option sets maximum height, in pixels, to which the dialog box can be resized. By default its value isfalse. maxWidth This option sets the maximum width to which the dialog can be resized, in pixels. By default its value isfalse. minHeight This option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is150. minWidth This option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is150. modal If this option is set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements. By default its value is false. position This option specifies the initial position of the dialog box. Can be one of the predefined positions: center (the default), left, right, top, or bottom. Can also be a 2-element array with the left and top values (in pixels) as [left,top], or text positions such as ['right','top']. By default its value is { my: "center", at: "center", of: window }. resizable This option unless set to false, the dialog box is resizable in all directions. By default its value is true. show This option is an effect to be used when the dialog box is being opened. By default its value is null. title This option specifies the text to appear in the title bar of the dialog box. By default its value is null. width This option specifies the width of the dialog box in pixels. By default its value is 300.
Following section will show you few working examples of dialog functionality.Default functionality
The following example demonstrates a simple example of dialog functionality passing no parameters to the dialog() method .<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id="opener">Open Dialog</button>
</body>
</html>
Let's save above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Use of buttons, title and position
The following example demonstrates the usage of three options buttons,title and position in the dialog widget of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-2" ).dialog({
autoOpen: false,
buttons: {
OK: function() {$(this).dialog("close");}
},
title: "Success",
position: {
my: "left center",
at: "left center"
}
});
$( "#opener-2" ).click(function() {
$( "#dialog-2" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialog-2" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id="opener-2">Open Dialog</button>
</body>
</html>
Let's save above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Use of hide, show and height
The following example demonstrates the usage of three options hide, showand height in the dialog widget of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-3" ).dialog({
autoOpen: false,
hide: "puff",
show : "slide",
height: 200
});
$( "#opener-3" ).click(function() {
$( "#dialog-3" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialog-3" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id="opener-3">Open Dialog</button>
</body>
</html>
Let's save above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Use of modal
The following example demonstrates the usage of three options buttons,title and position in the dialog widget of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-4" ).dialog({
autoOpen: false,
modal: true,
buttons: {
OK: function() {$(this).dialog("close");}
},
});
$( "#opener-4" ).click(function() {
$( "#dialog-4" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id="dialog-4" title="Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id="opener-4">Open Dialog</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. </p>
<label for="textbox">Enter Name: </label>
<input type="text">
</body>
</html>
Let's save above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. $(selector, context).dialog ("action", [params]) Method
The dialog (action, params) method can perform an action on the dialog box, such as closing the box. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.Basically, here actions are nothing but they are jQuery methods which we can use in the form of string.
Syntax
$(selector, context).dialog ("action", [params]);
The following table lists the actions for this method:Action Description close() This action closes the dialog box. This method does not accept any arguments. destroy() This action removes the dialog box competely. This will return the element back to its pre-init state. This method does not accept any arguments. isOpen() This action checks if the dialog box is open. This method does not accept any arguments. moveToTop() This action positions the corresponding dialog boxes to the foreground (on top of the others). This method does not accept any arguments. open() This action opens the dialog box. This method does not accept any arguments. option( optionName ) This action gets the value currently associated with the specified optionName. Where optionNameis the name of the option to get. option() This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any arguments. option( optionName, value ) This action sets the value of the dialog option associated with the specified optionName. option( options ) This action sets one or more options for the dialog. widget() This action returns the dialog box’s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.
Example
Now let us see an example using the actions from the above table. The following example demonstrates the use of isOpen(), open() and close()methods.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script type="text/javascript">
$(function(){
$("#toggle").click(function() {
($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
});
$("#dialog-5").dialog({autoOpen: false});
});
</script>
</head>
<body>
<button id="toggle">Toggle dialog!</button>
<div id="dialog-5" title="Dialog Title!">
Click on the Toggle button to open and cose this dialog box.
</div>
</body>
</html>
Let's save above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must see the following output:Event Management on Dialog Box
In addition to the dialog (options) method we saw in the previous sections, JqueryUI provides event methods as which gets triggered for a particular event. These event methods are listed below:Event Method Description beforeClose(event, ui) This event is triggered when the dialog box is about to close. Returning false prevents the dialog box from closing. It is handy for dialog boxes with forms that fail validation. Where event is of type Event, and ui is of type Object. close(event, ui) This event is triggered when the dialog box is closed. Where event is of type Event, and ui is of typeObject. create(event, ui) This event is triggered when the dialog box is created. Where event is of type Event, and ui is of type Object. drag(event, ui) This event is triggered repeatedly as a dialog box is moved about during a drag. Where event is of typeEvent, and ui is of type Object. dragStart(event, ui) This event is triggered when a repositioning of the dialog box commences by dragging its title bar. Where event is of type Event, and ui is of typeObject. dragStop(event, ui) This event is triggered when a drag operation terminates. Where event is of type Event, and ui is of type Object. focus(event, ui) This event is triggered when the dialog gains focus. Where event is of type Event, and ui is of typeObject. open(event, ui) This event is triggered when the dialog box is opened. Where event is of type Event, and ui is of type Object. resize(event, ui) This event is triggered repeatedly as a dialog box is resized. Where event is of type Event, and ui is of type Object. resizeStart(event, ui) This event is triggered when a resize of the dialog box commences. Where event is of type Event, andui is of type Object. resizeStop(event, ui) This event is triggered when a resize of the dialog box terminates. Where event is of type Event, and uiis of type Object.
Following example demonstrates the use of the events listed in the above table.Use of beforeClose Event method
The following example demonstrates the use of beforeClose event method.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.invalid { color: red; }
textarea {
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
</style>
<!-- Javascript -->
<script type="text/javascript">
$(function(){
$( "#dialog-6" ).dialog({
autoOpen: false,
buttons: {
OK: function() {
$( this ).dialog( "close" );
}
},
beforeClose: function( event, ui ) {
if ( !$( "#terms" ).prop( "checked" ) ) {
event.preventDefault();
$( "[for=terms]" ).addClass( "invalid" );
}
},
width: 600
});
$( "#opener-5" ).click(function() {
$( "#dialog-6" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-6">
<p>You must accept these terms before continuing.</p>
<textarea>This Agreement and the Request constitute the entire agreement of the
parties with respect to the subject matter of the Request. This Agreement shall be
governed by and construed in accordance with the laws of the State, without giving
effect to principles of conflicts of law.</textarea>
<div>
<label for="terms">I accept the terms</label>
<input type="checkbox" id="terms">
</div>
</div>
<button id="opener-5">Open Dialog</button>
</body>
</html>
Let's save above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must see the following output:Use of resize Event method
The following example demonstrates the use of resize event method.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button{
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script type="text/javascript">
$(function(){
$( "#dialog-7" ).dialog({
autoOpen: false,
resize: function( event, ui ) {
$( this ).dialog( "option", "title",
ui.size.height + " x " + ui.size.width );
}
});
$( "#opener-6" ).click(function() {
$( "#dialog-7" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-7" title="Dialog Title goes here...">Resize this dialog to see the dialog co-ordinates in the title!</div>
<button id="opener-6">Open Dialog</button>
</body>
</html>
Let's save above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must see the following output:Datepickers:By default, for <input> elements, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a <div>, or <span> element.
Syntax
The datepicker() method can be used in two forms:
$(selector, context).datepicker (options) Method
The datepicker (options) method declares that an <input> element (or <div>, or <span>, depending on how you choose to display the calendar) should be managed as a datepicker. The options parameter is an object that specifies the behavior and appearance of the datepicker elements.Syntax
$(selector, context).datepicker(options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows:$(selector, context).datepicker({option1: value1, option2: value2..... });
Following table lists the different options that can be used with this method:Option Description altField This option specifies a jQuery selector for a field that is also updated with any date selections. The altFormat option can be used to set the format for this value. This is quite useful for setting date values into a hidden input element to be submitted to the server, while displaying a more user-friendly format to the user. By default its value is "". altFormat This option is used when an altField option is specified. It provides the format for the value to be written to the alternate element. By default its value is "". appendText This option is a String value to be placed after the <input> element, intended to show instructions to the user. By default its value is "". autoSize This option when set to true resizes the <input> element to accommodate the datepicker’s date format as set with the dateFormat option. By default its value isfalse. beforeShow This option is a callback function that’s invoked just before a datepicker is displayed, with the <input> element and datepicker instance passed as parameters. This function can return an options hash used to modify the datepicker. By default its value is "". beforeShowDay This option is a callback function which takes a date as parameter, that’s invoked for each day in the datepicker just before it’s displayed, with the date passed as the only parameter. This can be used to override some of the default behavior of the day elements. This function must return a three-element array.By default its value is null. buttonImage This option specifies the path to an image to be displayed on the button enabled by setting the showOn option to one of buttons or both. If buttonText is also provided, the button text becomes the alt attribute of the button. By default its value is "". buttonImageOnly This option if set to true, specifies that the image specified by buttonImage is to appear standalone (not on a button). The showOn option must still be set to one of button or both for the image to appear. By default its value is false. buttonText This option specifies the caption for the button enabled by setting the showOn option to one of button or both. By default its value is "...". calculateWeek This option is a custom function to calculate and return the week number for a date passed as the lone parameter. The default implementation is that provided by the$.datepicker.iso8601Week() utility function. changeMonth This option if set to true, a month dropdown is displayed, allowing the user to directly change the month without using the arrow buttons to step through them. By default its value is false. changeYear This option if set to true, a year dropdown is displayed, allowing the user to directly change the year without using the arrow buttons to step through them. OptionyearRange can be used to control which years are made available for selection. By default its value is false. closeText This option specifies the text to replace the default caption of Done for the close button. It is used when the button panel is displayed via the showButtonPanel option. By default its value is "Done". constrainInput This option if set true (the default), text entry into the <input> element is constrained to characters allowed by the current dateformat option. By default its value is true. currentText This option specifies the text to replace the default caption of Today for the current button. This is used if the button panel is displayed via the showButtonPanel option. By default its value is Today. dateFormat This option specifies the date format to be used. By default its value is mm/dd/yy. dayNames This option is a 7-element array providing the full day names with the 0th element representing Sunday. Can be used to localize the control. By default its value is [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]. dayNamesMin This option is a 7-element array providing the minimal day names with the 0th element representing Sunday, used as column headers. Can be used to localize the control. By default its value is [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]. dayNamesShort This option specifies a 7-element array providing the short day names with the 0th element representing Sunday. Can be used to localize the control. By default its value is[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]. defaultDate This option sets the initial date for the control, overriding the default value of today, if the <input> element has no value. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null. duration This option specifies the speed of the animation that makes the datepicker appear. Can be one of slow, normal, or fast, or the number of milliseconds for the animation to span. By default its value is normal. firstDay This option specifies which day is considered the first day of the week, and will be displayed as the left-most column. By default its value is 0. gotoCurrent This option when set to true, the current day link is set to the selected date, overriding the default of today. By default its value is false. hideIfNoPrevNext This option if set to true, hides the next and previous links (as opposed to merely disabling them) when they aren’t applicable, as determined by the settings of the minDateand maxDate options. By default its value isfalse. isRTL This option when set to true, specifies the localizations as a right-to-left language. By default its value is false. maxDate This option sets the maximum selectable date for the control. This can be a Date instance, the number of days from today, or a string specifying an absolute or relative date. By default its value is null. minDate This option sets the minimum selectable date for the control. This can be a Date instance, the number of days from today, or a stringspecifying an absolute or relative date. By default its value is null. monthNames This option is a 12-element array providing the full month names with the 0th element representing January. Can be used to localize the control. By default its value is [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]. monthNamesShort This option specifies a 12-element array providing the short month names with the 0th element representing January. Can be used to localize the control. By default its value is [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]. navigationAsDateFormat This option if set to true, the navigation links for nextText, prevText, and currentText are passed through the$.datepicker.formatDate() function prior to display. This allows date formats to be supplied for those options that get replaced with the relevant values. By default its value is false. nextText This option specifies the text to replace the default caption of Next for the next month navigation link. ThemeRoller replaces this text with an icon. By default its value isNext. numberOfMonths This option specifies the number of months to show in the datepicker. By default its value is 1. onChangeMonthYear This option is a callback that’s invoked when the datepicker moves to a new month or year, with the selected year, month (1-based), and datepicker instance passed as parameters, and the function context is set to the input field element. By default its value is null. onClose This option is a callback invoked whenever a datepicker is closed, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null. onSelect This option is a callback invoked whenever a date is selected, passed the selected date as text (the empty string if there is no selection), and the datepicker instance, and the function context is set to the input field element. By default its value is null. prevText This option specifies the text to replace the default caption of Prev for the previous month navigation link. (Note that the ThemeRoller replaces this text with an icon). By default its value isPrevdefaultDatedayNamesMin. selectOtherMonths This option if set to true, days shown before or after the displayed month(s) are selectable. Such days aren’t displayed unless the showOtherMonths option is true. By default its value is false. shortYearCutoff This option if its a number, specifies a value between 0 and 99 years before which any 2-digit year values will be considered to belong to the previous century. If this option is a string, the value undergoes a numeric conversion and is added to the current year. The default is +10 which represents 10 years from the current year. showAnim This option specifies sets the name of the animation to be used to show and hide the datepicker. If specified, must be one of show (the default), fadeIn, slideDown, or any of the jQuery UI show/hide animations. By default its value is show. showButtonPanel This option if set to true, a button panel at the bottom of the datepicker is displayed, containing current and close buttons. The caption of these buttons can be provided via the currentText and closeText options. By default its value is false. showCurrentAtPos This option specifies the 0-based index, starting at the upper left, of where the month containing the current date should be placed within a multi-month display. By default its value is 0. showMonthAfterYear This option specifies if set to true, the positions of the month and year are reversed in the header of the datepicker. By default its value is false. showOn This option specifies when the datepicker should appear. The possible values are focus, button or both. By default its value is focus. showOptions This option provides a hash to be passed to the animation when a jQuery UI animation is specified for the showAnim option. By default its value is {}. showOtherMonths This option if set to true, dates before or after the first and last days of the current month are displayed. These dates aren't selectable unless the selectOtherMonths option is also set to true. By default its value is false. showWeek This option if set to true, the week number is displayed in a column to the left of the month display. The calculateWeek option can be used to alter the manner in which this value is determined. By default its value isfalse. stepMonths This option specifies specifies how many months to move when one of the month navigation controls is clicked. By default its value is 1. weekHeader This option specifies the text to display for the week number column, overriding the default value of Wk, when showWeek is true. By default its value is Wk. yearRange This option specifies limits on which years are displayed in the dropdown in the formfrom:to when changeYear is true. The values can be absolute or relative (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be used to make relative values offset from the selected year rather than the current year (example: c-2:c+3). By default its value is c-10:c+10. yearSuffix This option displays additional text after the year in the datepicker header. By default its value is "".
Following section will show you few working examples of datepicker functionality.Default functionality
The following example demonstrates a simple example of datepicker functionality passing no parameters to the datepicker() method .<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-1" ).datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-1"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date: Inline Datepicker
The following example demonstrates a simple example of inline datepicker functionality.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-2" ).datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
Enter Date: <div id="datepicker-2"></div>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date:
In the above example we use <div> element to get the inline date picker.Use of appendText, dateFormat, altField and altFormat
The following example shows the usage of three important options (a) appendText (b) dateFormat (c) altField and (d) altFormat in the datepicker function of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-3" ).datepicker({
appendText:"(yy-mm-dd)",
dateFormat:"yy-mm-dd",
altField: "#datepicker-4",
altFormat: "DD, d MM, yy"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-3"></p>
<p>Alternate Date: <input type="text" id="datepicker-4"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date: (yy-mm-dd)Alternate Date: In the above example you can see that the date formate for first input is set as yy-mm-dd. If you select some date from datepicker the same date is reflected in the second input field whose date format is set as "DD, d MM, yy".Use of beforeShowDay
The following example shows the usage of option beforeShowDay in the datepicker function of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-5" ).datepicker({
beforeShowDay : function (date)
{
var dayOfWeek = date.getDay ();
// 0 : Sunday, 1 : Monday, ...
if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
else return [true];
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-5"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date: In the above example sunday and saturday are disabled.Use of showOn, buttonImage, and buttonImageOnly
The following example shows the usage of three important options (a) showOn (b) buttonImage and (c) buttonImageOnly in the datepicker function of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-6" ).datepicker({
showOn:"button",
buttonImage: "/jqueryui/images/calendar-icon.png",
buttonImageOnly: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-6"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date: In the above example an icon is displayed which needs to b clicked to open the datepicker.Use of defaultDate, dayNamesMin, and duration
The following example shows the usage of three important options (a) dayNamesMin (b) dayNamesMin and (c) duration in the datepicker function of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-7" ).datepicker({
defaultDate:+9,
dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
duration: "slow"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-7"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date: In the above example the names of the days are changed usingdayNamesMin. You can also see a default date is set.Use of prevText, nextText, showOtherMonths and selectOtherMonths
The following example shows the usage of three important options (a) prevText (b) nextText (c) showOtherMonths and (d) selectOtherMonthsin the datepicker function of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-8" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: false
});
$( "#datepicker-9" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Start Date: <input type="text" id="datepicker-8"></p>
<p>Enter End Date: <input type="text" id="datepicker-9"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Start Date: Enter End Date: In the above example the prev and nect links have captions. If you click on the element, the datepicker opens. Now in the first datepicker, the other months dates are disable as selectOtherMonths is setfalse. In the second date picker for second input type, the selectOtherMonths is set totrue.Use of changeMonth, changeYear, and numberOfMonths
The following example shows the usage of three important options (a) changeMonth (b) changeYear and (c) numberOfMonths in the datepicker function of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-10" ).datepicker({
changeMonth:true,
changeYear:true,
numberOfMonths:[2,2]
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-10"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date: In the above example you can see dropdown menus for Month and Year fields. And we are dispalying 4 months in an array structure of [2,2].Use of showWeek, yearSuffix, and showAnim
The following example shows the usage of three important options (a) showWeek (b) yearSuffix and (c) showAnim in the datepicker function of JqueryUI.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-11" ).datepicker({
showWeek:true,
yearSuffix:"-CE",
showAnim: "slide"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-11"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:Enter Date: In the above example you can see that week numbers are displayed on the left side of datepicker as showWeek is set to true. The year is have a suffix of "-CE".$(selector, context).datepicker ("action", [params]) Method
The datepicker (action, params) method can perform an action on the calendar, such as such as selecting a new date. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.Basically, here actions are nothing but they are jQuery methods which we can use in the form of string.
Syntax
$(selector, context).datepicker ("action", [params]);
The following table lists the actions for this method:Action Description destroy() This action removes the datepicker functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments. dialog( date [, onSelect ] [, settings ] [, pos ] ) This action displays datepicker in a jQuery UI dialog box . getDate() This action returns the Date corresponding to the selected date. This method does not accept any arguments. hide() This action closes the previously opened date picker. This method does not accept any arguments. isDisabled() This action checks if the date picker funcitonality is disabled. This method does not accept any arguments. option( optionName ) This action retrieves the value currently associated with the specified optionName. option() This action gets an object containing key/value pairs representing the current datepicker options hash. This method does not accept any arguments. option( optionName, value ) This action sets the value of the datepicker option associated with the specified optionName. option( options ) This action sets one or more options for the datepicker. refresh() This action redraws the date picker, after having made some external modifications. This method does not accept any arguments. setDate( date ) This action sets the specified date as the current date of the datepicker. show() This action opens the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown. This method does not accept any arguments. widget() This action returns a jQuery object containing the datepicker.
Use of setDate() action
Now let us see an example using the actions from the above table. The following example demonstrates the use of actions setDate.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-12" ).datepicker();
$( "#datepicker-12" ).datepicker("setDate", "10w+1");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-12"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output:Enter Date: Use of show() action
The following example demonstrates the use of action show.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-13" ).datepicker();
$( "#datepicker-13" ).datepicker("show");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-13"></p>
</body>
</html>
Let's save above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must see the following output:Enter Date: 
Important Javascript and Jquery Code for web development:
(1)how to make multiple preview of single image:
http://phpdevelopmenttricks.blogspot.in/2017/01/how-to-make-multiple-preview-of-single.html
(2)javascript code for confirmation before delte and update:
http://phpdevelopmenttricks.blogspot.in/2016/12/javascript-code-for-confirmation-before.html
(3)how to pass image file with text to php using Ajax:
http://phpdevelopmenttricks.blogspot.in/2016/12/how-to-pass-image-file-with-text-to-php.html
(4)how to preview form entered value in text:
http://phpdevelopmenttricks.blogspot.in/2016/12/preview-form-entered-value-in-text.html
(5)Drag and Drop file upload :
http://phpdevelopmenttricks.blogspot.in/2016/12/drag-and-drop-file-upload-using.html
Demikianlah Artikel jQuery with PHP
Sekianlah artikel jQuery with PHP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel jQuery with PHP dengan alamat link https://othereffect.blogspot.com/2016/06/jquery-with-php.html
0 Response to "jQuery with PHP"
Post a Comment