Here i have designed a very simple application to fetch data from mysql server with php, through Ajax. In this application i have used two image input component for previous and next functionality and a table to display the data. Here is the preview of the application.
On clicking the next button, next set of data with the specified limit is fetched from the database through Ajax and displayed in the table, vice versa for the previous button. The limit parameter can be changed at any time by changing the limit value.


You can download the application:
In db.php file, you can change the limit of data to fetch from the server. The design goes in the index.php file and the core of the application lies in the prevnext.js file.

On clicking the next button, the ajax function is called through this JQuery function

$("#next").click(function(){
  var current = parseInt($("#currenthid").val()) + limit;
  var data="current="+current;
  $.ajax({
         type:"POST",
         url:"ajaxpost.php",
         data:data,
         cache:false,
         success:function(html){
                $("#showtable").html(html);
                $("#currenthid").val(current);
                checkVisible();
          }
    });
});

It sends the index of the next set of data to fetch, to the ajax function. On success the data in the view is updated and the index of current data set is updated. The checkVisible function is to ensure the next previous functionality. i.e, the Next button will be disables on reaching the last data set and the previous button will be disable on reaching the first data set.

  function checkVisible(){
    var current = parseInt($("#currenthid").val());
    var total = parseInt($("#totalhid").val());
    $("#previous").css('display','block');
    $("#next").css('display','block');
    if(current <>= total) {
        $("#next").css('display','none');
    }
}

In the ajaxpost file the MySql database fetch is executed.

$limitquery = "select id,name,category,price,discount from previousnext limit ".(int)$_REQUEST['current'].",".$limit;
$result = mysql_query($limitquery, $dbHandle);

The data send from sql server is parsed in the php file and send to the client.

while($row = mysql_fetch_array($result)){
    echo "
    ".$row['id']."
    ".$row['name']."
    ".$row['category']."
    ".$row['price']."
    ".$row['discount']."
    ";
}

In the next post i have planned to expand this application to have pagination. Donot forget to comment on my ideas.

Today we are going to create a photoslider with commenting system,














Like orkut we can also create a photoviewer with commenting system with animation effects.




So try this and you can also use this example.





Enjoy.

In some way we all tried to work with menu's in Web pages, and here is the simple example for horizontal Menu.

using Jquery we can easily build this nice menubar.



In coming posts we will going to learn jquery and its advanced concepts.


Here is the example and its Source.