Dynamic <a href> tag

Report · Oct 01, 2010

I have a page that contains about 110 definitions related to the site's product. These are pulled from a database. My question is, on the old site he had <a href> tags so you could go to specific terms that were of course alphabetized. Since these are now pulled from a database, I'm not sure how to set a link to each one that would be in alphabetical order.

In other words. the first term is "Ambient Lighting". At the top of the page is the alphabet listed and when you click on "A" it takes you to the list of terms that begin with an "A".

Maybe there is a better way of doing this. If anyone has any ideas, I would appreciate any help. Thanks in advance!

Report · Oct 01, 2010

Use an order by clause in your query.

Use cfoutput with a query attribute to build your anchor tags.

Report · Oct 01, 2010

Hi Dan, thanks for the reply. Not exactly sure I understand what you mean. Here is my query, which has an order by clause using Terms.

function(){return A.apply(null,[this].concat($A(arguments)))}
<cfquery name="rsTerms" datasource="rlbulbs">
SELECT rlbterms.terms, rlbterms.definitions
FROM rlbterms
ORDER BY rlbterms.terms
</cfquery>

Could you please elaborate a little further on query attribute? Thanks again!

Report · Oct 01, 2010

I had the impression you wanted your data sorted alphabetically. If your current order by clause achieves that, good. If not, change it.

For the next question.

Report · Oct 01, 2010

Yes Dan it's already sorted alphabetically, thanks. No what I want is to be able to use the anchor tag/id to be able to create links so that the user can click "Z" and be taken to the Z section of the terms list without having to scroll allll the way down the page manually.

If I had the list of terms displayed on a static site in a <ul>, I could click "Z" and it would go to the Z section, but since the data(list) is displayed dynamically, it's confusing me as to how to accomplish this.

I know I'm not explaining this very well.

Report · Oct 01, 2010

You may also be asking how to write an HTML anchor tag.

Those look like this.

<a id="A-anchor">A items</a>

<a id="B-anchor">B items</a>

NOTE:

If you have the first anchor links inside of a ColdFusion <cfoutput...></cfoutpout> block, you must escape the # symbols.

I.E. <cfoutput><a href="##A-anchor">A</a></cfoutput>

Report · Oct 01, 2010

ilssac wrote:
You may also be asking how to write an HTML anchor tag.
Those look like this.
<a href="#A-anchor">A</a>
<a href="#B-anchor">B</a>
<a id="A-anchor">A items</a>

<a id="B-anchor">B items</a>

NOTE:
If you have the first anchor links inside of a ColdFusion <cfoutput...></cfoutpout> block, you must escape the # symbols.
I.E. <cfoutput><a href="##A-anchor">A</a></cfoutput>

No I understand how to create anchor tags. Thanks. I just dont know how to use them on Dynamic data.

Report · Oct 01, 2010

<a id="#rsTerms.letterField#">#rsTerms.letterField# Items</a>

#rsTerms.terms# #rsTerms.definitions#<br>
</cfoutput>

</cfoutput>

You will need to add something to your query to creat the letterField using what ever string functions your database supports to extract the first letter of each term.

Report · Oct 01, 2010

Ok wow thats a big help. Thanks! Now the next part is where I'm still lost. Im using MySQL, and not sure I know how to add a function like what you are suggesting. Sorry, I am really new to this. Thanks again for the help!

Report · Oct 01, 2010

Google would be your friend. It might look something like this, but an internet search should quickly turn up the appropiate MySQL string function.

<cfquery name="rsTerms" datasource="rlbulbs">
SELECT rlbterms.terms, rlbterms.definitions, left(rlbterms.terms,1) AS letterField
FROM rlbterms
ORDER BY rlbterms.terms
</cfquery>

Report · Oct 01, 2010

Ok thanks! I just wasnt sure of the syntax for something like this, nor what too google. Thanks for the help and I will definitely do some research.

Report · Oct 01, 2010

Make sure to bookmark the MySQL docs page, eh? It might pay to have a quick squizz @ what functions it offers. Don't try to memorise them all, but it'll give you a feel for what it's capable of doing.

--

Adam

Report · Oct 01, 2010

Adam Cameron. wrote:
Make sure to bookmark the MySQL docs page, eh? It might pay to have a quick squizz @ what functions it offers. Don't try to memorise them all, but it'll give you a feel for what it's capable of doing.
--
Adam

Done! lol thanks.

Now, I have done some ciding, but somethings not working quite right. When I click on a letter thats generated by the LEFT(rlbterms.terms,1) AS letterField, it gives me a 404 error. I am assuming this is saying the page doesnt exist because when I hover over a letter it doesnt have an absolute path to the same page I am on (terms.cfm).

Here is my <cfoutput> code.

<cfoutput query="rsTerms" group="letterField"><a id="#rsTerms.letterField#"><a href="#rsTerms.letterField#">#rsTerms.letterField#</a></a></cfoutput>
      <table cellpadding="10" cellspacing="10" border="0">
        <tr>
          <td align="center"><h2>Terms</h2></td>
          <td align="center"><h2>Definitions</h2></td>
        </tr>
        <cfoutput query="rsTerms">
          <tr>
            <th valign="top" bgcolor="##CCCCCC"><a name="#rsTerms.letterField#"></a>#rsTerms.terms#</th>
            <td>#rsTerms.definitions#</td>
          </tr>
        </cfoutput>
      </table>

On the name anchor should I also add terms.cfm or someway include the path? I've tried several ways and combinations to do this with no luck.

Report · Oct 01, 2010

What does the HTML look like that the browser is seeing?

