jquery - MVC Grid (VB): Show details on hover

Question

I've searched for this online for several hours today and found some useful stuff, but I can't get this to work 100% as I'd like. If anyone can help that would be fantastic! In my code below, I've removed anything which could expose data which the business I work for may not want to share, they will be indicated with "< SOMETHING>" Here's my problem: I'm populating an MVC grid

 @Html.Grid(Model.Activities).WithModel(New <CLASSNAME HERE>(Html)).Sort(ViewData.Item("actgridsort"))

this part works great, the grid is to show activities taken on a support issue by a support team, and I can "drill into" each activity using a "details" link inside the grid, inside each activity there is a "Notes" section. I am trying to allow the users to see the notes from the activity simply by hovering over the cells on the grid which relate to that particular activity. For example: Activity 101 may contain the note "Hello world" Activity 102 may contain "Goodbye World"

At the moment, if I hover over activity 101, my code displays:

hello world
goodbye world

However, if I hover over 102, it displays nothing. I want it to show "Hello world" when hover over 101, and "goodbye world" over 102 etc

here is my code so far: --VIEW---

  @code
   For Each Activity In Model.Activities
      @<div id ='@string.Format("Activity{0}", Activity.ClgCode)' class = "ActivityDetails">
     <br />
      Activity @Activity.ClgCode:
      <b>
       @Activity.Notes

      </b>
      </div>
  Next

End Code

--JS--

<script>
    $(".ActivityDetails").hide();
  $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });

</script>

Here is the script output in the console as requested by @satpal Some of the comments inside here have been removed by me for privacy reasons.

   <div class="display-label" >Details:</div>
    <div class="display-field display-field-bordered">
    <pre>
        <span style="white-space: pre-line">
PROBLEM WRITTEN HERE
 </span>

    </pre>
    </div>


</div>

<p>
    <table class="grid"><thead><tr><th><a href="/SupportCall/Details/2999?Column=ClgCode&amp;Direction=Ascending">Activity No.</a></th><th><a href="/SupportCall/Details/2999?Column=CntctDate&amp;Direction=Ascending">Date</a></th><th>Time</th><th><a href="/SupportCall/Details/2999?Column=ActivityType&amp;Direction=Ascending">Type</a></th><th><a href="/SupportCall/Details/2999?Column=ActivitySubject&amp;Direction=Ascending">Subject</a></th><th><a href="/SupportCall/Details/2999?Column=Priority&amp;Direction=Ascending">Priority</a></th><th>Details</th><th><a href="/SupportCall/Details/2999?Column=UserName&amp;Direction=Ascending">Ochiba Contact</a></th><th><a href="/SupportCall/Details/2999?Column=BPContact&amp;Direction=Ascending">Customer Contact</a></th><th class="sort_asc"><a href="/SupportCall/Details/2999?Direction=Descending"></a></th></tr></thead><tbody><tr class="gridrow"><td>6625</td><td>06/01/2014</td><td>12:24</td><td>Support</td><td>Website</td><td>0</td><td>Request for Further info from client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6625">Details</a></td></tr><tr class="gridrow_alternate"><td>6627</td><td>06/01/2014</td><td>12:32</td><td>Support</td><td>Website</td><td>1</td><td></td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6627">Details</a></td></tr><tr class="gridrow"><td>6628</td><td>06/01/2014</td><td>12:34</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6628">Details</a></td></tr><tr class="gridrow_alternate"><td>6630</td><td>06/01/2014</td><td>12:43</td><td>Support</td><td>Website</td><td>0</td><td>Request for further information</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6630">Details</a></td></tr><tr class="gridrow"><td>6631</td><td>06/01/2014</td><td>13:07</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>Sue Simpson</td><td>Adrian Owen</td><td><a href="/Activity/Details/6631">Details</a></td></tr><tr class="gridrow_alternate"><td>6632</td><td>06/01/2014</td><td>13:25</td><td>Support</td><td>Website</td><td>0</td><td>Update to client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6632">Details</a></td></tr><tr class="gridrow"><td>6635</td><td>06/01/2014</td><td>15:57</td><td>Support</td><td>Website</td><td>0</td><td>Update to client after investigation and referral to 3rd Par</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6635">Details</a></td></tr><tr class="gridrow_alternate"><td>6639</td><td>07/01/2014</td><td>09:01</td><td>Support</td><td>Website</td><td>0</td><td>Response to client after update from 3rd Party</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6639">Details</a></td></tr></tbody></table>
          <div id ='Activity6625' class = "ActivityDetails">
         <br />
          Activity 6625:

          <b>
NOTES HERE  
          </b>
          </div>
          <div id ='Activity6627' class = "ActivityDetails">
         <br />
          Activity 6627:

          <b>
          NOTES HERE

          </b>
          </div>
          <div id ='Activity6628' class = "ActivityDetails">
         <br />
          Activity 6628:

          <b>
NOTES HERE
          </b>
          </div>
          <div id ='Activity6630' class = "ActivityDetails">
         <br />
          Activity 6630:

          <b>
NOTES HERE

          </b>
          </div>
          <div id ='Activity6631' class = "ActivityDetails">
         <br />
          Activity 6631:

          <b>
NOTES HERE
          </b>
          </div>
          <div id ='Activity6632' class = "ActivityDetails">
         <br />
          Activity 6632:

          <b>
NOTES HERE 
          </b>
          </div>
          <div id ='Activity6635' class = "ActivityDetails">
         <br />
          Activity 6635:

          <b>
NOTES HERE

          </b>
          </div>
          <div id ='Activity6639' class = "ActivityDetails">
         <br />
          Activity 6639:

          <b>
     NOTES HERE
          </b>
          </div>
</p>
<script>
    $(".ActivityDetails").hide();
  // $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });

   // $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });
    $("table.grid tbody tr td:first-child").hover(function () {
        $(".ActivityDetails" + $(this).text()).show()
    }, function () {
        $(".ActivityDetails" + $(this).text()).hide()
    });
//    $("table.grid tbody tr td:first").hover(function () {
//        var selectValue = $(this).siblings("td:first").html();
//    $(".ActivityDetails" + $(selectValue, this).text()).toggle() });

</script>

Many thanks in advance for anyone who even took the time to read this.

Answer 1

Try with

$("table.grid tbody tr td:first-child").hover(function () {
    $(".ActivityDetails" + $(this).text()).toggle()
});

OR

$("table.grid tbody tr td:first-child").hover(function () {
    $(".ActivityDetails" + $(this).text()).show()
},function () {
    $(".ActivityDetails" + $(this).text()).hide()
});

UPDATE

You where using incorrect identifer

$(".ActivityDetails").hide();

$("table.grid tbody tr td:first-child").hover(function () {
      $(".ActivityDetails").hide();
      $("#Activity" + $(this).text()).show()
});

Fiddle DEMO