How to load div with jQuery AJAX and setInterval in MVC 5?

Question

I am working with jQuery Ajax. I want to load data of my table every 5 seconds. Here's what I tried but it's not working. It doesn't return any error or result.

public ActionResult Index()
{
  return View();
}

public PartialViewResult _List()
{
  List<Purchase> model = db.Purchases.ToList();
  return PartialView("_List", model);
}

<div id="loadList"></div>

@section scripts{
  <script>
    $(document).ready(function () {
      setInterval(function () {
        $("#loadList").load("~/Views/Purchases/_List.cshtml");
      }, 3000);
    });
  </script>
}

The Partial View which I want to load in #loadList div.

@model IEnumerable<ChocolateFactory.Data.Purchase>

<table class="table">
<tr>
    <th>@Html.DisplayNameFor(model => model.RefNo)</th>
    <th>@Html.DisplayNameFor(model => model.Date)</th>
    <th>@Html.DisplayNameFor(model => model.Amount)</th>
</tr>
@foreach (var item in Model) {
<tr>
    <td>@Html.DisplayFor(modelItem => item.RefNo)</td>
    <td>@Html.DisplayFor(modelItem => item.Date)</td>
    <td>@Html.DisplayFor(modelItem => item.Amount)</td>
</tr>
}
</table>

The partial View is in:

~/Views/Purchases/_List.cshtml

You have to pass the url of the controller method that returns the view, not the .cshtml file name in the .load() function - e.g. .load("@Url.Action("_List", YourController"); — user3559349
– user3559349, Commented Nov 1, 2018 at 9:07
@StephenMuecke I also tried this. but it's not working. The #loadList is not loading in Index view. — Huzaifa
– Huzaifa, Commented Nov 2, 2018 at 9:52
$("#loadList").load("@Url.Action("_List", YourController") works just fine. What errors are you getting in the browser console? And we do not know what your _List.cshtml view is — user3559349
– user3559349, Commented Nov 2, 2018 at 9:56
I updated question. and it doesn't return any error. Sorry for my English bro. — Huzaifa
– Huzaifa, Commented Nov 2, 2018 at 10:58

Rory McCrossan · Accepted Answer · 2018-11-01 09:06:39Z

The issue is because the tilde character is a Razor construct for the root of the site. It's not recognised outside of that, hence it won't work in your JS code. As you've placed this logic within a view, you can use @Url.Content() to parse the URL before outputting it to the JS:

setInterval(function () {
  $("#loadList").load("@Url.Content("~/Views/Purchases/_List.cshtml")");
}, 3000);

Also note that if your routing is configured properly, then you can use Url.Action() which would be more robust, eg @Url.Action("_List", "ControllerNameHere");

However, it should be noted that making an AJAX request to your server every 3 seconds is not a good idea. It doesn't scale at all, and will cause performance issues. If you need to keep the serve data and client UI in close sync, then a much better idea would be to use Server Sent Events or WebSockets.

Collectives™ on Stack Overflow

How to load div with jQuery AJAX and setInterval in MVC 5?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related