How to avoid ISPOSTBACK in an asp.net jquery(ajax) application? - asp.net

Question

I have an ASP.NET WEB API application using jquery/Ajax. When I select "M1" in my dropdownlist a gridview shows data for Machine 1, when I click "update" button. If change to "M2", the gridview show data for M1 AND M2. It continue to add data. I only want to see data for M1 or M2 and so on. The problem is probadly due to POSTBACK function. How to solve this? Update panel?
function update() {
$.ajax({
type: 'GET',
url: '/api/stop/',
dataType: "JSON",
data: "data",
success: function (data) {
$.each(data, function (i, data) {
if (data.machinename == $("#DropDownList11").val() && data.name != $(null).val() && data.overlimit == 1 && data.stopcause ==$(null).val())
{
var _id = data.id;
var _machinename = data.machinename;
var _stopcause = data.stopcause;
var _machinename = data.machinename;
var _name = data.name;
var _stop1 = data.idlestart;
var _stop2 = data.idlestop;
var _data = '<tr><td>' + _id + ' </td><td>' + _machinename + '</td><td>' + _name + '</td><td>' + _stop1 + '</td><td>' + _stop2 + '</td><td>';
var _data2 = '<option>' + data.id + '</option>'
$('table').append(_data);
$('#DropDownList5').append($(_data2))
};
});
}
});
}

Answer 1

Well, My Guess is, the problem is in your append logic, $('table').append(_data);. You keep on appending your data to the table and not clearing the previous ones. Just try to clear the data before going in the $.each api of jQuery. Something like below:
$.ajax({
type: 'GET',
url: '/api/stop/',
dataType: "JSON",
data: "data",
success: function (data) {
$("table tr").remove(); // this line will clear off the previous table tr elements before appending new ones.
$.each(data, function (i, data) {
if (data.machinename == $("#DropDownList11").val() && data.name != $(null).val() && data.overlimit == 1 && data.stopcause ==$(null).val())
{
var _id = data.id;
var _machinename = data.machinename;
var _stopcause = data.stopcause;
var _machinename = data.machinename;
var _name = data.name;
var _stop1 = data.idlestart;
var _stop2 = data.idlestop;
var _data = '<tr><td>' + _id + ' </td><td>' + _machinename + '</td><td>' + _name + '</td><td>' + _stop1 + '</td><td>' + _stop2 + '</td><td>';
var _data2 = '<option>' + data.id + '</option>'
$('table').append(_data);
$('#DropDownList5').append($(_data2))
};
});
}
});
Moreover, I am not sure where is the POSTBACK function that you are mentioning, as best of my knowledge, POSTBACK functions are part of WebForms and not WebAPIs. So, I assume you by POSTBACK method you meant the method success.