Partial View Works with JQuery Partially, But Not Completely C# ASP.Net MVC 5

Question

This is an ASP.Net MVC 5 Project.

I have a simple jQuery to fade in and fade out HTML elements on mouse hovering as shown:

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
    { $(this).fadeTo(1, 1); },
    function ()
    { $(this).fadeTo(1, 0.1); }
  );
</script>

Used in the following partial MyPartialView.cshtml View (the jQuery script is in the same MyPartialView.cshtml file):

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

And here is the effect of the jQuery:

Which is OK... however, the partial MyPartialView.cshtml above is called multiple times in another cshtml file like this:

@if (Model != null) {
  <hr/>
  if (Model.Any()) {
    foreach (var item in Model) { //do something foreach item
      @Html.Partial("MyPartialView", item);
    }
  }
}

Resulting in a page rendered like this:

As you can see, there are three different results for letter "a" (one MyPartialView.cshtml is rendered per result) and each of them have the three glyphicons right beside the query results - faded out.

Now, the first two "a" show expected behavior when the mouse is hover over:

OK

But the last "a" does not show the expected behavior, the fade-in fade-out does not work though the mouse has hovered over it:

NOT OK

I notice the problem occurs, whenever the above query result (in this case is the second "a") has the ordered list (as in 1, 2, 3 above), then the below MyPartialView.cshtml does not show the desired behavior. As you notice in my example, the first "a" does not have ordered list - so the fade-in and out works. The second "a" has an ordered list - the fade-in and out also works. But the third "a" is after the query result with an ordered list - it doesn't work.

The behavior is consistent when the query result is, let say, only two and the first one has the ordered list, then the fade-in and out in the second one does not show up.

Hence, I suspect the problem with the ordered list, but I cannot figure out why. Here is my MyPartialView.cshtml:

@using MyProject.Models
@using System.Linq;
@model ResultPerPhrase

@Scripts.Render("~/bundles/jquery")
<script>
  $('.entrisButton').hover(function ()
    { $(this).fadeTo(1, 1); },
    function ()
    { $(this).fadeTo(1, 0.1); }
  );
</script>

<h2>
  @Html.Raw(Model.GetHeaderHtml())  
    <span class="entrisButton">
      <small>
        <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
        <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
        <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
      </small>
    </span>
</h2>

@if (Model.results.Count() > 1) {
  <ol>
    @foreach (var result in Model.results) {
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
          <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
          <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
        </span>
      </li>
    }
  </ol>
} else {
  <ul style="list-style: none;" class="adjusted-par">
    @foreach (var result in Model.results) {
      <li>@Html.Raw(result.ToString())
        <span class="entrisButton">
          <small>
            <span title="Add new entry" class="glyphicon glyphicon-plus-sign text-success"></span>
            <span title="Change this entry" class="glyphicon glyphicon-edit text-primary"></span>
            <span title="Delete this entry" class="glyphicon glyphicon-remove-circle text-danger"></span>
          </small>
        </span>
      </li>
    }
  </ul>
}

What could go wrong here?

Maybe you just need to put your javascript code inside `$(document).ready(function(){ yourCodeHere })` or inside `$(function(){ yourCodeHere })`...both are equivalent . — Hackerman, Aug 16 '16 at 19:59
You hit the mark! That's it! Thanks a lot, friend! :D But why? — Ian, Aug 16 '16 at 20:22

score 3 · Accepted Answer · answered Aug 16 '16 at 20:30

That is why your JavaScript code runs before your Html Dom was loaded. In order to avoid such behavior you need to enclose your javascript code inside $(document).ready(f‌unction(){ yourCodeHere }) or inside $(function(){ yourCodeHere }(shorthand version). You can check the documentation here: https://learn.jquery.com/using-jquery-core/document-ready/

So your code needs a minor change:

 $(function(){
     $('.entrisButton').hover(function ()
         { $(this).fadeTo(1, 1); },
         function ()
         { $(this).fadeTo(1, 0.1); 
     });
 });

score 0 · Answer 2 · edited May 23 '17 at 12:22

Since you are placing your hover script in MyPartialView.cshtml, it will bind the hover event to the elements multiple times when you call the partial method multiple time if you just wrap the code in $(function(){...}.

Check this jsFiddle Demo. You can see in console that when the mouse hovers over the div in console two lines are printed because two events are fired.

You should move the hover script outside of the MyPartialView.cshtml, or check before binding the hover event. Check this SO Answer or check this updated jsfiddle Demo(notice that here2 is not printed in the console)

Partial View Works with JQuery Partially, But Not Completely C# ASP.Net MVC 5

2 Answers2