CFoutput and jQuery

Get Started
1

I have a jQuery Image rotator in where I want to output certain data (photo and text). This would normally not be so difficult was it not for the initial set up of the rotator. Here is the query and the rotator structure so you can see my problem:

Query


<cfquery name="getRotatoroutput" datasource="#Request.dsn#">
	SELECT DISTINCT cat_id, cat_name, cat_image
    FROM LCategories
    ORDER BY RAND() LIMIT 4 
</cfquery>

Normal Rotator Structure

<div id=“fragment-1” class=“ui-tabs-panel” style=“”>
<img src=“image1.png”>
<div class=“info”><h2>Product1</h2></div>
</div>
<div id=“fragment-2” class=“ui-tabs-panel hide” style=“”>
<img src=" image2.png">
<div class=“info”><h2>Product2</h2></div>
</div>
<div id=“fragment-3” class=“ui-tabs-panel hide” style=“”>
<img src=" image3.png">
<div class=“info”><h2>Product3</h2></div>
</div>
<div id=“fragment-4” class=“ui-tabs-panel hide” style=“”>
<img src=" image4.png">
<div class=“info”><h2>Product4</h2></div>
</div>

I could normally have something to output it like:


<cfoutput query="getRotatoroutput">
<div id="fragment-1" class="ui-tabs-panel" style="">
	<img src="catPhotos/#cat_image# ">
    <div class="info"><h2>#cat_name#</h2></div>
</div>

My problem is that the div’s have an id fragment-1, fragment-2 etc (used for navigation) and the last three div’s have, as you can see, an additional class hide so that they’re Initially not visible.

I have no idea how to tackle this. I was thinking of MOD, but have no idea how. :frowning: Does anyone has an idea?

Thank you all in advance

2

That explains a lot. I’m creating in CF8 but on my server CF7 is still running. They promised me to upgrade it for a long time now. Gonna your suggestion. But any idea why it is not rotating?

Cheers Donald

3

The error you’re getting from line 126, is that a ColdFusion or JS error? If it’s ColdFusion then what version are you running as the code I’ve given you is CF8 and above. If it’s lower take out the ! At the start of the iif statement, swap the text in the DE statement around (as you’re reversing the logic from false to true) and run it again.

Cheers
James

4

Hi James. Thank you so much for your reply. I have a feeling that this should work but it doesn’t. I did what you said:


<div id="fragment-#counter#" class="ui-tabs-panel #iif(!getRotatoroutput.isFirst(),DE('ui-tabs-hide'),DE(''))#" style="">
	<img src="catPhotos/#p_cat_image# ">
    <div class="info"><h2>#p_cat_name#</h2></div>
</div>

And it shows a picture indeed and when I refress it shows another picture (ORDER BY RAND) but it is not rotating and the problem lays in that navigatie part. Because the JS call refers to that:


<script language="javascript">
$(document).ready(function(){
		$("#featured > ul").tabs({fx:{}}).tabs("rotate", 5000, true);
	});
</script>

Off-line the entire layout is out of context and it shows the same thumbnail 4 times(the number of records in the rotator). Online it even gives me an error message.

Invalid token ‘!’ found on line 126 at column 56.

I have to admit that I’m not sure If I integrated your code the right way In the navigation part. This is what I did:


<cfset counter = 1 />
<cfoutput query="getRotatoroutput">
	<ul class="ui-tabs-nav">
	    <li class="ui-tabs-panel #iif(getRotatoroutput.isFirst(),DE('ui-tabs-selected'),DE(''))#" id="nav-fragment-#counter#">
        	<a href="">
       	 		<img src="tijdelijk/mobile.png" width="60px" height="45px">
         	</a>
		</li>
	</ul>
<cfset counter++ />
</cfoutput>
<cfoutput query="getRotatoroutput">    
<div id="fragment-#counter#" class="ui-tabs-panel #iif(!getRotatoroutput.isFirst(),DE('ui-tabs-hide'),DE(''))#" style="">
	<img src="catPhotos/#p_cat_image# ">
    <div class="info"><h2>#p_cat_name#</h2></div>
</div>
<cfset counter++ />
</cfoutput>

To make it more understandable I made a working example. I did this in a very rough and unlikeable way. I made 4 seperate queries with BETWEEN statements in them:

Query


