2010-05-10 17 views
8

Deseo ejecutar una llamada ajax tan pronto como se carga un documento. Lo que estoy haciendo es cargar una cadena que contiene datos que usaré para una característica de autocompletar. Esto es lo que hice, pero no está llamando al servlet.Cómo realizar una llamada AJAX inmediatamente al cargar el documento

He eliminado las llamadas a las distintas secuencias de comandos de JS para que quede más claro. He hecho varias llamadas AJAX similares en mi código, pero generalmente se desencadenan por un clic, no estoy seguro de cuál es la sintaxis para hacerlo tan pronto como se carga el documento, pero pensé que sería (pero no lo es):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script src="../js/jquery.js" type="text/javascript"> 
</script> 
<link rel="stylesheet" href="../css/styles.css" type="text/css"> 
<link rel="stylesheet" href="../css/jquery.autocomplete.css" type="text/css"> 
<script type="text/javascript" src="../js/jquery.bgiframe.min.js"> 
</script> 
<script type="text/javascript" src="../js/jquery.dimensions.js"> 
</script> 
<script type="text/javascript" src="../js/jquery.autocomplete.js"> 
</script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 

      $.ajax({ 
       type: "GET", 
       url: "AutoComplete", 
       dataType: 'json', 
       data: queryString, 
       success: function(data) { 
         var dataArray = data; 
         alert(dataArray); 
         } 
       }); 

    $("#example").autocomplete(dataArray); 
    }); 
</script> 
<title></title> 
</head> 
<body> 
    API Reference: 
<form><input id="example"> (try "C" or "E")</form> 
</body> 
</html> 

EDIT: mi código ahora se parece más a Karim:

$(document).ready(function(){ 
    $.ajax({ 
     type: "GET", 
     url: "../AutoComplete", 
     success: function(data) { 
      $("#example").autocomplete(data); 
     } 
    }); 
}); 

no obstante, la función de autocompletar todavía no funciona (la verdad es otra cuestión, por lo que también voy a publicar otra pregunta por lo que tiene una adecuada título).

Mi variable de "datos" que se devuelve parece ... "Manuscrito | Texto | Objeto de información | Baloncesto | Bola | Equipo deportivo | Tarántula" .split ("|");

Si hago

var dataArray = "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|"); 

y luego

$("#example").autocomplete(dataArray); 

Todo funciona bien, pero cuando llegue el valor de dataArray desde el servidor no lo hace.

+0

He vuelto a poner las etiquetas

1

sólo tiene que utilizar

$(function() { 
    // Your code here 
}); 

También asegúrese de que la respuesta es en realidad un JSON. Si el servlet da el error, no se procesará correctamente en su caso. Use firebug para ver si se llama a servlet y cuál fue la respuesta. O haga un registro mínimo en el servidor.

+0

$ (documento) .ready (función() {}); y $ (función() {}); son lo mismo Si quiere ejecutar el código cuando la página ha terminado de cargarse y no cuando el DOM ha terminado de cargarse, necesita usar $ (document) .load – Greg

3

Se está encontrando con ese problema porque la llamada $ .ajax hace no return antes de que se inicie el autocompletado, debido a la naturaleza asincrónica de XHR. La solicitud se envía, la ejecución fluye a la siguiente expresión antes de que dataArray se haya completado dentro de la devolución de llamada success. Prueba esto:

$(document).ready(function(){ 
     $.ajax({ 
      type: "GET", 
      url: "AutoComplete", 
      dataType: 'json', 
      data: queryString, 
      success: function(data) { 
       var dataArray = data; 
       alert(dataArray); 
       $("#example").autocomplete(dataArray); 
      } 
     }); 
}); 

que se asegurará de que su autocompletar se inicializa solamente cuando se haya recibido la respuesta del servidor.

+0

Gracias, probé algo similar pero todavía no funciona, le he hecho otra pregunta en http://stackoverflow.com/questions/2803589/jquery-autocomplete-works-with-a-local-string-but-not-when-the-same-string-is-cal que explica el problema de forma más adecuada. – Ankur

0

Puede usar las herramientas del desarrollador del navegador Google Chrome para ver qué devuelve su servidor. Para acceder a presionar Ctrl + Shift + I y en la vista de la herramienta del desarrollador, verifique la pestaña de red para ver si hay algún error o si hay datos erróneos o no.

+0

Esto debería ser un comentario. – Ren

Cuestiones relacionadas