hello everyone,
I am making one small Application
but this code works only First time when page lode.
when i click Edit Or Delete First time Work fine but when i click second time that work nothing?
This is my Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show User Data</title>
<script src="jquery.min.js"></script>
<link href="MyCSS.css" rel="stylesheet" />
<link href="jquery-ui.css" rel="stylesheet" />
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<!--<script src="jquery.js"></script>-->
<link href="notifIt.css" rel="stylesheet" />
<script src="notifIt.js"></script>
<!--<script src="json2.js"></script>-->
<script>
$(function () {
$("#bdate").datepicker();
});
</script>
<script>
var updateid = 0;
$(document).ready(function () {
getdata();
$("tbody").find("tr").hover(
function () {
$(this).css("background", "blue");
$(this).css("color", "white");
},
function () {
$(this).css("background", "");
$(this).css("color", "");
}
);
$("input[type=button]").hover(
function () {
$(this).css("background", "black");
$(this).css("color", "white");
$(this).css("cursor","pointer");
},
function () {
$(this).css("background", "");
$(this).css("color", "");
}
);
$(function () {
$("input[type=button]")
.click(function (event) {
//alert(this.id);
if ($(this).val() == "Edit") {
var uid = this.id;
$.ajax({
url: "GetUserData.asmx/getDataByID",
dataType: "json",
data: "{id:'" + uid + "'}",
contentType: "application/json; charset=utf-8",
async: false,
type: "POST",
success: function (re) {
//alert(re.d.tb2[0].FirstName);
$("#fname").val(re.d.tb2[0].FirstName);
$("#lname").val(re.d.tb2[0].LastName);
$("#email").val(re.d.tb2[0].E_mail_ID);
$("#bdate").val(dateconvert(re.d.tb2[0].Birthdate));
//alert(re.d.tb2[0].Active);
$("#Chkactive").attr('checked', true);
$("#insert").attr('value', 'Update');
$("#clear").attr('value', 'Cancle');
updateid = uid;
},
error: error1
});
}
else if ($(this).val() == "Insert") {
var u_fname = $("#fname").val();
var u_lname = $("#lname").val();
var u_email = $("#email").val();
var u_bdate = $("#bdate").val();
var u_active = document.getElementById("Chkactive");
if (u_active.checked == true)
u_active = true;
else
u_active = false;
// validation();
//alert("insert");
$.ajax({
url: "GetUserData.asmx/insertData",
dataType: "json",
data: "{fname:'" + u_fname + "',lname:'" + u_lname + "',email:'" + u_email + "',bdate:'" + new Date().toDateString() + "',active:'" + u_active + "'}",
contentType: "application/json; charset=utf-8",
async: false,
type: "POST",
success: function (re) {
document.getElementById("cont").innerHTML = "";
getdata();
SuccessInsert();
},
error: error1
});
}
else if ($(this).val() == "Update") {
// alert("update");
var u_fname = $("#fname").val();
var u_lname = $("#lname").val();
var u_email = $("#email").val();
var u_bdate = $("#bdate").val();
var u_active = document.getElementById("Chkactive");
if (u_active.checked == true)
u_active = true;
else
u_active = false;
$.ajax({
url: "GetUserData.asmx/updateData",
dataType: "json",
data: "{id:'" + updateid + "',fname:'" + u_fname + "',lname:'" + u_lname + "',email:'" + u_email + "',bdate:'" + new Date().toDateString() + "',active:'" + u_active + "'}",
contentType: "application/json; charset=utf-8",
async: false,
type: "POST",
success: function (re) {
document.getElementById("cont").innerHTML = "";
clearAllData();
getdata();
$("#insert").attr('value', 'Insert');
$("#clear").attr('value', 'Clear');
SuccessUpdate();
},
error: error1
});
}
else if ($(this).val() == "Delete") {
//alert("delete");
var uid = this.id;
$.ajax({
url: "GetUserData.asmx/deleteByID",
dataType: "json",
data: "{id:'" + uid + "'}",
contentType: "application/json; charset=utf-8",
async: false,
type: "POST",
success: function (re) {
//alert(re.d.tb2[0].FirstName);
document.getElementById("cont").innerHTML = "";
getdata();
SuccessDelete();
},
error: error1
});
}
else if ($(this).val() == "Clear") {
clearAllData();
}
else if ($(this).val() == "Cancle") {
clearAllData();
$("#insert").attr('value', 'Insert');
$("#clear").attr('value', 'Clear');
}
//alert(u_fname + " " + u_active + " " + u_bdate);
//new Date().toDateString()
});
});
});
function validation() {
$('input[type="text"]').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
notif({
msg: "Correct Following Error",
type: "error",
position: "center"
});
if (isValid == false)
e.preventDefault();
}
function dateconvert(bdate) {
var str = bdate;
var num = parseInt(str.replace(/[^0-9]/g, ""));
var date = new Date(num);
var finaldate = '';
finaldate = finaldate + date.getMonth() + '/' + date.getDay() + '/' + date.getFullYear();
return finaldate
//alert(date);
}
function error1(data) {
alert(data.statusText);
}
function getdata() {
$.ajax({
url: "GetUserData.asmx/GetAllData",
dataType: "json",
data: "{}",
contentType: "application/json; charset=utf-8",
async: false,
type: "POST",
success: function (re) {
//alert(re.d.tbl.length);
//alert( re.d.tbl[1].FirstName);
//alert(dateFormat(re.d.tbl[1].Birthdate, "mm/dd/yyyy"));
for (var i = 0; i < re.d.tbl.length; i++) {
//var button = $('<button />').attr({ 'id': re.d.tbl[i].Id, 'type': 'button', 'value': 'Edit' });
$("#cont").append("<tr><td class='uid'>" + re.d.tbl[i].Id + "</td>" +
"<td class='fname'>" + re.d.tbl[i].FirstName + "</td>" +
"<td class='lname'>" + re.d.tbl[i].LastName + "</td>" +
"<td class='email'>" + re.d.tbl[i].E_mail_ID + "</td>" +
"<td class='bdate'>" + dateconvert(re.d.tbl[i].Birthdate) + "</td>" +
"<td class='active'>" + re.d.tbl[i].Active + "</td>" +
"<td><input type='button' value='Edit'id='" + re.d.tbl[i].Id + "' class='editbutton' onclick='javascript:void(0);' > <input type='button' value='Delete'id='" + re.d.tbl[i].Id + "' class='deletebutton' >" +
"</tr>"
);
}
},
error: error1
});
clearAllData();
}
function clearAllData() {
$('input[type=text]').each(function () {
$(this).val('');
});
$("#Chkactive").removeAttr('checked', false);
}
function SuccessInsert() {
notif({
msg: "Successfully Inserted",
type: "success"
});
}
function SuccessDelete() {
notif({
msg: "Successfully Deleted",
type: "success"
});
}
function SuccessUpdate() {
notif({
msg: "Successfully Update",
type: "success"
});
}
</script>
</head>
<body>
<table id="tblinsert">
<thead>
<tr>
<td class="uid header">User Id</td>
<td class="fname header">First NAme</td>
<td class="lname header">Last Name</td>
<td class="email header">E-mail</td>
<td class="bdate header">Birthdate</td>
<td class="active header">Active</td>
<td class="iud"></td>
</tr>
<tr>
<td class="uid"></td>
<td class="fname">
<input id="fname" type="text" /></td>
<td class="lname">
<input id="lname" type="text" /></td>
<td class="email">
<input id="email" type="text" /></td>
<td class="bdate">
<input id="bdate" type="text" /></td>
<td class="active">
<input id="Chkactive" type="checkbox" /></td>
<td class="iud">
<input id="insert" type="button" value="Insert" />
<input id="clear" type="button" value="Clear" />
</td>
</tr>
</thead>
</table>
<table id="tblUserDetail">
<tbody id="cont">
</tbody>
</table>
</body>
</html>
Submit an article or tip