Question

I’m having an issue where in my controller, I’m setting values in a collection and storing them in ViewData. eg:

ViewData["ex1"] = new SelectList(ex1); // a simple collection
ViewData["ex2"] = new SelectList(group.Members, "Id", "Gender");

I’m passing these to my View and looping through like this. eg:

<div id="divListBox" style="overflow:auto; border:1px solid #CCCCCC; padding-left:5px; background-color:white; height: 130px"> 

          <%
            var list = this.ViewData["e2x"] as SelectList;
            var pList = this.ViewData["ex1"] as SelectList;

            foreach (var p in list)
            {
                foreach (var pil in pList)
                  {
                    if(pil.Text.Contains(p.Value)) // ex1 does contains ex2
                    {
                       %>
                        <input id="cbPerson" type="checkbox" value="<%= p.Value %>" />
                        <label for="cbPerson"><%= p.Text %></label>
                        <input id="cbPersonInfo" type="hidden" value="<%= pil.Text %>" /><br />  
                       <%
                    }
                  }
            }
          %>
        </div> ...

and here is my jQuery. eg:

$('#divListBox > input').each(function() {
        var personInfo = $('#cbPersonInfo').val();
        $(this).append($('personInfo'));
            $('*').qtip('hide');
            $('#divListBox label').each(function() {
                $(this).qtip({
                    content: personInfo,
                    show: 'mouseover',
                    hide: 'mouseout',
                    style: {
                        classes: 'ui-tooltip-custom',
                        tip: true
                    },
                    position: {
                        my: 'left bottom',
                        at: 'top right'
                    }
                });
            });
        });

if I set my input type of “hidden” to “text”, I see the correct information for each one. Hoever, when i hover over them, the first information shows as tooltip for all of them. I think it may be my jquery but I’m not too sure. I’ve been dealing with this issue for hours now and still nothing. Can anyone please help?

Answer 1

foreach:

id="cbPerson" type="checkbox" value="<%= p.Value %>" />
<label for="cbPerson"><%= p.Text %></label>
id="cbPersonInfo" type="hidden" value="<%= pil.Text %>" /><br />

means you have several times the same ID (ID is ALWAYS ! unique), so when you do a jquery selec on ID, Jquery selects the first one it finds

if you wrap your person in a container it is even easier.

I made a quick adjustment for you which I tested and worked

  %>
    <div class="person">
     <input id="cbPerson" type="checkbox" value="<%= p.Value %>" />
     <label for="cbPerson"><%= p.Text %></label>
     <input id="cbPersonInfo" type="hidden" value="<%= pil.Text %>" /><br />  
    </div>
    <%

---

<script type="text/javascript">
// for each container with class person
    $('.person').each(function () {
    //find the input with class cbPersonInfo which is !!!! IN !!!! $(this): $(this) is now the container 
        var personInfo = $(this).find(".cbPersonInfo").val();
        $(this).qtip({
            content: personInfo,
            show: 'mouseover',
            hide: 'mouseout',
            style: {
                classes: 'ui-tooltip-custom',
                tip: true
            },
            position: {
                my: 'left bottom',
                at: 'top right'
            }
        });
    });


</script>

This code means: for each div with class person, find the div inside with class cbPeronInfo and use it’s value for the qtip. (and offcourse hook the qtip to that class)

---

@Edit

actually, for semantic reasons it is better to use a UL instead of a (more logic) but I assume you can figure out how to change that yourself? if you wanted to otherwise give me a sign 🙂