mvc2, query and qtip issue

Question

Hello,

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

For one your outer c# loop 'foreach (var pil in pList){' will recreate the same '" />
' element possibly several times.

The javascript var personInfo = $('#cbPersonInfo').val(); selects (and re-selects the same element repeatedly, thus the same tooltip for all the hovers, in this case pil.Text

If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. (http://is.gd/dM4EG)

Ensure that that all html elements in your page have unique IDs.

Edit: Quick link for solution (http://craigsworks.com/projects/qtip_new/forum/take-tooltip-content-from-the-element-attributes-t-8.html) . Will update possible solution later today.

<% foreach (var qt in Model)
{%>
    <input id="cbPerson" type="checkbox" value="<%= qt.Value %>" />
    <label for="cbPerson" qTip="<%=qt.Text  %>"><%= qt.Text %></label>
    <input id="cbPersonInfo" type="hidden" value="<%= qt.Text %>" /><br />
<%} %>

<script type="text/javascript">
    $(document).ready(function () {
        $('[qTip]').each(function () { // Find all elements that have the qTip attribute (labels)
            var personInfo = $(this).attr('qTip');
            $(this).qtip({
                content: personInfo ,
                show: 'mouseover',
                hide: 'mouseout',
                position: { target: 'mouse' }
            }); 
        });
    });
</script>

Answer 2

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 :)