Menu
I want to execute an ajax call as soon as a document is loaded. What I am doing is loading a string that contains data that I will use for an autocomplete feature. This is what I have done, but it is not calling the servlet.
I have removed the calls to the various JS scripts to make it clearer. I have done several similar AJAX calls in my code but usually triggered by a click event, I am not sure what the syntax for doing it as soon as the document loads, but I thought this would be it (but it's not):
<!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: my code now looks more like Karim's:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../AutoComplete",
success: function(data) {
$("#example").autocomplete(data);
}
});
});
Nonetheless the autocomplete still doesn't work (admittedly another question altogether, so I will also post another question so it has an appropriate title).
My variable "data" that is being sent back looks like ... "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|");
If I do
var dataArray = "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|");
and then
$("#example").autocomplete(dataArray);
It all works fine, but when I get the value of dataArray from the server it doesn't.
705
They are all equally fast, the only question is which you find most readable. If you will be making numerous similar ajax calls then it is best to use $.
Synchronous AJAX call is made when async setting of jQuery AJAX function is set to false while Asynchronous AJAX call is made when async setting of jQuery AJAX function is set to true. Default value of the async setting of jQuery AJAX function is true.
I recently remembered this and I thought to myself: Since async/await is just Promise's under the hood, I wonder if I can use async/await with jQuery's $. ajax(). Turns out, you can!
You're running into that problem because the $.ajax call does not return before the autocomplete is initilised, due the the asynchronous nature of XHR. The request is sent, execution flows into the next expression before dataArray has been filled up within the success callback. Try this:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "AutoComplete",
dataType: 'json',
data: queryString,
success: function(data) {
var dataArray = data;
alert(dataArray);
$("#example").autocomplete(dataArray);
}
});
});
That will ensure that your autocomplete is initialised only when the response from the server has been received.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
