JQuery error in Chrome jQuery, not cross-domain issue

Question

I have simple JS / jQuery code to make an AJAX call to grab some HTML and paste it into a div on my page. This works fine in Firefox, but doesn't work in Chrome.

In the Chrome console, I see the AJAX request shown with the status text "(failed)" and enter "pending."

All the searches that I performed are related to cross-domain issues. This does not fit here, I run it on a web server with a domain name without adding a port number.

Here is my sample code (you can see that I originally tried to use .load (), the 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 the Chrome console, the registered xhr object is as follows:

 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 

Sorry this looks a little dirty, but I think situation 0 is important.

Monitoring logs, the request does not get to my server.

I am really very worried here, I would appreciate any help!

Cheers, Al

Answer 1

It is possible that the ajax call is blocked by the AdBlock Chrome addon.

Some URLs may be blocked based on keys in the adblock blacklist. On the tab "Network DevTools" such requests are marked as "failed", in the state of "pending"

Answer 2

The code seems fine, but some typos visible in your code, I added some of the other elements

  $('#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 may be interested 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); } }); }); 

Answer 3

I made a small change in your code:

 var url = $(this).attr('href'); $.ajax({ url: url, .... 

After that, I installed your code to work with jsfiddle:

http://jsfiddle.net/kyz69/1/

I get the contents of / _display / ( http://fiddle.jsshell.net/_display ) I refer to this because you did not specify the URL that you are trying to download, and that was the only page I could find that will return data because it is not a cross domain.

I tested the code on Windows + Google Chrome version 24.0.1312.52 m

Can you check the fiddle and post the result here?

Answer 4

Could this be the final comma after closing the function to close the error? Usually you only add a comma if there are additional objects ...

Answer 5

I'm sorry that I do not have enough reputation to post a comment to find out the details, but I do not. Therefore, I will give the best assessment of experience.

If this is a cross-domain problem, Chrome would launch a console error message in red. Test in this script .

One of the ways that I know can help a sniffer user. Fortunately, Chrome has a simple construction in the Chrome Developer Tool by pressing Ctrl + Shift + I , I think you probably know this because you copied the console output, but this time go to the Network tab, make sure it remains open. when you click on the link that fires this click event handler.

You will see the new record shown in the table, click on its name, and you can look at the headers of the requests and answers or even give answers. I hope this gives you more useful information, as I usually get mine here.

Answer 6

Why aren't you trying to do this

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

Good luck

Answer 7

The last ajax or json attribute does not end with a comma, no doubt it failed in chrome and IE, but why work well in firefox, I'm stumped :) try the following:

  $('#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); } }); }); 

Answer 8

Most browsers do not actually return any interesting error if this is a cross-domain scripting problem. Any that I used returns StatusText "error" and readyState from 0, as you showed. Perhaps you think that no action is taken with crossdomain because you are actually calling something from the same domain, possibly another subdomain or different port (https / non-https). You may have an outdated version of Firefox that does not compensate for cross-domain restrictions. You can check in your Chrome by looking in the Net request, as previous posters suggested, and looking for the property: "Origin: null"

If this is really a cross-domain problem (I think it is), you will need to add the following PHP line (or a similar header in the backend language of your choice) to the beginning of the file you request, before any HTML code.

 <?php header("Access-Control-Allow-Origin: example.com"); ?> 

If you use jquery, you might also need:

 <?php header("Access-Control-Allow-Headers: x-requested-with"); ?> 

Answer 9

If your server does not receive any request, the problem should lie within the URL you are using.

Are you entering the protocol and full URL or just partially?

What happens if you hardcode the link and use it? (properly)

 $('#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 $ .ajax really hits its target with hard coding of a known target.

If a hard-coded target does not receive any request, the problem lies elsewhere.