When I clicked a Edit
button, the loaded html table
created using jquery ajax just disappeared. How can I make a jquery ajax method to make an html table
stay in the page when a button is clicked?
Javascript:
$(document).ready(function () {
var enableTableSelection = true;
function populateInputFields() {
///<summary>Populate input fields with table data based on table row selected<summary>
var currentRow = $("#recentCasesTable tr.highlighted");
var departmentCase = $("#departmentCase").val(currentRow.find("td:eq(1)").text());
var department = $("#department").val(currentRow.find("td:eq(2)").text());
var charge = $("#charge").val(currentRow.find("td:eq(3)").text());
var labCase = $("#labCase").val(currentRow.find("td:eq(4)").text());
var incidentReportDate = $("#incidentReportDate").val(currentRow.find("td:eq(5)").text()).datepicker();
}
function buttonsEnableDisable(editMode) {
///<summary>Enable or Disable buttons and input fields when Edit button is clicked<summary>
$("#departmentCase").attr('disabled', editMode);
$("#department").attr('disabled', editMode);
$("#charge").attr('disabled', editMode);
$("#labCase").attr('disabled', editMode);
$("#incidentReportDate").attr('disabled', editMode);
$("#btnEdit").attr('disabled', !editMode);
$("#btnSave").attr('disabled', editMode);
$("#btnCancel").attr('disabled', editMode);
}
function isRowHighlighted() {
///<summary>Check if a table row is clicked<summary>
if (!$('input').val()) {
alert("Please click a row.");
enableTableSelection = true;
buttonsEnableDisable(true);
} else {
departmentCase;
department;
charge;
labCase;
incidentReportDate;
}
}
$.ajax({
type: "POST",
url: "Exercise_Jayson_AjaxWS.asmx/PopulateGrid",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var grdRecentCases = xml.find("Table");
var rows = '';
$.each(grdRecentCases, function () {
var caseKey = $(this).find("CASE_KEY").text();
var departmentCaseNumber = $(this).find("DEPARTMENT_CASE_NUMBER").text();
var department = $(this).find("DEPARTMENT_NAME").text();
var charge = $(this).find("CHARGE").text();
var labCase = $(this).find("LAB_CASE").text();
var incidentReportDate = $(this).find("OFFENSE_DATE").text();
rows += "<tr><td>" + caseKey + "</td><td>" + departmentCaseNumber +"</td><td>" + department + "</td><td>" + charge + "</td><td>" + labCase + "</td><td>" + incidentReportDate + "</td></tr>";
});
$("#recentCasesTable").append(rows);
$('#recentCasesTable:eq(0) td:nth-child(1)').hide();
$('#recentCasesTable tr').click(function () {
if (enableTableSelection) {
$('#recentCasesTable tr').removeClass('highlighted');
$(this).addClass('highlighted');
populateInputFields();
}
});
},
error: function (response) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
}
});
//Not Working
$("#btnEdit").click(function () {
buttonsEnableDisable(false);
enableTableSelection = false;
isRowHighlighted();
});
});
HTML:
<body>
<table id="recentCasesTable">
<thead>
<tr>
<th>Department Case #</th>
<th>Department </th>
<th>Charge</th>
<th>Lab Case #</th>
<th>Incident Report Date</th>
</tr>
</thead>
</table>
<button id ="btnEdit" name="edit" type="submit" value="edit">Edit</button>