JavaScript failing in Firefox using jQuery ui Autocomplete_问答_开发者

I'm working on a JSF 2.0 web app, and I'm having trouble passing in a String composed of different words separated by a '|' to jQuery's AutoComplete using a servlet. It works great in IE, but seems to fail 开发者_运维技巧retrieving any data in Firefox.

My XHTML file is:

<!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>

What this last part of code is doing is going into my Servlet and retrieving from the DB a string (i.e. cheese|chocolate|chery|chestnut| ) which then goes into the variable availableTags which is what we pass into the autocomplete.

My servlet looks like this:

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 COMMENTS: It seems to me that if I set the variable availableTags to any string of strings, the moment I set the $("#pAllergy").autocomplete(), I can't change it. so I need to get the correct string from the Servlet. Please help me out I can't seem to figure out why it fails in Firefox and not in IE. I greatly appreciate the help!

Try:

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

You forgot to set the HTTP Content-Type response header in the servlet. Assuming that it's text/plain, you need to add the following line before you write any bit to the response: