Ajax Data Submit On Spring Applications

In this lesson My target is to demonstrate simple ajax data submitting to the backend in a Spring application. This will help you to develop more complex ajax data submitting as well.

In future I will tell you how to bring multiple data objects to the backend(Spring controller level) using Spring DTO Objects and Json.

Let’s begin with usual html

Customer Name: <input type=”text” name=” customerNameText” id=” customerNameText” />

Now Let’s add some jquery to this,

var customerNameValue = $("#customerNameText").val();

        jQuery.ajaxSettings.traditional = true;
        $.post('customerDataSave.htm',{customerName:customerNameValue},function(data){
            if(data == "SUCCESS"){
                //do anything when success data submitting              
            }
        });

Now front end work is done. Let’s move on to Spring application. I hope you are familiar with Spring applications. It uses MVC architecture. Below code is a good example for a controller of a Spring web application.

        @RequestMapping(value = "/customerDataSave")
        public @ResponseBody String customerDataSave(@RequestParam("customerName") String customerName,
        HttpServletRequest request){
            
            //do anything you like using customerName 
        
        }

This is a very simple application. Hope you all can understand. Write me or comment on this for more details.. Wish you success… Happy ajax…!!!

Create Dynamic Table On User Selection Using Jquey/JavaScript/CSS

This tutorial is based on javascript/jquery and html. Better you have some idea in jquery and javascript before start this lesson.

Assume that there is shop and you need to add multiple parts in your form.

Let’s start with the html. First add below code in html. This will get part name, no, old serial no and new serial no for multiple add.

<div id="inHousePartTableDiv" class="border_style" style="display: block;">
        <table width="100%">
                <tr>
                    <td>Part Name</td>
                    <td><input type="text" name="inHousePartName" id="inHousePartName" /></td>
                    <td>Part No</td>
                    <td><input type="text" name="inHousePartNo" id="inHousePartNo" /></td>
                    <td>Part Serial Old</td>
                    <td><input type="text" name="inHousePartSerialOld" id="inHousePartSerialOld" /></td>
                    <td>Part Serial New</td>
                    <td><input type="text" name="inHousePartSerialView" id="inHousePartSerialView" /></td>
                    <td><button onclick="addPartsToList()" class="submitButtonStyle">Add</button></td>
                </tr>
            </table>
            
            <table width="100%" id="partListTable">
                <thead>
                    <tr>
                        <th>Part Name</th>
                        <th>Part No</th>
                        <th>Part Serial Old</th>
                        <th>Part Serial New</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="5" align="center">No Data Available</td>
                    </tr>
                </tbody>
            </table>
    </div>

Now lets display the above html table with little bit cooler. Lets add css to this table. Hope you have a knowledge on css Im used here. Please write to me if there need any clarification.

Let’s add below css,

    #partListTable{
          border: 1px solid #DFDFDF;
          background-color: #F9F9F9;
          width: 100%;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          color: #333;
    }
    #partListTable th {
        border-top-color: white;
        border-bottom: 1px solid #DFDFDF;
        color: #555;
    }
    #partListTable th{
        text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
        font-weight: normal;
        padding: 7px 7px 8px;
        text-align: left;
        line-height: 1.3em;
        font-size: 14px;
    }
    #partListTable td{
        font-size: 12px;
        padding: 4px 7px 2px;
        vertical-align: top;
    }

Now let’s move to javascript and jquery stuffs. First we need to create objects on parts. Then we can add multiple object to this table. To do this we need a javascript array and object creation function. This mechanism also will help you to bring these data back to the back end of your system. We will move on to back end level development later. Below you can see the part object creation function and the object array.

var dynamic_part_array = new Array();

    //creating parts object
    function part(name, no, olds, news){        
        this.partName = name;
        this.partNo = no;
        this.partSerialOld = olds;
        this.partSerialNew = news;
    }

We don’t need duplicate part objects need to be added to our table. So we can make sure part no is unique and remove duplicates using part no matching. We could use below function to do that. We have searched our previously created array before entering a new part.

