How to display information for a specific item from a database through a for loop?

I'm using the web2py frame work and this is what i'm trying to achieve;

I have contact details of different places in my DB, the names of these different places are displayed as links in a page, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place. But that is not happening! What happens is that when i click the name of the place i get tooltips with different contact information of different places stacked on top of each other!

As stated above, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place., can anyone please assist me get this right.

THE MODEL CODE

db.define_table('services',
Field('service_name', requires=IS_NOT_EMPTY()),
format='%(service_name)s', migrate=False, fake_migrate=True)

db.define_table('company',
Field('logo', 'upload'),
Field('company_name', requires=IS_NOT_EMPTY()),
Field('services', 'reference services'),
#Field('tlamelo', 'reference tlamelo'),
Field('product', 'reference product'),
Field('tel', requires=IS_NOT_EMPTY()),
Field('email', requires=IS_NOT_EMPTY()),
Field('fax', requires=IS_NOT_EMPTY()),
Field('cell', requires=IS_NOT_EMPTY()),
Field('facebook', requires=IS_NOT_EMPTY()),
Field('twitter', requires=IS_NOT_EMPTY()),
Field('website', requires=IS_NOT_EMPTY()),
Field('postal_address', requires=IS_NOT_EMPTY()),
Field('located_at', requires=IS_NOT_EMPTY()), migrate=False, fake_migrate=True)


CSS TOOLTIP CODE

#branch1 outline:none; position: relative; font-weight: bold;
#branch1 text-decoration:none;
span.contacts1

display:inline;
position:absolute;
color:#111;
border:1px solid #000000;
background: #000000;
opacity: 0.9;
color: white;
font-weight: bold;
font-size: small;
border:1px solid #000000;
border-radius: 25px;/*border-radius: 5px 100px 5px;*/
z-index:1;
left: 40px;
display:none;
padding:14px 15px;
margin-top:-56px;
margin-left:70px;
width:500px;
line-height:16px;line-height:20px;



CONTROLLER CODE

def companies():
results=db.services(request.args(0))
rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name)
return locals()


THE VIEW CODE

<script>
$(document).ready(function()
$('.branch1').click(function(e)
$(this).each(function()
$('.contacts1').fadeIn();
e.preventDefault();
);
);
$('img#close').click(function(e)

$('.contacts1').fadeOut();
e.preventDefault();
);
);
</script>


<div class="comps">
<span class="companies">COMPANIES (A-F)</span><br /><br />
letters=['A', 'B', 'C', 'D', 'E', 'F']
for company in rslts:
if company.company_name[0] in letters:
company.company_name


<a href="#" id="branch1" class="branch1 branches">=company.company_name</a><br />
<span class="contacts1">
<a href="#"><img src="=URL('static', 'images/close.png')" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/></a>
<div class="info" id="logo">
<img id="companyLogo" width="140px" src="=URL('download',args=company.logo)" /><br />
<span style="position: absolute; bottom:0px; left: 10px;">SESOA&trade</span>
</div>


<div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details">
<span class="companyName">=company.company_name</span>
<hr class="divider" />
<span class="contact" id="cell">TEL: </spanM <strongstyle="color:green;">=company.tel</strong><br />
<span class="contact" id="cell">EM@IL: </span> <strong style="color:green;">=company.email</strong><br />
<span class="contact" id="cell">CELL: </span><strong style="color:green;">=company.cell</strong><br />
<span class="contact" id="fb">Facebook: </span> <strong style="color:green;">=company.facebook</strong><br />

<span class="contact" id="twit">Twitter: </span> <strong style="color:green;">=company.twitter</strong><br />
<a href="=company.website" target="_blank"><span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">=company.website</strong></span></a><br />

<span class="contact" id="cell">FAX: </span> <strong style="color:green;">=company.fax</strong><br />
<span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">=company.located_at</strong><br />
</div>
</span>

pass
pass
</div>


Click this link to view the problem first hand Contacts Problem Example

1 Answer
1

In the click handler, contacts are shown via:

$('.contacts1').fadeIn()


However, in the for loop, each contact gets a "contacts1" class, so the above selector selects all the contacts to be faded in whenever any link is clicked.

for

Instead, you must add a unique identifier to each contact and select only that contact when its link is clicked.

Try changing:

<a href="#" id="branch1" class="branch1 branches">=company.company_name</a><br />
<span class="contacts1">


to:

<a href="#" class="branch1 branches" data-id="=company.id">=company.company_name</a><br />
<span class="contacts1" id="=company.id">


Notice that the company id is added as the unique id for the contacts element, and that same id is added as the data-id attribute of the associated link.

id

data-id

Then, set up the click handler like this:

$('.branch1').click(function(e)
const id = $(this).data('id'); // Extract the data-id attribute of the link.
$('#' + id).fadeIn(); // Select the contact with that id.
e.preventDefault();
);


Also, note that in an HTML page, each id attribute must be unique, but you re-use the same id values in each loop (i.e., "branch1", "close", "logo"). You even re-use the "cell" id multiple times within a single iteration of the loop. It is not clear you even need all of those id's, but if you do need any of them, make sure they are unique (e.g., something like "='branch%s' % company.id").

id

id

id

id

"='branch%s' % company.id"

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.