Ian Ian - 3 months ago 13
Javascript Question

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

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
:

Before mouse in

When mouse hover

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:




enter image description here




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




enter image description here




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




enter image description here




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?

Answer

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