I suspect you might be missing the # symbol for the anchor. This is where ColdFusion and HTML anchors can get a bit fugly. They both want to use the # for different purposes, and you need to make sure you have plenty to go around. IF you are building your anchor tags with dynamic variables you are going to need three # symbols leading them.

I.E.

<cfoutput...><a href="###myAnchorVar#">#myAnchorVar#</a></cfoutput>

Report · Oct 01, 2010

Awesome! ilssac, I tried two hash marks, but not three. That works perfectly! Thanks again all!

Report · Oct 01, 2010

Yup.... You need one to tell ColdFusion to start a variable, one for the HTML anchor and one to tell ColdFusion that the HTML anchor one IS NOT the start of a variable.

Report · Oct 11, 2010

ok I know this post is older and I have solved the immediate issue with all your suggestions, but

have run into a small issue using this particular code. It doesnt validate! lol

It's giving me a fit about the hash marks in the <a name="###rsTerms.letterField#"></a>

Any ideas on how to get this code to validate and still work?? Thanks in advance.

Report · Oct 11, 2010

You can't effectively validate CFML code with an HTML validator, because CFML isn't HTML - it generates HTML. So, if you want to validate it, you can run the page and give the output to the validator.

Dave Watts, CTO, Fig Leaf Software

http://www.figleaf.com/

http://training.figleaf.com/

Fig Leaf Software is a Veteran-Owned Small Business (VOSB) on

GSA Schedule, and provides the highest caliber vendor-authorized

instruction at our training centers, online, or onsite.

Dave Watts, Eidolon LLC

Report · Oct 11, 2010

Yes I know and the html page source doesnt validate. lol

The above CFML outputs an anchor tag like so:

<a name="#A">Ambient Lighting</a>

Report · Oct 11, 2010

The NAME attribute shouldn't have a hash mark:

...

Dave Watts, CTO, Fig Leaf Software

http://www.figleaf.com/

http://training.figleaf.com/

Fig Leaf Software is a Veteran-Owned Small Business (VOSB) on

GSA Schedule, and provides the highest caliber vendor-authorized

instruction at our training centers, online, or onsite.

Dave Watts, Eidolon LLC

Report · Oct 11, 2010

Well thats what I thought, but if I do it like this:

<th valign="top" bgcolor="##CCCCCC"><a name="#rsTerms.letterField#"></a>#rsTerms.terms#</th>

It doesnt work correctly. It only seems to go to the first name anchor. It validates this way, but since I'm pulling the letters using the

LEFT(rlbterms.terms,1) AS letterField function, it doesnt seem to work without the two extra hash marks in the name anchor.

Report · Oct 11, 2010

That's not a working code sample in any case - it's not enough to see what's not working. You need to post a larger code sample and say exactly what's not working.

Dave Watts, CTO, Fig Leaf Software

http://www.figleaf.com/

http://training.figleaf.com/

Fig Leaf Software is a Veteran-Owned Small Business (VOSB) on

GSA Schedule, and provides the highest caliber vendor-authorized

instruction at our training centers, online, or onsite.

Dave Watts, Eidolon LLC

Report · Oct 11, 2010

I have a query or a definitions table that also returns the first letter of each record item. here is my query:

<cfquery name="rsTerms" datasource="rlbulbs">
SELECT rlbterms.terms, rlbterms.definitions, LEFT(rlbterms.terms,1) AS letterField
FROM rlbterms
ORDER BY rlbterms.terms
</cfquery>

Then I wanted to have anchors that could allow users to go to a specific definition without scrolling. This was all worked out in the post last weel. Here is the anchors tags and dynamic table that displays the records.

<h2><cfoutput query="rsTerms" group="letterField"><a id="#rsTerms.letterField#" /><a href="###rsTerms.letterField#">#rsTerms.letterField#</a></cfoutput></h2>
      <table cellpadding="10" cellspacing="10" border="0">
        <tr>
          <td align="center"><h2>Terms</h2></td>
          <td align="center"><h2>Definitions</h2></td>
        </tr>
        <cfoutput query="rsTerms">
          <tr>
            <th valign="top" bgcolor="##CCCCCC"><a name="#rsTerms.letterField#"></a>#rsTerms.terms#</th>
            <td>#rsTerms.definitions#</td>
          </tr>
        </cfoutput>
      </table>
      
    </div>

As is, it validates, but again doesnt work when I click on the link letterField. So in aprevious post in this thread I was told I needed to escape the letterField variable with two more hash marks, which I thought went in the name anchor, Then it would be

<a name="###lrsTerms.letterField#"></a> This worked great! CLick on a letter and it took you to the related definition. But again the extra hash mark wont validate in html code.

Report · Oct 11, 2010

Why do you have two A tags at the top?

<a id="#rsTerms.letterField#" /><a href="###rsTerms.letterField#">#rsTerms.letterField#</a>

But in any case, in your generated HTML, you should have a single hash for your HREF attribute, and no hash for your NAME attribute in the target link.

http://www.w3.org/TR/html401/struct/links.html#h-12.2.1

Dave Watts, CTO, Fig Leaf Software

http://www.figleaf.com/

http://training.figleaf.com/

Fig Leaf Software is a Veteran-Owned Small Business (VOSB) on

GSA Schedule, and provides the highest caliber vendor-authorized

instruction at our training centers, online, or onsite.

Dave Watts, Eidolon LLC

Report · Oct 11, 2010

AHHHHH lol ok Dont know why I had to <a> tags. Deleted the <a id="#rsTerms.letterField#" /> code! Now it seems to work! lol

Now I'm left with this:

<cfoutput><a href="###rsTerms.letterField#">#rsTerms.letterField#</a></cfoutput>

and

<a name="#rsTerms.letterField#"></a> for the name anchor.

Thanks!!