jquery auto refresh without blinking and not updating ?

Question

Dear All,

 

i want to refresh a function that get the data from database ,

 

but to get the data from database i want to pass two string values ,

 

when i pass two values and hit get then data will appier .but after 30 sec i want to refresh the get function without blinking and updating the two input values ..

 

 am posting my code bellow .please have a look on it geiv me some solutiion

 

 

function fnGetDeviceData() {

var ddlDevice =$("#ddlDevice").val();//"NHMSES0001";//

var datepicker = $("#ddlYear").val() + "-" + $("#ddlMonth").val() + "-" + $("#ddlDate").val();// $("#datepicker").val();

$.ajax({

type: "POST",

url: "Reports.aspx/GetDevicesReport",

data: "{'DeviceId' : " + JSON.stringify(ddlDevice) + ",'Date' : " + JSON.stringify(datepicker) + "}",

contentType: "application/json; charset=utf-8",

datatype: "jsondata",

success: function (ResultSet) {

if ((ResultSet.d != null) && (ResultSet.d != "undefined")) {

if (ResultSet.d.ResultStatus.StatusInd == -1) {

var getDevice = ResultSet.d.lstReportsDetails;

PopulateProducts(getDevice);

}

else {

//LoadDropDown();

alert(ResultSet.d.ResultStatus.StatusMsg);

}

}

},

});

}

function PopulateProducts(getDevice) {

$("#tblReport").html("");

var strHeaderRow = "";

var strtr = "";

strHeaderRow = "<tr>";

// strHeaderRow += "<td>Device Id</td>";

strHeaderRow += "<td>Time</td>";

// strHeaderRow += "<td>Time</td>";

// strHeaderRow += "<td>Voltage1</td>";

// strHeaderRow += "<td>Voltage2</td>";

// strHeaderRow += "<td>Voltage3</td>";

// strHeaderRow += "<td>Voltage4</td>";

// strHeaderRow += "<td>Voltage5</td>";

// strHeaderRow += "<td>Voltage6</td>";

// strHeaderRow += "<td>Voltage7</td>";

strHeaderRow += "<td>Temp1</td>";

strHeaderRow += "<td>Temp2</td>";

strHeaderRow += "<td>Temp3</td>";

strHeaderRow += "<td>Temp4</td>";

// strHeaderRow += "<td>Temp5</td>";

// strHeaderRow += "<td>Temp6</td>";

// strHeaderRow += "<td>Temp7</td>";

strHeaderRow += "<td>Avg</td>";

strHeaderRow += "</tr>";

$("#tblReport").append(strHeaderRow);

if (getDevice.length > 0) {

for (var i = 0; i < getDevice.length; i++) {

strtr = "";

strtr += "<tr>";

// if (getDevice[i].Deviceid != "")

// strtr += "<td>" + $.trim(getDevice[i].Deviceid) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

if ($.trim(getDevice[i].Time) != "")

strtr += "<td>" + $.trim(getDevice[i].Time) + "</td>";

else

strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Time) != "")

// strtr += "<td>" + $.trim(getDevice[i].Time) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Voltage1) != "")

// strtr += "<td>" + $.trim(getDevice[i].Voltage1) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

//

// if ($.trim(getDevice[i].Voltage2) != "")

// strtr += "<td>" + $.trim(getDevice[i].Voltage2) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Voltage3) != "")

// strtr += "<td>" + $.trim(getDevice[i].Voltage3) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Voltage4) != "")

// strtr += "<td>" + $.trim(getDevice[i].Voltage4) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Voltage5) != "")

// strtr += "<td>" + $.trim(getDevice[i].Voltage5) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Voltage6) != "")

// strtr += "<td>" + $.trim(getDevice[i].Voltage6) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Voltage7) != "")

// strtr += "<td>" + $.trim(getDevice[i].Voltage7) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

if ($.trim(getDevice[i].Temp1) != "")

strtr += "<td>" + $.trim(getDevice[i].Temp1) + "</td>";

else

strtr += "<td>&nbsp;</td>";

if ($.trim(getDevice[i].Temp2) != "")

strtr += "<td>" + $.trim(getDevice[i].Temp2) + "</td>";

else

strtr += "<td>&nbsp;</td>";

if ($.trim(getDevice[i].Temp3) != "")

strtr += "<td>" + $.trim(getDevice[i].Temp3) + "</td>";

else

strtr += "<td>&nbsp;</td>";

if ($.trim(getDevice[i].Temp4) != "")

strtr += "<td>" + $.trim(getDevice[i].Temp4) + "</td>";

else

strtr += "<td>&nbsp;</td>";

// if ($.trim(getDevice[i].Temp5) != "")

// strtr += "<td>" + $.trim(getDevice[i].Temp5) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

//

// if ($.trim(getDevice[i].Temp6) != "")

// strtr += "<td>" + $.trim(getDevice[i].Temp6) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

//

// if ($.trim(getDevice[i].Temp7) != "")

// strtr += "<td>" + $.trim(getDevice[i].Temp7) + "</td>";

// else

// strtr += "<td>&nbsp;</td>";

if ($.trim(getDevice[i].Avg) != "")

strtr += "<td>" + $.trim(getDevice[i].Avg) + "</td>";

else

strtr += "<td>&nbsp;</td>";

strtr += "</tr>";

$('#tblReport').append(strtr);

}

//$('#ddlDevice').empty();

//LoadDropDown();

$("#datepicker").datepicker();

}

// else {

// strtr = "<table class='col-lg-12 col-md-12 col-sm-12 col-xs-12 table-bordered table-striped table-condensed cf' id='tblReport'>";

// strtr += "<div>No records available</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// strtr += "<div>&nbsp;</div>";

// //strtr += "<div>&nbsp;</div>";

// strtr = "</section>";

// $('#divlstReportsDetails').append(strtr);

// }

setInterval("reloadPage()", k);

}

 

the ressult from  database function is  PopulateProducts(getDevice); i want to refresh this function each 30 seconds.please help me 

how can i do that am using ajax jqueary..