I've got some simple JS/jQuery code to make an AJAX call to grab some HTML and shove it into a div on my page. This works fine in Firefox but fails in Chrome.
In the Chrome console I can see the AJAX request shown with a status text of "(failed)" and type "pending".
All the searching I've done has searched is relating to cross-domain issues. This doesn't fit here, I'm running this on a webserver, with a domain name, without a port number appended.
Here's my code sample (you can see I was initially trying to use .load(), same problem):
$('#brochure2012navigation a').click(function(event)
{
event.preventDefault();
//$('#brochurePage').load($(this).attr('href'));
$.ajax({
url: $(this).attr('href'),
dataType: 'html',
success: function(html) {
$('#brochurePage').html(html);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(thrownError);
},
});
});
In Chrome's console the logged xhr object looks like this:
Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}
abort: function (a){a=a||"abort",p&&p.abort(a),w(0,a);return this}
always: function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
complete: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
done: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
error: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
fail: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
getAllResponseHeaders: function (){return s===2?n:null}
getResponseHeader: function (a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c}
isRejected: function (){return!!i}
isResolved: function (){return!!i}
overrideMimeType: function (a){s||(d.mimeType=a);return this}
pipe: function (a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()}
progress: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
promise: function (a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}
readyState: 0
responseText: ""
setRequestHeader: function (a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this}
state: function (){return e}
status: 0
statusCode: function (a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this}
statusText: "error"
success: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
then: function (a,b,c){i.done(a).fail(b).progress(c);return this}
__proto__: Object
Apologies that this looks a bit messy, but I think the important thing is the status of 0.
Monitoring the logs, the request isn't hitting my server.
I'm really stumped here, I'd appreciate any help!
Cheers, Al
I've got some simple JS/jQuery code to make an AJAX call to grab some HTML and shove it into a div on my page. This works fine in Firefox but fails in Chrome.
In the Chrome console I can see the AJAX request shown with a status text of "(failed)" and type "pending".
All the searching I've done has searched is relating to cross-domain issues. This doesn't fit here, I'm running this on a webserver, with a domain name, without a port number appended.
Here's my code sample (you can see I was initially trying to use .load(), same problem):
$('#brochure2012navigation a').click(function(event)
{
event.preventDefault();
//$('#brochurePage').load($(this).attr('href'));
$.ajax({
url: $(this).attr('href'),
dataType: 'html',
success: function(html) {
$('#brochurePage').html(html);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(thrownError);
},
});
});
In Chrome's console the logged xhr object looks like this:
Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}
abort: function (a){a=a||"abort",p&&p.abort(a),w(0,a);return this}
always: function (){i.done.apply(i,arguments).fail.apply(i,arguments);return this}
complete: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
done: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
error: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
fail: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
getAllResponseHeaders: function (){return s===2?n:null}
getResponseHeader: function (a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c}
isRejected: function (){return!!i}
isResolved: function (){return!!i}
overrideMimeType: function (a){s||(d.mimeType=a);return this}
pipe: function (a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()}
progress: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
promise: function (a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}
readyState: 0
responseText: ""
setRequestHeader: function (a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this}
state: function (){return e}
status: 0
statusCode: function (a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this}
statusText: "error"
success: function (){if(c){var a=c.length;n(arguments),j?l=c.length:e&&e!==!0&&(k=a,o(e[0],e[1]))}return this}
then: function (a,b,c){i.done(a).fail(b).progress(c);return this}
__proto__: Object
Apologies that this looks a bit messy, but I think the important thing is the status of 0.
Monitoring the logs, the request isn't hitting my server.
I'm really stumped here, I'd appreciate any help!
Cheers, Al
Share Improve this question asked Jan 22, 2013 at 18:40 Al BennettAl Bennett 4281 gold badge5 silver badges13 bronze badges 12 | Show 7 more comments9 Answers
Reset to default 5It is possible that the ajax call gets blocked by the AdBlock Chrome addon.
Some URLs might get blocked, based on the keys on the adblock blacklist. On DevTools Network tab, such requests are marked as 'failed', in status 'pending'
You code seems perfect but some typos seen in your code, i added some of the other elems
$('#brochure2012navigation a').click(function(event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
dataType: 'html',
async:false, // <------------------try with adding this
type:'post', // <------------------try adding this too
success: function(data) {
$('#brochurePage').html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(thrownError);
} // <----------------------comma found here
});
});
or you might be get interest in this:
$('#brochure2012navigation a').click(function(event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
type:'POST',
success: function(response, status, xhr){
var ct = xhr.getResponseHeader("content-type") || "";
if (ct.indexOf("html") > -1) {
$('#brochurePage').html(data);
}
if (ct.indexOf("json") > -1) {
// handle json here
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(thrownError);
}
});
});
I made a small change to your code:
var url = $(this).attr('href');
$.ajax({
url: url,
....
After that I set your code to work on a jsfiddle:
http://jsfiddle.net/kyz69/1/
I'm getting the content of /_display/ ( http://fiddle.jsshell.net/_display ) I'm linking to that because you didn't provide the url you're trying to load and that was the only page I could find that would return data because it's not cross domain.
I tested the code on Windows + Google Chrome Version 24.0.1312.52 m
Can you test the fiddle and post here the outcome?
could it be the trailing comma after the error function's closing brace? Usually you only would put a comma if there are additional objects...
I wish I have enough reputation to post a comment to ask for more details, but I don't. So I'll give my best guess by experience.
If it was a cross domain issue, Chrome would have logged an error message in the console in red. Test in this Fiddle.
One way I know that could help is to user a sniffer. Luckily Chrome have a simple one built in the Chrome Developer Tool, by pressing Ctrl + Shift + I, I guess you probably know this as you have copied the console output, but this time go to the Network tab, make sure it stays open when you click on the link that triggers this click event handler.
You'll see a new record shown in the table, click on its name, and you can take a look at the request and respond headers, or even rendered responds. Hopefully this will give you more helpful information as I usually get mine here.
Why you don't try this
$('#brochurePage').load($(this).attr('href'),function(){
alert('Load was performed.');
});
Good Luck!
Last attribute of ajax or json doesn't end with comma , no doubt it was failing in chrome & IE but why run good in firefox, I am stumped :), try this:
$('#brochure2012navigation a').click(function(event)
{
event.preventDefault();
//$('#brochurePage').load($(this).attr('href'));
$.ajax({
url: $(this).attr('href'),
dataType: 'html',
success: function(html) {
$('#brochurePage').html(html);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(thrownError);
}
});
});
Most browsers don't actually return any kind of interesting error if it is a cross-domain scripting issue. Any one I've used returns a StatusText of "error" and a readyState of 0, as you have shown. You may be thinking there is no crossdomain action happening because you are actually calling something from the same domain, maybe a different subdomain or a different port (https/non-https). It is possible you have an out-of-date version of Firefox that doesn't compensate for cross-domain restrictions. You can verify in your Chrome by looking in the Net request as past posters have suggested, and looking for the property: "Origin: null"
If indeed it turns out to be a cross-domain issue (I think it is), you will need to add the following line of PHP (or a similar header in the backend language of your choice) to the top of the file you are requesting, prior to any HTML code.
<?php header("Access-Control-Allow-Origin: example.com"); ?>
If you use jquery, you may also need:
<?php header("Access-Control-Allow-Headers: x-requested-with"); ?>
If your server isn't getting any request then problem must lie within the URL that you are using.
Are you typing the protocol and full URL or just partial?
What happens if you hard code a link and use it? (like follows)
$('#brochure2012navigation a').click(function(event)
{
event.preventDefault();
//$('#brochurePage').load($(this).attr('href'));
$.ajax({
url: $(this).attr('http://www.google.com'),
dataType: 'html',
success: function(html) {
$('#brochurePage').html(html);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
console.log(thrownError);
},
});
});
If i were you i would make sure that the $.ajax is really hitting its target by hardcoding a known target first.
If the hardcoded target isn't getting any request the problem lies somewhere else.
$(this).attr('href')give you a valid url? does going to that page directly work? what are you getting in the network tab for that ajax request? (ctrl+shift+j in Chrome) – Kevin B Commented Jan 22, 2013 at 18:51