I would like to make an application on Jquery and share with you guys. So, in 2006, Jquery's started to be developed as an open source project. When you see "The write less, do more", you should understand that is Jquery! There is a powerful library of javascript, that's why we can do good jobs with the less code on Jquery.
If you want to see more information, you can visit the official web site of jquery. You can also find documentation and examples on it. That is here!
You must call as include jquery library on your web site, for the successful operation of your jquery code. You can find the library on Jquery Web Site easily.
The point I wanted to show you here is an ajax application on jquery. However, I am thinkin' that I should show you couple simple examples, before starting to applicaton.
$('#divID').slideUp(1000); //Sliding the div up
$('#divID').slideDown(1000); //Sliding the div down
$('#divID').slideToggle(1000); //Sliding the div up and down
$('#divID').FadeToggle(1000); //Displaying or hiding the div
$('#divID').html(“Hello World!”); //Printing something as HTML tags
$(‘a’).click(function() {
$("#divID").animate({left:'+=100px'}, 2000); //when you click the mouse, do something
});
As you have seen, when you code jquery, you can control the web site all the way.
The application I'll show you, is an AUTO SEARCH COMPLETE!
This is the text field we'll use when searching.
This is the div layer will open during our php script works.
// JavaScript Document
$(document).ready(function() {
$('#TextBox').keyup(function() {
document.getElementById("result").style.display="block";
var variable=$('#TextBox').val();
$.ajax({
url:"data.php",
data:"TextBox="+variable,
cache:false,
async:false,
method:'post',
success:function(kitchen) {
var message="Loading..";
$('#result').html(message).load();
}
});
});
});
As you have seen, when keyup() function works, the system is getting data from data.php page. data.php page is shown below
include("database.php");
$data=$_REQUEST["TextBox"];
if(!$data==0) {
$MyData=mysql_query("select * from names where name like '%$data%'");
if(mysql_num_rows($MyData)<"1") {
echo "There is nothing about it!";
} else {
echo "Languages!
";
while($MyList=mysql_fetch_array($MyData)) {
echo $MyList["name"]."\n";
}
}
} else {
echo "Please, start to write something..";
}
Today, we made a jquery search auto complete application. If you visit and see this application, just click demo page!
See you guys next article!
