Fonction jQuery ne fonctionnant pas dans MVC Vue partielle

Question

La fonction .hide dans ma vue partielle n'est pas rendue pour la deuxième et la troisième personne initialement, alors les retards .hide et .fadein ne fonctionneront pas non plus. Je suis nouveau sur js et jquery, donc il me manque probablement quelque chose d'évident ... Pourquoi ce script js ne fonctionnerait-il pas à l'intérieur d'une vue partielle?

Tout fonctionne quand tout est dans la vue principale, mais la raison pour laquelle j'ai besoin d'une vue partielle est parce que je ne veux pas recharger la page entière toutes les 15 secondes. J'ai fait quelques recherches et il pourrait y avoir quelque chose de mal à obtenir un type de données html?

Vue principale:

@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> 
} 

action Contrôleur:

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

Vue partielle:

@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> 
} 

Toute aide serait génial et merci d'avance!

Answer 1

Je ne suis pas sûr à 100% ici, mais je pense qu'il peut y avoir un problème avec le rendu de la section @script dans les vues partielles selon ce answer. Il est mentionné que les vues partielles ne peuvent pas utiliser l'élément @section par défaut.

Essayez de supprimer la syntaxe de rasoir autour de la section de script et il suffit d'utiliser:

<script type="text/javascript"> 
    $("#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> 

Answer 2

Vous ne pouvez pas appeler une section à partir d'une vue partielle. Vous pouvez l'appeler comme une action avec Layout = null; pour atteindre un résultat similaire.

Answer 3

1) Retirez le @section Scripts{ et votre code fonctionnera.

---

2) Vous devez éviter l'enfer de rappel de hide() et fadeIn(). S'il y a 10 divs, vous devrez ajouter 10 couches de ce code. L'approche ci-dessous fonctionnerait avec n'importe quel nombre de divs dans votre vue partielle:

Vous pouvez affecter vos divs à class. Faites seulement le premier div visible par défaut. Créez une fonction qui sera appelée toutes les 5 secondes.

<div class="content-div">first content</div> 
<div class="content-div" style="display:none">second content</div> 
<div class="content-div" style="display:none">third content</div> 

<script> 
    partialIntervalRef = setInterval(incremental, 5000); 

    // gets the currently visible div. Hides it. 
    // If this is last content `div`, shows the first div, else shows the next div 
    function incremental() { 
     $visible = $(".content-div:visible"); 
     $visible.hide(); 

     $visible.next().is('.content-div') 
      ? $visible.next().fadeIn() 
      : $(".content-div").first().fadeIn(); 
    } 
</script> 

Cette variable partialIntervalRef sera définie dans le cadre global (Vue principale). Et chaque fois avant de charger votre vue partielle, vous devriez l'effacer.

<script> 
    var partialIntervalRef; 

    function loadScrollListPV() { 
     clearInterval(partialIntervalRef); 
     ----- 
     ---- 
     } 

Ceci est beaucoup plus propre et extensible que l'utilisation des rappels. Voici un FIDDLE si vous voulez le tester

---

3) window.setInterval("loadScrollListPV()", 15000) devrait être remplacé window.setInterval(loadScrollListPV, 15000)