Question

我正在尝试构建一个由数据库中的员工设置的基于选项卡的字母表，这样它就不会是一个集合a-z，而是基于数据库中的员工动态构建的。这是查询：

<cffunction name="ALPHA_RL" access="remote" returnformat="JSON" returntype="any"  >
        <cfargument name='DEPTMATRICSID' required='true' />
        <cfset retVal = ArrayNew(1)>
        <cfquery datasource="#request.DSN#" username="#request.User#" password="#request.Password#" name="getAlphaList">
                SELECT DISTINCT ALPHA FROM (
                SELECT SUBSTR(A.LAST_NAME, 1, 1) As ALPHA
                FROM WEBSCHEDULE.APPLICATION_USER A, WEBSCHEDULE.FACULTYHISTORY H, WEBSCHEDULE.FACULTYTABLE T
                WHERE A.EMPLID = H.FACULTYEMPLID
                AND A.EMPLID = T.EMPLID
                AND H.DEPTMATRICSID = #ARGUMENTS.DEPTMATRICSID# )
                WHERE ALPHA IS NOT NULL
                ORDER BY ALPHA
        </cfquery>
        <cfloop query="getAlphaList">
            <cfset temp = {} />
            <cfset temp['ALPHA'] = getAlphaList.ALPHA />
            <cfset ArrayAppend(retval, temp)>
        </cfloop>
        <cfset result = {} />
        <cfset result['items'] = retVal />

        <cfreturn result>
    </cffunction>

效果很好并返回下面显示的所需数据：

{"items":[{"ALPHA":"A"},{"ALPHA":"B"},{"ALPHA":"C"},{"ALPHA":"F"},{"ALPHA":"G"},{"ALPHA":"H"},{"ALPHA":"J"},{"ALPHA":"L"},{"ALPHA":"M"},{"ALPHA":"N"},{"ALPHA":"O"},{"ALPHA":"P"},{"ALPHA":"R"},{"ALPHA":"S"}]}

现在我在html页面中遇到问题的地方我创建了一个函数并循环抛出上面的结果来构建选项卡的html：

function alphaTabs(d){
$.ajax({
    url: "CFCs/ManageUserProfiles.cfc",
    dataType: "json",
    data: {
        method: "ALPHA_RL",
        DEPTMATRICSID: d
    },
    success: function(response){
        var x = response.items;
        var str = '';
        if (response.items[0] != undefined) {

            str += '<ul>';
            for (var i = 0; i < x.length; i++) {
                str += '<li><a href="#alphaTabz-' + x[i].ALPHA + '">' + x[i].ALPHA + '</a></li>';
            }
            str += '</ul>';
            for (var j = 0; j < x.length; j++) {
                str += '<div id="alphaTabz-' + x[j].ALPHA + '">';
                str += '<p>' + j + '</p>';
                str += '</div>';
            }

        }
        $('#displayAlphaList').append(str);
    },
    error: function(data){
    }
});
}

以下是我在document.ready中调用jquery选项卡的方法：

$('#displayAlphaList').tabs();
var d = '<cfoutput>#session.ad.AppDeptID#</cfoutput>';
alphaTabs(d)

生成的html很好，但是对$（'＃displayAlphaList'）。tabs（）的调用无法识别选项卡，因此它看起来就像普通的html而且没有创建选项卡。提前感谢你能帮助我的任何见解。

Answer 1

在创建标签之前，您正在调用$（＆＃39;＃displayAlphaList＆＃39;）。tabs（）。

您需要在成功结束后致电$('#displayAlphaList').tabs();。功能

function alphaTabs(d){
$.ajax({
    url: "CFCs/ManageUserProfiles.cfc",
    dataType: "json",
    data: {
        method: "ALPHA_RL",
        DEPTMATRICSID: d
    },
    success: function(response){
        var x = response.items;
        var str = '';
        if (response.items[0] != undefined) {
            str += '<div id="displayAlphaList">'
            str += '<ul>';
            for (var i = 0; i < x.length; i++) {
                str += '<li><a href="#alphaTabz-' + x[i].ALPHA + '">' + x[i].ALPHA + '</a></li>';
            }
            str += '</ul>';
            for (var j = 0; j < x.length; j++) {
                str += '<div id="alphaTabz-' + x[j].ALPHA + '">';
                str += '<p>' + j + '</p>';
                str += '</div>';
            }
            str += '</div>';
        }
        $('#alphaList').html(str);
        $('#displayAlphaList').tabs();
    },
    error: function(data){
    }
});
}

循环创建jQuery选项卡

1 个答案: