I am happy to announce that i was able to resolve this issue (smiles):
*CODE:*
*<script>$(document).ready(function(){$('.branch1').click(function() {const
id = $(this).data('id'); // Extract the data-id attribute of the link.var
hiddenSection = *
*$('#' + id);hiddenSection.fadeIn().css({ 'display':'block' }).css({
top:($(window).height() - hiddenSection.height())/2 +
'px',left:($(window).width() - hiddenSection.width())/2 + 'px' }).css({
'background-color': 'rgba(0,0,0,0.6)'
}).appendTo('body');$('img#close').click(function(){
$(hiddenSection).fadeOut(); });});});</script>*
Initially the hiddenSection variable was set to a containing #div called*
#ours*, i removed that div and set the hiddenSection variable to
*$('#' + id)like below as it is also demonstrated in my code above*
*var hiddenSection = *
*$('#' + id);*
Now my link is working properly, it no longer has a large opaque window in
the background! But i do get my modal window displaying what i want!
*Mostwanted*
On Friday, January 11, 2019 at 8:22:50 AM UTC+2, mostwanted wrote:
>
> My task I want to believe is fairly simple but something is wrong in my
> code, I am attempting to incorporate something I learned from Anthony into
> a small idea I have but its going side ways. I have names from a database
> displayed as links, what i want is for the details of those names to be
> displayed in a modal window when i click on the name but something is wrong
> here, when i click on a name at first it displays correct information but
> when i click on it again it displays the information of the second link, if
> i click on the 6th link name it displays the details of the 3rd name, this
> beats the entire purpose now, I want to be able to get the details of the
> exact name that is clicked whenever it is clicked.
> Here is a simple code to illustrate my problem, i have put up everything
> so anyone wanting to assist me could see exactly what the code looks like
> but the problem itself is in the view:
>
> *MODEL*
>
>
>
>
>
>
> *db.define_table('person', Field('name'),
> Field('surname'), Field('age', 'integer'),
> Field('home'), )*
>
> *CONTROLLER*
>
>
>
>
> *def clients(): people=db(db.person).select(db.person.ALL) return
> locals()*
> *VIEW*
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> *{{extend
> 'layout.html'}}<script>$(document).ready(function(){$('#ours').hide();$('.branch1').click(function()
>
> {$(this).each(function(){const id = $(this).data('id'); // Extract the
> data-id attribute of the link.$('#' + id).fadeIn(); // Select the contact
> with that id.var hiddenSection = $('#ours');hiddenSection.fadeIn().css({
> 'display':'block' }).css({ width: $(window).width() + 'px', height:
> $(window).height() + 'px' }).css({ top:($(window).height() -
> hiddenSection.height())/2 + 'px',left:($(window).width() -
> hiddenSection.width())/2 + 'px' }).css({ 'background-color':
> 'rgba(0,0,0,0.6)' }).appendTo('body');$('img#close').click(function(){
> $(hiddenSection).fadeOut(); });});});});</script>{{for clients in
> people:}}<a href="#" class="branch1" data-id="{{=clients.id
> <http://clients.id>}}">{{=clients.name <http://clients.name>}}</a>
> {{=clients.surname}}<br /><div id="ours"><article class="gae"
> id="{{=clients.id <http://clients.id>}}"><a href="#"><img
> src="{{=URL('static', 'images/close.png')}}" style="width: 30px; position:
> absolute; top:0px;right:0px;" id="close"/></a>DETAILS<br
> />{{=clients.age}}<br /></article></div>{{pass}}*Mostwanted
>
--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to web2py+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
