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
– Hackerman, Commented Aug 16, 2016 at 19:59
You hit the mark! That's it! Thanks a lot, friend! :D But why? — Ian
– Ian, Commented Aug 16, 2016 at 20:22

Hackerman · Accepted Answer · 2016-08-16 20:30:02Z

3

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); 
     });
 });

answered Aug 16, 2016 at 20:30

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ian Over a year ago

Thanks! That's it! ;)

Community · Accepted Answer · 2017-05-23 12:22:53Z

0

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)

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Aug 18, 2016 at 13:26

th1rdey3

4,4588 gold badges37 silver badges69 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related