//check part in exist table
    function checkPartInExistTable(partNo ){
        for(var i=0; i<dynamic_part_array.length; i++){
            if(dynamic_part_array[i].partNo  == partNo ){
                return false;
            }
        }
        return true;
    }

Now we need another function to remove parts from our table. Otherwise our table become bit less user friendliness. It’s ok you cannot understand the flow of this lesson. Later we will add these functions together and make nice dynamic table. Now add below function to remove the added parts from the table

//remove part from the accessory list
    function removeFromPartList(tableRowID){
        for(var i=0; i<dynamic_part_array.length; i++){
            if(dynamic_part_array[i].partNo == tableRowID){
                dynamic_part_array.splice(i,1);
            }
        }
        printPartObjectArray(dynamic_part_array);
    }

Now add below function to print the object array we created beginning of the lesson. Im creating dynamic html and added to the html table we created previously.

//print parts
    function printPartObjectArray(objectArray){
        $('#partListTable tbody').html('');
        for(var i=0; i<objectArray.length; i++){
            var newRow = "<tr id='"+objectArray[i].partNo+"'><td>"+objectArray[i].partName+"</td><td>"+objectArray[i].partNo+"</td><td>"+objectArray[i].partSerialOld+"</td><td>"+objectArray[i].partSerialNew+"</td><td><button class=\"submitButtonStyle\" onclick=\"removeFromPartList('"+objectArray[i].partNo+"')\">remove</button></td>";

            $("#partListTable").append(newRow); 
        }
    }

Let create our main function. In this function we are capturing user entered values and validate before enter to the dynamic array. Then after validated checks the if the entered values are duplicated in the array. If not added to the array and print the array. At the end of the function we make sure to empty the user entered fields.
 Main function is,

//add products to a list
    function addPartsToList(){
        var partName = $("#inHousePartName").val();
        var partNo = $("#inHousePartNo").val();
        var partSerialOld = $("#inHousePartSerialOld").val();
        var partSerialNew = $("#inHousePartSerialView").val();

        //validate field
        if(partName == null || partName == ''){
            $("#inHousePartName").css("background-color", "#F8B4BD");
            return false;
        }else if(partNo == null || partNo == ''){
            $("#inHousePartNo").css("background-color", "#F8B4BD");
            return false;
        }else if(partSerialOld == null || partSerialOld == '' ){
            $("#inHousePartSerialOld").css("background-color", "#F8B4BD");
            return false;
        }else if(partSerialNew == null || partSerialNew == '' ){
            $("#inHousePartSerialView").css("background-color", "#F8B4BD");
            return false;
        }

        //check part in exist in the table
        if(!checkPartInExistTable(partNo)){
            return false;
        }
        
        //add part object to the dynamic_part_array
        dynamic_part_array.push(new part(partName, partNo, partSerialOld, partSerialNew));

        //print dynamic_part_array in the table
        printPartObjectArray(dynamic_part_array);

        //clear field value
        $("#inHousePartName").val("");$("#inHousePartNo").val("");$("#inHousePartSerialOld").val("");$("#inHousePartSerialView").val("");

    }

Above code is very flexible and easy to use in your development. Please contact me or add a comment on more clarifications. I will enter full working source code below.

Copy and paste below code in a text file and save it as html. run it on different browsers. It worked all the main browsers like firefox, chrome, IE , Opera.. I didn't test on other browsers.
Note: I have import jquery on a hosted url. Change it as you prefered.

Use it Change it.

Wish you success.

