Q

clientlibs.min.js：Uncaught TypeError：$（...）。自動完成不是函數

2016-08-25 59 views 0 likes

0

在AEM中創建了一個簡單的搜索組件，並在其JSP中添加了以下代碼。還在clientlib節點中添加了自動完成插件和jquery plyugin文件。但每次嘗試使用此組件運行頁面時，都會收到錯誤「自動完成不是函數」。與AEM一起使用不兼容嗎？使用AEM 6.0 SP2

<% @include file="/libs/foundation/global.jsp"%> 
<cq:includeClientLib categories="jquerysamples" /> 

<html> 
<head> 
<script> 
$(function() { 
      var availableTutorials = [ 
       "ActionScript", 
       "Boostrap", 
       "C", 
       "C++", 
      ]; 
      $("#searchInput").autocomplete({ 
       source: availableTutorials 
      }); 
     }); 
</script> 
</head> 
<body> 
    <div class="formDiv"> 
     <form id="form" > 
      <input type="text" id="searchInput" name="searchbox"> 
      <div id="searchResults"/> 
     </form> 
    </div> 
</body> 
</html>

2016-08-25 ps007

A

回答

0

我建議瞭解瀏覽器如何解析HTML文檔。 http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#HTML_Parser是一個入門資源。

您的文檔頭部有一個JS腳本標記。（這是立即解析&執行）
有一個cq:includeClientLib以外的文檔。我不認爲HTML5行爲定義了這種行爲。
沒有定義jQuery文檔onLoad，所以瀏覽器試圖在任何DOM構建之前運行JavaScript。

我建議：

嘗試移動cq:includeClientLib頭內。
使用HTML5文件類型<!doctype html>。這應該將瀏覽器「踢」成一個一致的解析模式（尤其是避免IE的無數奇特模式）。
將你的腳本塊移動到正文的最後。更好的是，用一個onload處理程序包裝JS，以便在解析HTML之後運行JS。& DOM已經被構建。

2016-09-09 19:32:18

+0

另外，http://stackoverflow.com/questions/36455911/jquery-uncaught-typeerror-autocomplete-is-not-a-function?rq=1回答同樣的基本問題，但從AEM/JSP之外。 –

0

我得到了解決方案。它沒有綁定jquery-ui插件。我爲plugin文件夾添加了「cq：includeClientLib」的依賴項到我用於自動完成的js文件。它現在像一種魅力。

2016-10-08 09:22:11 ps007

相關問題