Dynamically created jQuery Tabs on ColdFusion Pages

Question

I hope you can offer some advice on this.

I have used multiple jQuery Tabs on ColdFusion pages in the past, but for the first time, I need to dynamically create multiple tabs based on the name of a supplier to keep them unique.

So instead of "#Tabs", I am trying to achieve "#ABC001" or "#XYZ002" etc.

I think I am getting there in that the tabs appear to initialise, but they just don't work and I suspect it is possibly because of the dynamic variable CF output or in fact what I am trying to do is maybe just not even possible.

The error I am getting is "jQuery UI Tabs: Mismatching fragment identifier" and I think it may be the variable name causing this.

I have attached a screengrab of where I think the issue may sit. Sorry, but I am not sure how to add the code as it seems to chop it off. I have attached an image. Thank you in advance for taking a look.

Answer 1

I'm adding my 2 cents related to how overly complex your code is.

• Get rid of <cfloop>
• Get rid of all of the individual <cfoutput> tags
• Get rid of all the variable assignments.

You have a repeating HTML structure grouped by name, so use that with <cfoutput>:

<cfscript>
    myQuery = queryNew(
        "id,name,amount"
        , "Integer,Varchar,Integer"
        , [
            {id=1, name="ABC001", amount=15}
            , {id=2, name="XYZ002", amount=18}
            , {id=3, name="PRA003", amount=32}
        ]
    );
</cfscript>

<cfoutput query="myQuery" group="name">

    <h1>#myQuery.name#</h1>

    <div id="#myQuery.name#">
        <ul>
            <li><a href="###myQuery.name#-1">Tab 1</a></li>
            <li><a href="###myQuery.name#-2">Tab 2</a></li>
        </ul>
        <div id="#myQuery.name#-1">
            Tab 1 Div.
        </div>
        <div id="#myQuery.name#-2">
            Tab 2 Div.
        </div>
    </div>
    
</cfoutput>

The rendered HTML contains all of the proper unique HTML ids and related href values. Add the JavaScript you already have, and the tabs should render and act correctly.

<h1>ABC001</h1>

<div id="ABC001">
    <ul>
        <li><a href="#ABC001-1">Tab 1</a></li>
        <li><a href="#ABC001-2">Tab 2</a></li>
    </ul>
    <div id="ABC001-1">
        Tab 1 Div.
    </div>
    <div id="ABC001-2">
        Tab 2 Div.
    </div>
</div>

<h1>XYZ002</h1>

<div id="XYZ002">
    <ul>
        <li><a href="#XYZ002-1">Tab 1</a></li>
        <li><a href="#XYZ002-2">Tab 2</a></li>
    </ul>
    <div id="XYZ002-1">
        Tab 1 Div.
    </div>
    <div id="XYZ002-2">
        Tab 2 Div.
    </div>
</div>

<h1>PRA003</h1>

<div id="PRA003">
    <ul>
        <li><a href="#PRA003-1">Tab 1</a></li>
        <li><a href="#PRA003-2">Tab 2</a></li>
    </ul>
    <div id="PRA003-1">
        Tab 1 Div.
    </div>
    <div id="PRA003-2">
        Tab 2 Div.
    </div>
</div>