<html>
    <title>dynamic table</title>
    <header>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    
        <style ty>
            #partListTable{
            border: 1px solid #DFDFDF;
            background-color: #F9F9F9;
            width: 100%;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            color: #333;
            }
            #partListTable th {
                border-top-color: white;
                border-bottom: 1px solid #DFDFDF;
                color: #555;
            }
            #partListTable th{
                text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
                font-weight: normal;
                padding: 7px 7px 8px;
                text-align: left;
                line-height: 1.3em;
                font-size: 14px;
            }
            #partListTable td{
                font-size: 12px;
                padding: 4px 7px 2px;
                vertical-align: top;
            }

        </style>
        
        <script type="text/javascript">

            var dynamic_part_array = new Array();

                //creating parts object
                function part(name, no, olds, news){        
                    this.partName = name;
                    this.partNo = no;
                    this.partSerialOld = olds;
                    this.partSerialNew = news;
                }

                //add products to a list
                function addPartsToList(){
                    var partName = $("#inHousePartName").val();
                    var partNo = $("#inHousePartNo").val();
                    var partSerialOld = $("#inHousePartSerialOld").val();
                    var partSerialNew = $("#inHousePartSerialView").val();

                    //validate field
                    if(partName == null || partName == ''){
                        $("#inHousePartName").css("background-color", "#F8B4BD");
                        return false;
                    }else if(partNo == null || partNo == ''){
                        $("#inHousePartNo").css("background-color", "#F8B4BD");
                        return false;
                    }else if(partSerialOld == null || partSerialOld == '' ){
                        $("#inHousePartSerialOld").css("background-color", "#F8B4BD");
                        return false;
                    }else if(partSerialNew == null || partSerialNew == '' ){
                        $("#inHousePartSerialView").css("background-color", "#F8B4BD");
                        return false;
                    }

                    //check part in exist in the table
                    if(!checkPartInExistTable(partNo)){
                        return false;
                    }
                    
                    //add part object to the dynamic_part_array
                    dynamic_part_array.push(new part(partName, partNo, partSerialOld, partSerialNew));

                    //print dynamic_part_array in the table
                    printPartObjectArray(dynamic_part_array);

                    //clear field value
                    $("#inHousePartName").val("");$("#inHousePartNo").val("");$("#inHousePartSerialOld").val("");$("#inHousePartSerialView").val("");

                }

                //print parts
                function printPartObjectArray(objectArray){
                    $('#partListTable tbody').html('');
                    for(var i=0; i<objectArray.length; i++){
                        var newRow = "<tr id='"+objectArray[i].partNo+"'><td>"+objectArray[i].partName+"</td><td>"+objectArray[i].partNo+"</td><td>"+objectArray[i].partSerialOld+"</td><td>"+objectArray[i].partSerialNew+"</td><td><button class=\"submitButtonStyle\" onclick=\"removeFromPartList('"+objectArray[i].partNo+"')\">remove</button></td>";
                        $("#partListTable").append(newRow); 
                    }
                }

                //remove part from the accessory list
                function removeFromPartList(tableRowID){
                    for(var i=0; i<dynamic_part_array.length; i++){
                        if(dynamic_part_array[i].partNo == tableRowID){
                            dynamic_part_array.splice(i,1);
                        }
                    }
                    printPartObjectArray(dynamic_part_array);
                }

                //check part in exist table
                function checkPartInExistTable(partNo ){
                    for(var i=0; i<dynamic_part_array.length; i++){
                        if(dynamic_part_array[i].partNo  == partNo ){
                            return false;
                        }
                    }
                    return true;
                }

            </script>
    </header>
    <body>
    
    <div id="inHousePartTableDiv" class="border_style" style="display: block;">
        <table width="100%">
                <tr>
                    <td>Part Name</td>
                    <td><input type="text" name="inHousePartName" id="inHousePartName" /></td>
                    <td>Part No</td>
                    <td><input type="text" name="inHousePartNo" id="inHousePartNo" /></td>
                    <td>Part Serial Old</td>
                    <td><input type="text" name="inHousePartSerialOld" id="inHousePartSerialOld" /></td>
                    <td>Part Serial New</td>
                    <td><input type="text" name="inHousePartSerialView" id="inHousePartSerialView" /></td>
                    <td><button onclick="addPartsToList()" class="submitButtonStyle">Add</button></td>
                </tr>
            </table>
            
            <table width="100%" id="partListTable">
                <thead>
                    <tr>
                        <th>Part Name</th>
                        <th>Part No</th>
                        <th>Part Serial Old</th>
                        <th>Part Serial New</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="5" align="center">No Data Available</td>
                    </tr>
                </tbody>
            </table>
    </div>
    
    </body>
</html>