Question

我试图建立一个由数据库中的员工设置的基于选项卡的字母表，这样它就不会成为一个集合，而是基于数据库中的员工动态构建。这里是查询：

<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

您在创建选项卡之前调用$（'＃displayAlphaList'）。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){ 
    } 
}); 
}