Skip to main content

Progress Button Using Ajax, Javascript And Jquery

Here i brought an all new tutorial to build a button with progress indication. It looks quite impressive and takes few lines of codes. We had used Ajax, Jquery and very important Javascript code. You just need to include "jquery.ajaxbuttonindicator.js" and  "jquery.min.js" files in the head section. They are script type.
A very important Ajax function is used in the whole code named ajaxbuttonindicator( );
All magic is performed in the Javascript. Only this Ajax function is called on the click of button. Value in the text-field goes to the php page and it return the string and displays on the HTML page.

Content Used :

  • Ajax
  • Javascript
  • Jquery  
  • A Simple Php Code 

    Javascript Code:

    $(document).ready(function() {
                $('button').ajaxbuttonindicator();
            });
            
            function send_request(a) {
                yourname = $('#i_name').val();
                $.post("backend.php", {name: yourname, action: a}, 
                    function(response) {
                        // Do something with the response.
                        $('#ajax_response').html(response.message);
                    }, 'json');
            }
     

    Before clicking:

     After Clicking:

    After Completion:

    PHP Code:


    200, 'message'=>'Success: '.$_POST['name'].''));
    			break;
    		case 'error':
    			header("HTTP/1.0 404 Not Found");
    			echo json_encode(array('code'=>200, 'message'=>'Error: '.$_POST['name'].''));
    			break;
    		default:
    			echo json_encode(array('code'=>200, 'message'=>'Default: '.$_POST['name'].''));
    	}
    	?>
    

    Note:

    If the timint between submition and completion is too fast put the time as per your requirment. Just as
    sleep(2); // 2 sec for completion the request.
    Please give your feedback for this post. Hope you will like it.
    
    

Comments

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Windows 7 transformation pack for xp

As the windows 7 launched after that there are lot of screenshot available on the internet, There developer designed the transformation packs for xp to make it better lo0king like windows 7. There are some transformation packs for your xp. Download Vienna 2.5 – Windows 7 Transformation Pack (Mirror) Downloa d HFN Windows 7 Transformation Pack Download Windows 7 Transformation pack – NSFormation (Mirror) Download Vienna Transformation Pack v1