Update Record .

Question

Hi

 

I have below code & i want when user Clicks on Edit then in Modal Update & Cancel should get displayed.

 

Modal Title should get changed to Update

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Location</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label for="Name">Location Id</label>
<input type="text" class="form-control" id="txtId" placeholder="Location Id" />
</div>
<div class="form-group">
<label for="Name">Location Name</label>
<input type="text" class="form-control" id="txtDescription" placeholder="Location Name" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();"><span class="glyphicon glyphicon-ok"></span>Save Changes</button>
<button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;" onclick="Update();">Update</button>
</div>
</div>
</div>
</div>

$(document).ready(function () {
$("#tblLocation").dataTable({
ajax: {
type: "get",
url: "/Location/List",
dataType: "json",
dataSrc: ""
},
paging: true,
sort: true,
pageLength: 5,
searching: true,
columns: [
{ 'data': 'Id' },
{ 'data': 'Description' },
{
//"data": null,
"defaultContent": '<input type="button" id="btnEdit" class="btn btn-primary" value="Edit" />'
}
]
});
$('body').on('click', '[id*=btnEdit]', function () {
var data = $(this).parents('tr').find('td');
var id = data.eq(0).html();
var description = data.eq(1).html();
$('[id*=txtId]').val(id);
$('[id*=txtDescription]').val(description);
$('#myModal').modal("show");
});
});
function Update() {
var res = validate();
if (res == false) {
return false;
}
var objLocation = {
Id: $('#txtId').val().toUpperCase(),
Description: $('#txtDescription').val().toUpperCase()
};
$.ajax({
url: "/Location/Update",
data: JSON.stringify(objLocation),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
$('#tblLocation').DataTable().ajax.reload();
$('#myModal').modal('hide');
clearTextBox();
},
error: function (errormessage) {
alert(errormessage.responseText);
}
});
}

Thanks