Currently I have a page which I have loaded using jQuery as follows:
$('#content').load('mypage.html');
This is called inside site.js
. Inside the loaded page, I have loaded a script which I am trying to return an asynchronous result from, so it does not freeze.
The page is as follows:
<div id="mycontent"></div>
<script type="text/javascript" src="js/getmycontent.js"></script>
<script type="text/javascript">
$(function() {
$('body').ajaxComplete(function() {
var ids = {
"h1": 123,
"h2": 12345
};
//$('.loader-wrapper').show();
// Iterate over id numbers
$.each(ids, function(k, v) {
var mylist;
var call = getMyList(v).done(function(r) {
if(r) {
mylist = r.mylist;
} else {
mylist = null;
}
}).fail(function(x) {
alert(x);
});
console.log(mylist);
});
//$('.loader-wrapper').hide();
});
});
</script>
Here is the getmycontent.js
:
function getMyList(id) {
var url = 'https://api.myurl.org/v1/lists/' + id;
return $.ajax({
url: url,
type: 'get',
dataType: 'json'
});
}
The console doesn't log anything when I have the ajaxComplete
function on body
, but I was doing some reading and this is what someone suggested I do for dynamically loaded pages.
When I remove the ajaxComplete
call, I get this in the console:
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w._evalUrl @ jquery.min.js:2
Re @ jquery.min.js:2
append @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
z @ jquery.min.js:2
html @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w.fn.load @ jquery.min.js:2
(anonymous) @ site.js:20
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2
6VM400:34 undefined
This is VM400 from the console:
$(function() {
$('body').ajaxComplete(function() {
var ids = {
"h1": 123,
"h2": 12345
};
//$('.loader-wrapper').show();
// Iterate over id numbers
$.each(ids, function(k, v) {
var mylist;
var call = getMyList(v).done(function(r) {
if(r) {
mylist = r.mylist;
} else {
mylist = null;
}
}).fail(function(x) {
alert(x);
});
console.log(mylist);
});
//$('.loader-wrapper').hide();
});
});
This might be because of the following reason:
Additional Notes:
- As of jQuery 1.9, all the handlers for the jQuery global Ajax events , including those added with the
.ajaxComplete()
method, must be attached todocument
.- If
$.ajax()
or$.ajaxSetup()
is called with theglobal
option set tofalse
, the.ajaxComplete()
method will not fire.
For more info about $.ajaxComplete()
have a look at the documentation .
The issue has been resolved by changing the page.html
and getmycontent.js
files respectively. Using a callback allowed me to handle the data once it has been retrieved. See ASync Callback Promise .
page.html
:
<div id="mycontent"></div>
<script type="text/javascript" src="js/getmycontent.js"></script>
<script type="text/javascript">
function callback(result) { console.log(result) }
$(function() {
var ids = {
"h1": 123,
"h2": 12345
};
//$('.loader-wrapper').show();
// Iterate over id numbers
$.each(ids, function(k, v) {
var call = getMyList(v, callback);
});
});
</script>
getmycontent.js
:
function getMyList(id, callback) {
var url = 'https://api.myurl.org/v1/lists/' + id;
$.ajax({
url: url,
type: 'get',
dataType: 'json',
async: true,
success: callback
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.