CODEWITHSUNDEEP
javascriptajaxjquery
Al Bennett
Al Bennett

Reputation: 428

Chrome jQuery AJAX failing, not a cross-domain issue

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

Upvotes: 8

Views: 7556

Answers (9)

ToC
ToC

Reputation: 311

It 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'

Upvotes: 5

Jai
Jai

Reputation: 74738

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);
       }
    });
  });

Upvotes: 1

Morv
Morv

Reputation: 390

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.

Upvotes: 0

johnrom
johnrom

Reputation: 672

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"); ?>

Upvotes: 0

Pranav Singh
Pranav Singh

Reputation: 20081

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);
        }
    });
});

Upvotes: 0

VMRodriguez
VMRodriguez

Reputation: 52

Why you don't try this

$('#brochurePage').load($(this).attr('href'),function(){
alert('Load was performed.');
});

Good Luck!

Upvotes: 0

Justin Lau
Justin Lau

Reputation: 360

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.

Upvotes: 0

rnirnber
rnirnber

Reputation: 615

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

Upvotes: 0

Ferry Kobus
Ferry Kobus

Reputation: 2029

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?

Upvotes: 0

Related Questions