JavaScript在Firefox中使用jQuery UI失敗自動完成

我正在開發一個JSF 2.0網絡應用程序，並且在傳遞由不同單詞組成的字符串時遇到了問題，到使用servlet的jQuery的AutoComplete。它在IE中很好用，但似乎無法檢索Firefox中的任何數據。JavaScript在Firefox中使用jQuery UI失敗自動完成

我的XHTML文件是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core"> 

<ui:composition template="/WEB-INF/templates/base.xhtml"> 

    <ui:define name="head"> 

     <script> 
     $(document).ready(function(){ 

       //var availableTags = "yes|maybe|no".split('|'); 

       $.ajax({ 
        type: 'POST', 
        cache: 'false', 
        data: 'codeType=allergyList', 
        url: '/miloWeb/Autocomplete', 
        async: false, 
        success: function(data){ 
         availableTags = data.split('|');  
        }, 
        error: function (xhr, ajaxOptions, thrownError){ 
         alert(ajaxOptions); 
        } 
       }); 

       $("#pAllergy").autocomplete({ 
        source: availableTags 
       }); 

      }); 

     </script> 
    </ui:define>  

<ui:define name="content"> 

     <h2>Allergy List</h2> 
     <div> 
     <center> 
      <br /> 
      <br /> 
       <h:outputText styleClass="description" for="pAllergy">Allergy: </h:outputText> 
<h:inputText id="pAllergy" value="#{allergyListBB.allergyList.allergy}" size="30"></h:inputText> 

       </tr> 
       <tr> 
        <td><button onclick="return false;" id="addAllergy">Add</button> </td>      
       </tr> 
      </table> 
     </center> 
     <h:inputHidden id="delId" value="#{allergyListBB.rowId}"></h:inputHidden> 
     </div> 

</ui:define>

什麼的代碼最後一部分做的是進入我的Servlet和從數據庫中檢索的字符串（如奶酪|巧克力|奇瑞|板栗|）然後進入變量availableTags，這是我們傳入自動完成的。

我的servlet是這樣的：

package com.bravo.servlets; 

import java.io.IOException; 
import javax.servlet.ServletException; 
import javax.servlet.annotation.WebServlet; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

import com.bravo.codeMaster.codeMaster; 
import com.bravo.dropdowns.codeMedicationList; 

/** 
* Servlet implementation class Autocomplete 
*/ 
@WebServlet("/Autocomplete") 
public class Autocomplete extends HttpServlet { 
    private static final long serialVersionUID = 1L; 

    /** 
    * @see HttpServlet#HttpServlet() 
    */ 
    public Autocomplete() { 
     super(); 
     // TODO Auto-generated constructor stub 
    } 

    /** 
    * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
    */ 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
     // TODO Auto-generated method stub 
     response.getOutputStream().print("Unauthorized Access."); 
    } 

    /** 
    * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
    */ 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
     // TODO Auto-generated method stub 
     String codeType = request.getParameter("codeType"); 
     response.getOutputStream().print(codeMaster.getStringList(codeType)); 
     // This might as well be "response.getOutputStream().print("one|two|three|") 
     // for testing purposes, just to make sure it's returning something. 
    } 

}

XTRA評論：在我看來，如果我設置的變量availableTags爲字符串的任何字符串，那一刻我設置了$（「＃pAllergy」）。 autocomplete（），我無法改變它。所以我需要從Servlet中獲取正確的字符串。請幫助我，我似乎無法弄清楚爲什麼它在Firefox中失敗，而不是在IE中。我非常感謝幫助！

來源

2011-10-09 Myy

您沒有使用JSP。您正在使用其後繼者Facelets。另外，問題不在JSF/Facelets方面，而在Servlet方面。我修復了不正確的JSP標記。 – BalusC

你忘了設置在servlet的HTTP響應Content-Type頭。假設它是text/plain，則需要之前添加以下行你寫的任何一點到響應：

response.setContentType("text/plain");

這樣的jQuery可以做它的「智能猜測」正確。

來源

2011-10-10 14:34:07 BalusC

是的，這也可以。謝謝你解釋關於servlet。 – Myy

嘗試：

//... 
dataType: 'text', 
success: function(data){ 
    var availableTags = data.split('|');  
    $("#pAllergy").autocomplete({ 
     source: availableTags 
    }); 
}, 
//...

來源

2011-10-09 01:40:53 Marcelo

嘿馬塞洛，感謝您的幫助，但我嘗試過，這是發生了什麼事情：它確實打在servlet中的doPost代碼，並且它確實檢索列表（從DB中的字符串）。但是當我打到成功：帶斷點的函數（數據）時，它告訴我'data'（data Document，activeElement「」，async true，attributes null，baseURI「http：// localhost：8080/miloWeb/Autocomplete」），它會進入ajax調用的錯誤部分，因爲它不能將.split（'|'）放在非字符串的東西上。所以這是否意味着它由於某種原因並不真正獲取該字符串？ IE的罰款，它打破了火狐=（ – Myy

怎麼樣指定'dataType：'text''作爲一個屬性到'$ .ajax'調用？ – Marcelo

OMG！就是這樣！來自http://api.jquery.com /jQuery.ajax/「DataType - 默認值：智能猜測（xml，json，腳本或html）」我想IE很聰明，知道它發回的是什麼類型，但在Firefox中，我必須指定dataType 'text'。Marcelo，我是永恆的感激，謝謝！= D – Myy

JavaScript在Firefox中使用jQuery UI失敗自動完成

回答

相關問題