<cfquery name="getSlide1" datasource="#Request.dsn#">
	SELECT p_cat_name, p_cat_image, SUBSTRING_INDEX(p_cat_description,' ', 12) AS shortContent 
    FROM LCategories
    WHERE p_cat_id BETWEEN 1 AND 3
    ORDER BY RAND()
</cfquery>

<!--- The other three queries are called getSlide2, getSlide3 and getSlide4 and have BETWEEN values 4 AND 6, 7 AND 9 and 10 AND 12 --->

Output


<cfoutput>
	<ul class="ui-tabs-nav">
	    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
        <a href="##fragment-1">
        <img src="photos/#getSlide1.p_cat_image#" width="60px" height="45px">
        <h4>#getSlide1.p_cat_name#</h4>
        <p>#getSlide1.shortContent#</p>
        </a>
        </li>

<!--- Other three navigation records --->

<div id="fragment-1" class="ui-tabs-panel" style="">
	<img src="photos/#getSlide1.p_cat_image#">
</div>

<!--- Other p_cat_image records --->

</cfoutput>

See the working example here!

Like I said it is working but I.M.O. not how It should. Do you have any idea what I’m doing wrong?

Thank you for your time and effords and in advance

5

Doing this off the top of my head but how about something like -


<cfset counter = 1 />

<cfoutput query="getRotatoroutput">
<div id="fragment-#counter#" class="ui-tabs-panel #iif(!getRotatoroutput.isFirst(),DE('ui-tabs-hide'),DE(''))#" style="">
	<img src="catPhotos/#cat_image# ">
    <div class="info"><h2>#cat_name#</h2></div>
</div>

<cfset counter++ />
</cfoutput>

So you’ve got an incrementing counter which deals with the numbering of your ids and the same can be applied for your corresponding links as well.

The iif() checks to see if it’s dealing with the first record in the query. If it is the first it doesn’t output that extra class.

Cheers,
James

6

I was just too late to edit my original post, so I couldn’t do anything else then to reply to my own post, I’m sorry :rolleyes:

And then, to make things even more complicated, is there the navigation (see original post). This is the structure:

<ul>
<li class=“ui-tabs-nav-item ui-tabs-selected” id=“nav-fragment-1”>
<a href=“#fragment-1”><img src=“image1.png” width=“60px” height=“45px”></a>
</li>
<li class=“ui-tabs-nav-item ui-tabs-selected” id=“nav-fragment-2”>
<a href=“#fragment-2”><img src=“image2.png” width=“60px” height=“45px”></a>
</li>
etc…
</ul>

The navigation id’s need to correspond with the div id’s from the big pictures so for good order this is the complete structure of the rotator:

<div id=“featured”>

&lt;ul class="ui-tabs-nav"&gt;
    &lt;li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"&gt;
    &lt;a href="#fragment-1"&gt;&lt;img src="image1.png" width="60px" height="45px"&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="ui-tabs-nav-item" id="nav-fragment-2"&gt;
    &lt;a href="#fragment-2"&gt;&lt;img src="image2.png" width="60px" height="45px"&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="ui-tabs-nav-item" id="nav-fragment-3"&gt;
    &lt;a href="#fragment-3"&gt;&lt;img src="image3.png" width="60px" height="45px"&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="ui-tabs-nav-item" id="nav-fragment-4"&gt;
    &lt;a href="#fragment-4"&gt;&lt;img src="image4.png" width="60px" height="45px"&gt;
    &lt;/a&gt;
    &lt;/li&gt;      
&lt;/ul&gt;

<div id=“fragment-1” class=“ui-tabs-panel” style=“”>
<img src=“image1.png”>
<div class=“info”><h2>Mobile Phones</h2></div>
</div>
<div id=“fragment-2” class=“ui-tabs-panel ui-tabs-hide” style=“”>
<img src=“image2.png”>
<div class=“info”><h2>Televisions</h2></div>
</div>

<div id=“fragment-3” class=“ui-tabs-panel ui-tabs-hide” style=“”>
<img src=“image3.png”>
<div class=“info”><h2>Microwave Ovens</h2></div>
</div>

<div id=“fragment-4” class=“ui-tabs-panel ui-tabs-hide” style=“”>
<img src=“image1.png”>
<div class=“info”><h2>Air Conditioning</h2></div>
</div>

</div>

Any help in this would be highly appreciated