Avatar of marcoloppo
marcoloppo
 asked on

How to fix this jquery fancybox/loop problem?

Hi,

I have a recordset loop in ASP, and when someone click in some row of this loop table, it launchs a fancybox iframe with some detailed information, when I click in the first item of the loop table the launchbox opens fine, but when I click in any other row below, it does not work. I believe the problem is something about the ID value (pergunta) of the link , I'm using the same ID to all rows to launchl the fancybox iframe, but I don't know how could I fix this, anyone may help?

Thanks
<script>
$("#pergunta").fancybox({
        'padding'      : 0,
        'autoScale'    : false,
        'width'	     : 650,
        'height'	     : 500,		
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'centerOnScroll' : true,
	'type'          : 'iframe'
	});
</script>

<%
 while RS3.eof = false
%>

<div class="pane spam">
<h3 class="destaque-laranja-1"><%=left(ConverterDataOut(RS3("data")),10)%> - <%=RS3("nome")%> pergunta:</h3>
<p class="texto-geral-1"><%=RS3("texto")%></p>
<p class="texto-geral-2"><a id="pergunta" href="ver-resposta.asp?cod=<%=RS3("cod")%>&cod_pergunta=<%=RS3("cod_pergunta")%>" class="btn-unapprove">RESPOSTA COMPLETA</a></p>
 </div>

<%
RS3.movenext
wend
%>

Open in new window

JavaScriptjQuery

Avatar of undefined
Last Comment
Onthrax

8/22/2022 - Mon
Onthrax

You cannot have duplicate IDs for multiple elements in your page. This is bad coding and will mess up javascript and such.

To give an unique ID do something like this:
<%
Dim i
i = 0
 while RS3.eof = false
%>

<div class="pane spam">
<h3 class="destaque-laranja-1"><%=left(ConverterDataOut(RS3("data")),10)%> - <%=RS3("nome")%> pergunta:</h3>
<p class="texto-geral-1"><%=RS3("texto")%></p>
<p class="texto-geral-2"><a id="pergunta<% =i %>" href="ver-resposta.asp?cod=<%=RS3("cod")%>&cod_pergunta=<%=RS3("cod_pergunta")%>" class="btn-unapprove">RESPOSTA COMPLETA</a></p>
 </div>

<%
i = i + 1
RS3.movenext
wend
%>

This will create each row with a new iD e.g. pergunta0, pergunta1, pergunta2 etc.

I'm not that familiar with jQuery though, but from what I've seen there is probably some method of binding your script to each hyperlink within the divs that have class texto-geral-2.
ASKER CERTIFIED SOLUTION
Seo_Expert

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Onthrax

That will work indeed as that searched for all elements with that class. However it is still not a good idea to use duplicate ID's.
marcoloppo

ASKER
Hello,

Thank you Seo Expert, I used the code below and it worked, but it's still with duplicated classes (anymore IDs), besides the code is working fine with this adaptation, what are the problems I can have with it?

Onthrax, you showed how I could do the differents IDs to each row, but about the jquery code, I also have to make any change in the code to it works, no?



Your help has saved me hundreds of hours of internet surfing.
fblack61
marcoloppo

ASKER
the code I used
<script>
$(".pergunta").fancybox({
        'padding'      : 0,
        'autoScale'    : false,
        'width'      : 650,
        'height'             : 500,             
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'centerOnScroll' : true,
        'type'          : 'iframe'
        });
</script>

<%
 while RS3.eof = false
%>

<div class="pane spam">
<h3 class="destaque-laranja-1"><%=left(ConverterDataOut(RS3("data")),10)%> - <%=RS3("nome")%> pergunta:</h3>
<p class="texto-geral-1"><%=RS3("texto")%></p>
<p class="texto-geral-2"><a class="pergunta" href="ver-resposta.asp?cod=<%=RS3("cod")%>&cod_pergunta=<%=RS3("cod_pergunta")%>" class="pergunta btn-unapprove">RESPOSTA COMPLETA</a></p>
 </div>

<%
RS3.movenext
wend
%>

Open in new window

SOLUTION
Onthrax

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.