jQuery function not working in MVC Partial View

Viewed 14838

The .hide function in my partial view is not rendering for second and third person initially, then the delay .hide and .fadein will not work either. I am new to js and jquery so I am probably missing something obvious... Why would this js script not be working inside of a partial view?

Everything works when it is all in the main view, but the reason I need a partial view is because I do not want to reload the entire page every 15 seconds. I have done some research and there might be something wrong with getting an html data type?

Main View:

@model IEnumerable<project.Models.MyList>

<div id="scrolllist">
    @Html.Partial("_ScrollList")
</div>

@section Scripts{
<script>
function loadScrollListPV() {
   $.ajax({
    url: "@Url.Action("ScrollList")",
    type: 'GET', // <-- make a async request by GET
    dataType: 'html', // <-- to expect an html response
    success: function(result) {
                $('#scrolllist').html(result);
             }
   });
}
$(function() {
    loadScrollListPV();
    // re-call the functions each 15 seconds
    window.setInterval("loadScrollListPV()", 15000);
});
</script>
}

Controller Action:

    public ActionResult ScrollList()
    {
        return PartialView("_ScrollList", db.MyList.ToList());
    }

Partial View:

@model IEnumerable<project.Models.MyList>


<div id="firstperson">
@*Get lastest record and display.*@
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Take(1))
{
}
</div>

<div id="secondperson">
@*Get second lastest record and display.*@
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(1).Take(1))
{       
}
</div>

<div id="thirdperson">
@*Get third lastest record and display.*@
@foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(2).Take(1))
{        
}
</div>

@section Scripts{
<script>
$("#secondperson").hide();
$("#thirdperson").hide();
function person() {
    $("#firstperson").delay(5000).hide(0, function () {
        $("#secondperson").fadeIn();
        $("#secondperson").delay(5000).hide(0, function () {
            $("#thirdperson").fadeIn();
            $("#thirdperson").delay(5000).hide(0, function () {
                $("#firstperson").fadeIn();
                person();
            });
        });
    });
}
</script>
}

Any help would be awesome and thanks in advance!

3 Answers
Related