Question Background:
I pass to my MVC view a ViewBag object which contain a list of items. These items are then added through the use of a For loop to a Javascript method called 'AddRows' which creates and adds a new HTML row to a table in the view.
The issue:
This code has worked before but I have run into an issue where I'm getting the following error:
The code:
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
}
<script type="text/javascript">
var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {
var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
var selectors = '<input id="demo1" class="touchSpin" type="text" value="' + productQty + '" name="demo1">';
var $html = $('<tr class="item">' +
'<td class="prodId" style="display:none;">' + productId + '</td>' +
'<td class="prodImage hidden-xs">' + image + '</td>' +
'<td class="prodName">' + productName + '</td>' +
'<td class="prodBrand">' + productBrand + '</td>' +
'<td class="prodPrice"> £' + productPrice + '</td>' +
'<td class="prodQty TableCell">' + selectors + '</td>' +
'<td>' + button + '</td>' +
'</tr>');
$html.find("input[name='demo1']").TouchSpin({
min: 1,
max: 100,
step: 1,
});
$('#Table1 > tbody:last').append($html);
};
</script>
What I have tried so far:
Tried changing the single quote around each property of the item in the list from a single quote to a double. This will sort the string literal issue but then creates an error saying that the AddRows methed cannot be found.
Instead of
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
}
Use this
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
<text>
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
</text>
}
the <text> element tell Razor that the code shouldn't be considered as C#
Relocate this js variable declaration block inside script and force Razor interprite it as text with <text> tag. Like this:
<script type="text/javascript">
#foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
<text>
var cartItemId = '#cartItem.CartItemId';
var cartImage = '#cartItem.CartItemImage';
var cartItemName = '#cartItem.CartItemName';
var cartBrand = '#cartItem.CartItemBrand';
var cartItemPrice = '#cartItem.CartItemPrice';
var cartItemCartItemQty = '#cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
</text>
}
var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {
var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
var selectors = '<input id="demo1" class="touchSpin" type="text" value="' + productQty + '" name="demo1">';
var $html = $('<tr class="item">' +
'<td class="prodId" style="display:none;">' + productId + '</td>' +
'<td class="prodImage hidden-xs">' + image + '</td>' +
'<td class="prodName">' + productName + '</td>' +
'<td class="prodBrand">' + productBrand + '</td>' +
'<td class="prodPrice"> £' + productPrice + '</td>' +
'<td class="prodQty TableCell">' + selectors + '</td>' +
'<td>' + button + '</td>' +
'</tr>');
$html.find("input[name='demo1']").TouchSpin({
min: 1,
max: 100,
step: 1,
});
$('#Table1 > tbody:last').append($html);
};
</script>
Related
I have a popup modal like this one.
When I click 'ADD' button, all the data from popup's table is shown at the table of the parent's. Like this one.
The problem is that I don't want to show the plus sign "+", if there is no data in textbox2s.
Here is the code at popup.js
function add_to_prent_table(){
var popupTable = [];
var i = 0;
$('#testing > tbody > tr').each(function () {
popupTable[i] = [
$(this).find("#test_number").val(),
$(this).find("#type_1").val(),
$(this).find("#type_2").val(),
$(this).find("#place_1").val(),
$(this).find("#place_2").val(),
];
i++;
var newRow = '<tr>'+
'<td id ="td_center">'+
$(this).find("#test_piece_number").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#type_1").val() + ' + ' +
$(this).find("#type_2").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#place_1").val() + ' + ' +
$(this).find("#place_2").val() +
'</td>'+
'</tr>';
$('#testing_parent tbody').append(newRow);
});
}
How can I fix this?
It's messy but you can replace the first ' + ' with this:
$(this).find("#type_2").val() ? ' + ' : ''
And replace the second ' + ' with
$(this).find("#place_2").val() ? ' + ' : ''
Basically you're looking to see if #type_2 and #place_2 have values. If they do, add a ' + '. If not, add nothing.
Try this;
function add_to_prent_table() {
var popupTable = [];
var i = 0;
$('#testing > tbody > tr').each(function () {
var testNumber = $(this).find("#test_number").val();
var firstType = $(this).find("#type_1").val();
var secondType = $(this).find("#type_2").val();
var firstPlace = $(this).find("#place_1").val();
var secondPlace = $(this).find("#place_2").val();
popupTable[i] = [
testNumber,
firstType,
secondType,
firstPlace,
secondPlace,
];
i++;
var newRow = '<tr>' +
'<td id ="td_center">' +
$(this).find("#test_piece_number").val() +
'</td>' +
'<td id ="td_center">' +
firstType + secondType ? (' + ' + secondType) : '' +
'</td>' +
'<td id ="td_center">' +
firstPlace + secondPlace ? (' + ' + secondPlace) : '' +
'</td>' +
'</tr>';
$('#testing_parent tbody').append(newRow);
});
}
Simply you can add condition before adding plus sign like below,
var newRow = '<tr>'+
'<td id ="td_center">'+
$(this).find("#test_piece_number").val() +
'</td>'+
'<td id ="td_center">'+
$(this).find("#type_1").val()
if($(this).find("#type_2").val() != "")
{
' + ' + $(this).find("#type_2").val()
}
'</td>'+
'<td id ="td_center">'+
$(this).find("#place_1").val()
if($(this).find("#place_2").val() != "")
{
' + ' + $(this).find("#place_2").val()
}
'</td>'+
'</tr>';
I'm trying to toggle between the innerHTML of a table data cell from an AJAX output from onclick row event:
JS:
...
var thisrownumber = 0;
var detailednote = '';
var simplifiednote = '';
htmlStr += '<table>';
$.each(data, function(k, v){
thisrownumber ++;
detailednote = v.note_ids;
simplifiednote = '<img class="See" src="~.png" alt="See" style="width:20px; height:20px;"> See';
htmlStr += '<tr onclick="shrow(' + thisrownumber + ',' + detailednote + ',' + simplifiednote + ')">'
+ '<td>' + v.date + '</td>'
+ '<td>' + v.r + '</td>'
+ '<td>' + v.f + ': ' + v.s + '</td>'
+ '<td>' + '<span id="span_note' + thisrownumber + '">' + simplifiednote + '</span>'
+ '</td>'
+ '</tr>';
});
htmlStr += '</table>';
$("#content").html(htmlStr);
} // function close
function shrow(x,y,z){
var lang3 = "span_note";
var shrow = x;
var span_note = lang3.concat(x);
if(document.getElementById(span_note).innerHTML == y){
document.getElementById(span_note).innerHTML = z;
}
if(document.getElementById(span_note).innerHTML == z){
document.getElementById(span_note).innerHTML = y;
}
}
HTML:
<div id="content"></div>
Getting error:
Uncaught SyntaxError: missing ) after argument list
I have to make a dropdown of activities that a user can delete. The activities are held in a table which I'm trying to iterate over but I feel like I am almost there. I use Bootstrap 3 and jQuery. I'm still new to jQuery.
Here is the HTML I use to create a modal window, so I can put the control in there:
<div id="delete-activity-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1>Delete Activity</h1>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon" id="add-addon-styling">Choose Activity</span>
<select class="form-control" id="delete-activity-modal-dropdown">
<!-- Options Added via content-controller.js -->
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="Choose the activity from the drop-down menu you want to delete.">
<b>?</b>
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As you see above, that's what I get out. I should have had 6 results and they should have an activity ID and a Name but they come back as undefined so I'm probably doing it wrong :P
Here is the function I use to make the dropdown content:
function CreateActivityDeleteDropdown() {
var dropdown = $('#delete-activity-modal-dropdown');
$('#activityTable').each(function() {
var activityId = $(this).attr("#activityId");
var activityName = $(this).attr("#activityName");
var dropdownDescription = activityId + " | " + activityName;
var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>';
$(dropdown).append(dropdownElement);
});
}
This function is only called when you press a button, so the table does exist when I do this. The table that I need to look through is dynamically added when the website loads like this:
function GetActivityAbstracts() {
$.getJSON(, function (testData) {
var object = $.parseJSON(testData);
var activityTable = '<tbody id="activityTable"></tbody>';
$.each(object, function () {
var activityId = this['ActivityId'];
var activityName = this['ActivityName'];
var activityResponsible = this['Responsible'];
var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = this['EstimatedStart'];
var activityEstimatedEnd = this['EstimatedEnd'];
var activityStatus = this['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
var tableElement =
'<tr>' +
'<td id = "activityId" style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td id = "activityName" style = "vertical-align: middle;">'
+ activityName + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
activityTable += tableElement;
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"').tooltip();
});
}
The result:
Some JSON Sample data:
"{\"1\":{\"ActivityId\":1,\"ActivityName\":\"Noget Med Penge\",\"Responsible\":\"Name\",\"EstimatedSavings\":9001.0,\"EstimatedStart\":\"19-11-2015\",\"EstimatedEnd\":\"01-01-2016\",\"Status\":\"NA\"},\"2\":{\"ActivityId\":2,\"ActivityName\":\"We need to shut down the bluetooth RAM hard drive!\",\"Responsible\":\"Name\",\"EstimatedSavings\":24589.0,\"EstimatedStart\":\"23-05-2014\",\"EstimatedEnd\":\"10-12-2015\",\"Status\":\"ON_TRACK\"},\"3\":{\"ActivityId\":3,\"ActivityName\":\"We need to encode the wireless RAM interface!\",\"Responsible\":\"Name\",\"EstimatedSavings\":874561.0,\"EstimatedStart\":\"11-04-1970\",\"EstimatedEnd\":\"22-01-2016\",\"Status\":\"DONE\"},\"4\":{\"ActivityId\":4,\"ActivityName\":\"We need to reboot the open-source PNG program!\",\"Responsible\":\"Name\",\"EstimatedSavings\":812654.0,\"EstimatedStart\":\"18-08-2000\",\"EstimatedEnd\":\"19-04-2016\",\"Status\":\"ISSUE\"},\"5\":{\"ActivityId\":5,\"ActivityName\":\"We need to program
the mobile CPU bus!\",\"Responsible\":\"Name\",\"EstimatedSavings\":-47998.0,\"EstimatedStart\":\"29-07-1982\",\"EstimatedEnd\":\"22-05-2016\",\"Status\":\"BEHIND\"},\"6\":{\"ActivityId\":6,\"ActivityName\":\"We need to network the optical GB port!\",\"Responsible\":\"Name\",\"EstimatedSavings\":74511.0,\"EstimatedStart\":\"23-10-1992\",\"EstimatedEnd\":\"27-09-2016\",\"Status\":\"ABANDONED\"}}"
First of all GetActivityAbstracts will create duplicate ids as I said. In the above code <td id = "activityId" and <td id = "activityName" inside $.each will be duplicate. Also use .find instead of .attr to find the elements inside each tr So you either change id to class or add index from .each to generate unique ids.
function GetActivityAbstracts() {
$.getJSON(, function (testData) {
var object = $.parseJSON(testData);
var activityTable = '<tbody id="activityTable"></tbody>';
$.each(object, function (index,value) {
//index here is used to generate unique ids
var activityId = this['ActivityId'];
var activityName = this['ActivityName'];
var activityResponsible = this['Responsible'];
var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = this['EstimatedStart'];
var activityEstimatedEnd = this['EstimatedEnd'];
var activityStatus = this['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
var tableElement =
'<tr>' +
'<td id = "activityId_'+index+'" style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td id = "activityName_'+index+'" style = "vertical-align: middle;">'
+ activityName + '</td>' +
//Add index for ids here
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
activityTable += tableElement;
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"').tooltip();
});
}
Now once you have this unique elements generated you can loop through each trs as below:
function CreateActivityDeleteDropdown() {
var dropdown = $('#delete-activity-modal-dropdown');
$('tbody#activityTable tr').each(function() {
var activityId = $(this).find("td [id^='activityId']").text();
//get value from the td whose id starts with activityId
var activityName = $(this).find("td [id^='activityName']").text();
//get value from the td whose id start with activityName
var dropdownDescription = activityId + " | " + activityName;
var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>';
$(dropdown).append(dropdownElement);
});
}
Now if you change td's id to class as below:
function GetActivityAbstracts() {
$.getJSON(, function (testData) {
var object = $.parseJSON(testData);
var activityTable = '<tbody id="activityTable"></tbody>';
$.each(object, function () {
var activityId = this['ActivityId'];
var activityName = this['ActivityName'];
var activityResponsible = this['Responsible'];
var activityEstimatedSavings = parseFloat(this['EstimatedSavings']).toFixed(2);
var activityEstimatedStart = this['EstimatedStart'];
var activityEstimatedEnd = this['EstimatedEnd'];
var activityStatus = this['Status'];
// TODO: Make more user-friendly Status Descriptions instead of C# enum values.
var tableElement =
'<tr>' +
'<td class = "activityId" style = "vertical-align: middle; align: center;">'
+ activityId + '</td>' +
'<td style = "vertical-align: middle;">' +
'<div class="status-circle" data-toggle="tooltip" data-placement="right"' +
'title=" ' + activityStatus + '" style="background-color:' +
GetColumnColor(activityStatus) + ';"></div></td>' +
'<td class= "activityName" style = "vertical-align: middle;">'
+ activityName + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityResponsible + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedSavings + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedStart + '</td>' +
'<td style = "vertical-align: middle;">'
+ activityEstimatedEnd + '</td>' +
'</tr>';
activityTable += tableElement;
});
$('#current-data-table').append(activityTable);
/* This call is necessary because the table is added dynamically */
$('[data-toggle="tooltip"').tooltip();
});
}
You can just use .find again to get respective td with its class as below:
function CreateActivityDeleteDropdown() {
var dropdown = $('#delete-activity-modal-dropdown');
$('#activityTable tr td').each(function() {
var activityId = $(this).find(".activityId").text();
var activityName = $(this).find(".activityName").text();
//getting using class
var dropdownDescription = activityId + " | " + activityName;
var dropdownElement = '<option value="' + activityId + '">' + dropdownDescription + '</option>';
$(dropdown).append(dropdownElement);
});
}
Update
Some more problems identified while creating DEMO
You were having var activityTable = '<tbody id="activityTable"></tbody>'; and then at the end, once you create a row you use to do activityTable += tableElement;. Since 'activityTablevariable already hadactivityTable +=used to append as...'which is why a newtbodywas getting created when appended toDOM. So either make ittbody` object by doing as below:
var activityTable = $('<tbody id="activityTable"></tbody>');
and then you can use .append to append the tr inside the created tbody as below:
$(activityTable).append(tableElement);
instead of activityTable += tableElement;
OR
If you prefer to keep your way then just append </tbody> once all the rows have been added as below:
var activityTable = '<tbody id="activityTable">'; //remove from here
and after $.each finishes you can just do
activityTable+="</table>";
Edit (example):
HTML:
<table>
<thead>
<th>
Activity ID
</th>
<th>
Status
</th>
<th>
Activity name
</th>
</thead>
<tbody id="activityTable">
</tbody>
</table>
<select>
</select>
JS:
$(document).ready(function(){
var JSONData = [[1,1,"name1"], [2,1,"name2"]];
var html = "";
var count = 0;
$.each(JSONData, function(){
html += "<tr>";
html += "<td data-type='id'>" + JSONData[count][0] + "</td>";
html += "<td data-type='status'>" + JSONData[count][1] + "</td>";
html += "<td data-type='name'>" + JSONData[count][2] + "</td>";
html += "</tr>";
count++;
});
var createOption;
$("#activityTable").html(html);
$("select").html("");
$("#activityTable tr").each(function(){
var data_id = $(this).find("td[data-type=id]").html();
var data_name = $(this).find("td[data-type=name]").html();
createOption = "<option>" + data_id + " | " + data_name;
$("select").append(createOption);
});
});
Output:
Demo: Click
My table is created with dynamic OO javascript and now I have to make pagination for rows - something like 5 rows(users) on the page :-? Also I need to display the pagination numbers when there are more than 5 users ...
This is the pice of code that make the display of the table :
(function (window) {
function ListView(store) {
var me = this;
this.store = store;
this.defaultTemplate = '<tr data-id = "{{id}}">' +
'<td><button class = "edit btna" type="button"></button>' +
'<button class = "delete btna" type="button" ></button></td>' +
'<td class = "userCol">' + '{{username}}' + '</td>' +
'<td class = "levelCol">' + '{{level}}' + '</td>' +
'<td class = "regCol">' + "<img src='img/" + '{{regstatus}}' + "_registered.png'>" + '</td>' +
'<td class = "dateCol">' + '{{regdate}}' + '</td>' +
'</tr>';
$(this.store).on("storeLoad", function () {
var data = this.getUsers();
me.show(data);
});
}
ListView.prototype.show = function (data) {
var i, l;
var view = '';
for (i = 0, l = data.length; i < l; i++) {
var template = this.defaultTemplate;
template = template.replace('{{id}}', data[i].id);
template = template.replace('{{username}}', data[i].username);
template = template.replace('{{level}}', data[i].level);
template = template.replace('{{regstatus}}', data[i].regstatus);
template = template.replace('{{regdate}}', data[i].regdate);
view = view + template;
}
console.log(data);
$('#userList').html(view);
};
// Export to window
window.app.ListView = ListView;
})(window);
Any ideeas ?
In the below i have a a div with employee names and ahave to assign a grade for them,my question is that i have get the empid for all the selected values in getgrade_values function.Using jquery how to get the ids of the drop down box with its value where the values are selected when on click of evaluate function
function getgrade_values(empid)
{
var ele='<select id="'+ empid +'" name="emp" style="width:40px;margin:0px 0pt;" >';
ele += '<option value=""></option>';
ele += '<option value="A">A</option>';
ele += '<option value="B">B</option>';
ele += '<option value="C">C</option>';
ele += '<option value="D">D</option>';
ele += '<option value="E">E</option>';
ele += '<option value="F">F</option>';
ele += '</select>';
return ele;
}
function sendparams(data)
{
if(data.status == 1)
{
var ele='<tr id="std"><td><b>Evaluate:</b></label> </td></tr>';
for(var l=0;l<data.emparr.length;l++)
{
ele += '<tr><td><div id="'+ data.emparr[l].id +'">' + data.emparr[l].name + "</td><td>" + getgrade_values(data.emparr[l].id) + '</div></td></tr>';
ele+= '<input type="button" value="Evaluate" onclick="evaluate();"';
}
}
var select = $('select[name="emp"]')
var empId = select.attr('id')
alert('empId = '+empId)
select.children('option:selected').each(function() {
alert('grade selected = ' + $(this).val())
})
DEMO : http://jsfiddle.net/hdTEP/
Currently, you will have 2 elements with id="<employeeId>". As ids should be unique across an entire page, you should consider appending the type of element you are representing, for example id="<employeeId>_gradeInput" for your grade dropdown. Next, for each user it seems like you have a button to submit a grade. I would call evaluate with the employee id associated with that button.
function getgrade_values(empid){
var ele='<select id="'+ empid +'_gradeInput" name="emp" style="width:40px;margin:0px 0pt;" >';
..//Remaining code
}
function sendparams(data) {
if (data.status == 1) {
var ele =
'<tr id="std">' +
'<td>' +
'<b>Evaluate:</b>' +
'</td>' +
'</tr>';
for (var l = 0; l < data.emparr.length; l++) {
var employeeId = data.emparr[l].id;
ele +=
'<tr>' +
'<td>' +
'<div id="' + employeeId + '_divContainer">' +
data.emparr[l].name +
'</div>'
'</td>' +
'<td>' +
getgrade_values(employeeId)
'</td>' +
'</tr>';
ele += '<input type="button" value="Evaluate"
onclick="evaluate(' + employeeId + ');"';
}
}
function evaluate(employeeId){
var gradeValue = $('#' + employeeId + '_gradeInput').val();
..//Your other evaluate code here
}