SetInterval and SetTimeout not working when trying to load a Partial View

Question

I'm trying to use JQuery to reload a PartialView in an ASP.Net MVC application.

My code:

<div class="partial">
     @Html.Action("GetRemainingSeats", "Layout")
</div>
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<script type="text/javascript">
            setTimeout(
            $(function () {
                setInterval(function () { $('#partial').load('@Html.Action("GetRemainingSeats", "Layout")'); }, 5000)
            }), 6000);
</script>

The partial view is loaded correctly, but immediately after that, it will again execute the action, without waiting for the setTimeout function timer to elapse. After that it will stop doing anything.

Edit: Inside the PartialView there is a table with shows in a cinema together with how many seats are left for each show. So I want that to update very couple of seconds so the employees can see how many seats are left for a show.

I'm using the timeout and setinterval function because on pageload the action is called. After that I want it to wait a couple of seconds before starting the interval

Your question has one thing missing. What do you want to achieve? It will help others to crack down the issue otherwise your code as it seems playing hide and seek in browser. — Rohit416, Apr 09 '15 at 10:23
Also do tell the need of using `setTimeout` and `setInterval`, together.. — Rohit416, Apr 09 '15 at 10:27
Url.Action() won't do anything, just as using /Layout/GetRemainingSeats won't do anything. The Html.Action() will run, but only once and without waiting for the timeout. — Yannick, Apr 09 '15 at 10:40
Of course `Html.Action` will only run once. Its a method that calls a child action and its parsed once only when the view is rendered. You need `Url.Action()`. — , Apr 09 '15 at 11:58
@StephenMuecke when using Url.Action nothing happens, at all. I tried putting an alert in the function, so: setInterval(function () { $('#partial').load('/Layout/GetRemainingSeats'); **alert("interval called");** }, 4000) And it does show me the alert every four seconds, but it's not calling the function. Not with /layout/GetRemainingSeats and not with Url.Action("GetRemainingSeats", "Layout") — Yannick, Apr 09 '15 at 13:07
Your script has `$('#partial').load(..)` but you don't have an element with `id="partial"`. You do however have an element with `class="partial"`. So one or he other needs to change (and it needs to be `@Url.Action()`, not `@Html.Action()`) — , Apr 09 '15 at 13:12
@StephenMuecke Thank you so much!! I'm not sure how I could not have seen it was a class instead of an ID! I would upvote you if I could upvote comments! You just fixed it, thank you again! — Yannick, Apr 09 '15 at 13:20

A.T. · Answer 1 · 2015-04-09T10:20:07.553

0

I really don't understand why you use both timeout and setinterval methods as both work same for first time, if you want to refresh div after 4 sec, stick with setInterval method otherwise if you want to refresh only once, use setTimeout method

var wait = setTimeout(
$(function () {
 var s = setInterval(function () {       
         clearInterval(s); // you need to remove the interval if you want to run it once
         $('#partial').load('/Layout/GetRemainingSeats'); 

     }, 4000)
}), 6000);

also, you need to change

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>

to

 <script src='@Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>

edited Apr 09 '15 at 10:20

answered Apr 09 '15 at 10:14

A.T.

24,694
8
47
65

I needed the timeout so the partialview wouldn't get loaded twice on page load. I wanted it to wait a couple of seconds before starting the interval. When I use your code (i removed clearInterval) It won't call the action again and when I use an @Html.Action it will only call the action once and then stop the interval. – Yannick Apr 09 '15 at 10:39

score 0 · Accepted Answer · answered Apr 09 '15 at 13:29

You script is attempting to load html into an element which does not exist (you only have an element with class="partial", not id="partial". You also need to use @Url.Action(), not @Html.Action() (which is a helper that call a child action - it does not generate a url which is expected by the .load() method. You need to make the following changes

html

<div id="partial"> // change this to specify the id attribute
    @Html.Action("GetRemainingSeats", "Layout")
</div>

script

$(function () {
    setInterval(function () {
        $('#partial').load('@Url.Action("GetRemainingSeats", "Layout")'); }, 5000) // use @Url.Action()
    }), 6000);

SetInterval and SetTimeout not working when trying to load a Partial View

2 Answers2