How to refresh a webgrid based on a value inside a webgrid?

Question

i want to update my webgrid every 5 sec until i get sucess message in my webgrid coloum of result once i get success result it should stop refreshing and i also want to add a refresh spinner as i am using bootstrap but dont know how to add dynamically and i am also using Datatable.js here is what i have done so far:

 

My webgrid is in partial view and the partial view is as follows:-

 

<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-body">
<div id="loadgrid">
@using (Html.BeginForm())
{
if (Model != null)
{
var Grid = new WebGrid(Model, canPage: false, canSort: false);
@Grid.GetHtml(
tableStyle: "table table-bordered table-hover",
htmlAttributes: new { id = "BindRechargeexample" },
columns:
Grid.Columns(
Grid.Column(columnName: "Agenttransno", header: "Sr No"),
Grid.Column(columnName: "Agenttransno", header: "AgenttransNo"),
Grid.Column(columnName: "Company", header: "Company"),
Grid.Column(columnName: "ProductCode", header: "Product"),
Grid.Column(columnName: "Account", header: "Account"),
Grid.Column(columnName: "Amount", header: "Amount", style: "alignright"),
Grid.Column(columnName: "Discount", header: "Discount", style: "alignright"),
Grid.Column(columnName: "ClosingBal", header: "ClosingBal", style: "alignright"),
Grid.Column(columnName: "DT", header: "DT"),
Grid.Column(columnName: "Status", header: "Status"),
Grid.Column(columnName: "Result", header: "Result"))
);
}
}
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->

 

the page i have called in my main view as follows:-

 

 <div class="row" style="width: 97%; margin-left: 0.2%">
@{
Html.RenderAction("_BindRecharge");
}
</div>

 

 the controller is as follows:-

 

 public PartialViewResult _BindRecharge()
{
var grid = (from c in NMSDC.vw_Web_Recharge_Status
where c.DT >= System.DateTime.Now.Date && c.DT <= System.DateTime.Now && c.UserID == Session["UserID"].ToString()
select new BindRechargeModel
{
Agenttransno = c.agenttransno.ToString(),
Company = c.Company,
Account = c.account,
Amount = c.value,
ProductCode = c.productcode,
Discount = (decimal)c.RCommission,
ClosingBal = (decimal)c.RLastBalance,
Status = c.Status,
DT = c.DT,
Result = c.NomadicDescription
}).ToList();
return PartialView(grid.ToList());
}

 

and the Javascript for both datatables and for refreshing is as follows but the refreshing one isnt working:

 

//-----------FOR Recharge Grid Start-----------------//
$(function recharge() {
var c = $("#BindRechargeexample").DataTable({
"lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
"order": [[8, 'desc']],
});
c.on('order.dt search.dt', function () {
c.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
//-----------FOR Recharge Grid END-----------------//
//------For Refreshing Of Recharge Grid--------//
//-------Recharge Page-----WEBGRID--------------//
$(function loadregistergrid() {
var path = window.location.pathname;
if (path == '/Retailer/Recharge') {
$.ajax({
url: '/Retailer/CheckRechargeGrid',
type: 'POST',
data: { test: 'json' },
success: function (data) {
if (data.status == false) {
var test = $('#testing').load('/Retailer/_BindRecharge');
//var test = $('#testing').html(load('/Retailer/_BindRecharge'));
alert("The Status" + test);
setTimeout(loadregistergrid, 5000);
//$('#testing').load('/Retailer/_BindRecharge');$('#BindRechargeexample').html(grid)$.get('/Retailer/_BindRecharge', function (result) { alert(result); });
}
else { }
}
});
}
});

 

please help me with this!!