Friday, March 20, 2015

How to place text inside a circle using css

We often require some text to be placed inside a circle. I am gonna show you how to do it in very simple steps.

Monday, March 16, 2015

Centering a div inside a div - Responsive Design

When I was creating a simple html theme, I wanted to create a basic page that will be good for both desktops and mobiles. So, I created this simple div structure to put my contents in the center of the screen.

Wednesday, March 4, 2015

A Simple Jquery ajax example - HTML form submission made easy


You might be wondering about using jquery ajax method. Here is a simple Jquery ajax post example that explains easy way to send data to server and fetch data from server asynchronously.

Jquery ajax tutorial for beginners


1. Include Jquery in your html header 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

2. Create a html form to submit sample data asynchronously 
    <form id ="myForm">
      ENTER YOUR NAME   <input id ="myInput" name="myInput"/>
      <button type="submit" id="submit">SUBMIT</button>
   </form>

3. Create jquery method $.ajax to submit data to server

     In your javascript add function like this
      $.ajax();   // primary method
     It takes some arguments like
        a) Jquery ajax action-type (type), eg: post, get etc..
        b) file to call (url ),
        c) data to send (data),
        d) what to do upon success ajax call (success)
        e) what to do upon server error (error)

      So, adding up the arguments, it finally looks like this
      $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data) {
                      // alert(data);
                            } ,
              error : function(data) {
                   // alert('Report Server Error');
                         }
           }
         );
    
4. Call ajax on clicking the submit button 

   So, our jquery ajax method is ready to send data to server.
   NOTE : $("#myForm").serialize() method will send all the form elements to server.

      Create handler to submit button 
      $("#submit").click(function () {
                // add ajax function here.
        });
      It should look like 

      $("#submit").click(function () {
           $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data) {
                       // alert(data);
                            } ,
              error : function(data) {
                       // alert('Report Server Error');
                         }
           }
         );
        });
 
5. Handling form elements on the server side

  On your server side PHP or servlet get the form elements

   In our example we passed our server file as "/path/to/my.php". Jquery ajax will send form to that location.

 if it is PHP, use
                     $_POST["myInput"];
 if it is jsp/servlet use
                     request.getParameter("myInput");

 do what ever you want on the server side and you can send signal saying either it is good or bad or you can throw any exception.

   Throwing exception will be treated as error by $.ajax();

So, what I have done in my example php file is
       echo $_POST["myInput"];

6. Once it is success (Jquery ajax success)
    

  It is all happy on the server side, the $.ajax parameter success function is invoked.

  There is another important thing is to block default form submission.

  Because, html form is submitted to server when you click on submit button.
   In order to avoid such form submissions, you can say event.preventDefault(); Use this on button click

     So, our final form submission using jquery will look like this.
  $("#submit").click(function (e) {
           e.preventDefault();
           $.ajax(
           {
             type: "post",
             url :   "/path/to/my.php",
             data : $("#myForm").serialize();
             success : function(data){
                      // alert(data);
                            } ,
              error : function(data) {
                     // alert('Report Server Error');
                         }
           }
         );
        });