Link to home
Start Free TrialLog in
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

Avatar of Onthrax
Onthrax
Flag of Netherlands image

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
Avatar of Seo_Expert
Seo_Expert
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Avatar of marcoloppo
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?



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
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial