dnvsp dnvsp - 6 months ago 59
Ajax Question

How to refresh table after button click in ajax call?

I have a table generated after ajax call success.When i re select the options and click on the button data added to existing table only.Here i want to refresh the table with updated table.Unable to set the the refresh functionality.For any help Thanks in advance.

function viewAttendanceSheet() {
var date = $("#datepicker").val();
$.ajax({
type: 'GET',
url: "attendanceList",
dataType: "json",
data: {
"date": date
},
success: function(data, status) {
alert(status);
alert(JSON.stringify(data.length));
var res = String(JSON.stringify(data)).split(",");
if (data.length == 0) {
newRowContent = ("<tr>NOTHING TO DISPALY...</tr>");
$("#ajaxViewAttendanceSheet").append(newRowContent);
} else {
$("#attendanceViewTableHead").css("display", "block");
$.each(data, function(key, value) {
if (value.status == "Absent") {
newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:red;>" + value.status + "**</td></tr>");
} else {
newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:green;>" + value.status + "</td></tr>");
}
$("#ajaxViewAttendanceSheet").append(newRowContent);
});
}
}
});
}

Answer

Try this:

function viewAttendanceSheet() {
        var date = $("#datepicker").val();
        $.ajax({
            type: 'GET',
            url: "attendanceList",
            dataType: "json",
            data: {
                "date": date
            },
            success: function(data, status) {
                $("#ajaxViewAttendanceSheet").html('');
                var res = String(JSON.stringify(data)).split(",");
                if (data.length == 0) {
                    newRowContent = ("<tr>NOTHING TO DISPALY...</tr>");
                    $("#ajaxViewAttendanceSheet").append(newRowContent);
                } else {
                    $("#attendanceViewTableHead").css("display", "block");
                    $.each(data, function(key, value) {
                        if (value.status == "Absent") {
                            newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:red;>" + value.status + "**</td></tr>");
                        } else {
                            newRowContent = ("<tr><td>" + value.studentName + "</td><td style=color:green;>" + value.status + "</td></tr>");
                        }
                        $("#ajaxViewAttendanceSheet").append(newRowContent);
                    });
                }
            }
        });
    }