javascript functions

demoapp.js

function onEmployeeClick(vEmpId) {
            
            $.ajax({
                type: "GET",
                url: "empdetail",
                data: {
                  // Here we are passing the employee Id as input to the view in GET 
                    'EMP_ID': vEmpId,
                 },
                success: function (data) {
                    
                    var resultSet = $.parseJSON(data);
                    // Dynamically generating html . Not a best practise though
                    var empTable = " <div class=\"row\"><div class=\"span6\">Employee Id</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpId\" value=\"" + resultSet['EMPLOYEE_ID'] + "\" readonly=\"true\"/></div></div>" +
                                   " <div class=\"row\"><div class=\"span6\">Employee Name</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpName\"  value=\"" + resultSet['EMPLOYEE_NAME'] + "\" readonly=\"true\"/></div></div>" +
                                   " <div class=\"row\"><div class=\"span6\">Employee DOB</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpDOB\"  value=\"" + resultSet['EMPLOYEE_DOB'] + "\" readonly=\"true\"/></div></div>" +
                                   " <div class=\"row\"><div class=\"span6\">Employee Salary</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpSalary\"  value=\"" + resultSet['EMPLOYEE_SALARY'] + "\" readonly=\"true\"/></div></div>"
                    
                    // Here we are trying to get the view generated for the employee detail we just go via success function
                    $("#divDetail").html(empTable);
                                        
                },
                
                error: function () {
                    alert("Error");
                }
            });

           
        }

function onEmployeeSearch() {
            
            vEmployeeId = $("input[name=tbEmpIdSearch]").val();
            vEmployeeName = $("input[name=tEmpNameSearch]").val();
            
            $.ajax({
                type: "GET",
                url: "empsearch",
                data: {
                    
                    'EMP_ID': vEmployeeId,
                    'EMP_NAME': vEmployeeName,
                },
                success: function (data) {

                    var resultSet = $.parseJSON(data);
                    var empTable = "";
                    // If there is only one employee the layout is different as we directly show the selected employee
                    if (vEmployeeId != "") {

                        empTable = " <div class=\"row\"><div class=\"span6\">Employee Id</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpId\" value=\"" + resultSet['EMPLOYEE_ID'] + "\" readonly=\"true\"/></div></div>" +
                                       " <div class=\"row\"><div class=\"span6\">Employee Name</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpName\"  value=\"" + resultSet['EMPLOYEE_NAME'] + "\" readonly=\"true\"/></div></div>" +
                                       " <div class=\"row\"><div class=\"span6\">Employee DOB</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpDOB\"  value=\"" + resultSet['EMPLOYEE_DOB'] + "\" readonly=\"true\"/></div></div>" +
                                       " <div class=\"row\"><div class=\"span6\">Employee Salary</div><div class=\"span6\"> <input type=\"text\" name=\"tbEmpSalary\"  value=\"" + resultSet['EMPLOYEE_SALARY'] + "\" readonly=\"true\"/></div></div>"
                       
                    }
                    // We have list of employees in case of searching only by name 
                    else {
                        empTable = "<div class=\"row\"><div class=\"span4\"><b>Id</b> </div>" +
                            " <div class=\"span3\"><b>DOB</b></div>" +
                            " <div class=\"span3\"><b>Salary</b></div></div>";
                        
                        for (i = 0; i < resultSet.length; i++) {
                            empTable = empTable + "<div class=\"row\"><div class=\"span4\"><a type=\"text\" name=\"tbEmpId\" href=\"#\" onclick=\"onEmployeeClick(" + resultSet[i]['EMPLOYEE_ID'] + ")\">" + resultSet[i]['EMPLOYEE_ID'] + "</a></div>" +
                                       " <div class=\"span3\"><input type=\"text\" name=\"tbEmpDOB\"  value=\"" + resultSet[i]['EMPLOYEE_DOB'] + "\" readonly=\"true\"/></div>" +
                                       " <div class=\"span3\"><input type=\"text\" name=\"tbEmpSalary\"  value=\"" + resultSet[i]['EMPLOYEE_SALARY'] + "\" readonly=\"true\"/></div></div>";
                        }

                       // empTable = empTableConstant + empTable;
                    }
                    $("#divDetail").html(empTable);
                    

                },

                error: function () {
                    alert("Error");
                }
            });

        }