Loathing IE and it's refusal to respond to JQuery Post

Question

Ladies / Gents:

Doing a $.post which works fine in Chrome & FireFox. IE - not so much...the success callback (addTicketAndRender()) never gets hit:

http://jsfiddle.net/AeQxJ/1/

I've read something about needing to do "cache-busting" against IE with my POST, but I'm relatively new to this stuff so don't know if that's the appropriate thing to try and if so, how to do it.

Source:

function addTicketAndRender(incomingTicket) {

    console.log("Add and Render");
    alert(incomingTicket);
}



$(document).ready(function() {

    console.log('ready');

    // variables to feed trusted ticket retrieval
    var trustedURL = "http://tableau.russellchristopher.org/trusted",
        userName = "foo",
        serverURL = "http://tableau.russellchristopher.org/";



    $.post(trustedURL, {
        username: userName,
        server: serverURL,
        client_ip: "",
        target_site: "",
        cache: "false"
    }, function(response) {
        addTicketAndRender(response);
    });

});

Little help, please?

Update1: Switched this out to an ajax post: No difference. Still good on Chrome and Firefox, still dead in IE:

    $.ajax( {
      url : trustedURL,
      type: "POST",
      data : {
        username : userName,
        server : serverURL,
        client_ip : "",
        target_site : "" 
      },    
      cache : false


    } ).done( addTicketAndRender );

Update2: Integrated additional cache-busting technique. Same behavior - Chrome/FF works, nothing from IE - Using Fiddler, I can see the POST go out when running the code below from http://jsfiddle.net/AeQxJ/3//. In IE, that never happens. Tested outside of jsfiddle and see the same result. Next step: Rule out stupid IE browser settings on my part by testing on a box where I haven't touched browser settings.

function addTicketAndRender(incomingTicket){


    alert(incomingTicket);
}

$(document).ready(function() {
   // variables to feed trusted ticket retrieval

    var trustedURL = "http://tableau.russellchristopher.org/trusted",
        userName = "foo",
        serverURL = "http://tableau.russellchristopher.org/";

var number=Math.floor(Math.random()*1);
$.ajax( {
      url : trustedURL + "?" + number,
      type: "POST",
      data : {
        username : userName,
        server : serverURL,
        client_ip : "",
        target_site : "" 
      },    
      cache : false
     } ).done( addTicketAndRender );

});

Update 4: Ruled out my copy of IE as an issue. Added error trapping code to the POST, and ONLY when running in IE, I see this thrown:

         error: function(xhr, textStatus, error){
              alert(xhr.statusText);
              alert(textStatus);
              alert(error);

//output:

//    xhr.StatusText: No Transport
//    testSttus: Error
//    error: No Transport

Searching on "IE No Transport jquery POST" leads me here:

jQuery Call to WebService returns "No Transport" error

Post indicates adding jQuery.support.cors = true; should resolve the issue, but when I do, errors are returned:

//output:

//    xhr.StatusText: Error: Access is denied
//    testSttus: Error
//    error: Error: Access is denied

Did you try checking the error() value to see what is being thrown? — JohnFx, Jun 05 '12 at 12:33
Did you try using the jQuery.ajax function with the error method to see what the error message is? You might need to be using [jsonp](http://www.ibm.com/developerworks/library/wa-aj-jsonp1/) due to a violation of the same origin policy. — Mark M, Jun 05 '12 at 12:42
Wait, why do that work in chrome and firefox at all? What happened to the same origin policy? — Alxandr, Jun 05 '12 at 12:53
i would suggest adding an error handler to your $.ajax attempt and see what the exception coming back is. — jbabey, Jun 05 '12 at 12:57
@MarkM Thanks, I already have Access-Control-Allow-Origin in my headers to avoid this. — Russell Christopher, Jun 05 '12 at 13:07
@Alxandr I actually have Access-Control-Allow-Origin headers in my httpd to allow calls from a couple domains. — Russell Christopher, Jun 05 '12 at 13:08
@jbabey Can I just do something like .error(function())? Never tried this. — Russell Christopher, Jun 05 '12 at 13:29
@RussellChristopher yes, check out [5 ways to make ajax calls with jquery](http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/), you add the `error` function just like you had a `success` function before. — jbabey, Jun 05 '12 at 13:33
Is IE blocking your script? Have you tried adding `` to your doc? [see this link](http://stackoverflow.com/questions/7038724/how-to-automaticaly-allow-blocked-content-in-ie) — Mark M, Jun 05 '12 at 13:49

score 3 · Answer 1 · answered Jun 05 '12 at 12:31

3

Change

$.post( ...
    cache: "false"
    ...

To:

$.ajax(...
    cache: false,
    ...

Note, The first cache is a meaningless string, while the later is a Boolean false.

answered Jun 05 '12 at 12:31

gdoron

147,333
58
291
367

Makes sense - Did, and no joy: http://jsfiddle.net/AeQxJ/2/. The cache-busting I read about had something to with literally appending a unique value to the POST - like a timestamp or something. Does that ring a bell for you and/or sound reasonable? – Russell Christopher Jun 05 '12 at 12:37
@RussellChristopher. Yes, this is how it works. anyway, do you see errors in the console? in firebug? – gdoron Jun 05 '12 at 12:40
Again, new to this stuff - I can use Firebug to monitor work I'm doing in IE? It also looks like I need to do more quick on the $.ajax call - not as simple as swapping out post/ajax...wait 5 :) – Russell Christopher Jun 05 '12 at 12:42
@RussellChristopher. I can't debug for you... You should [read this](http://stackoverflow.com/questions/2022089/how-can-i-watch-i-e-debug-xmlhttprequest-actions-in-ie8-using-firebug-li) and learn how to do it yourself. tell my what the results are. – gdoron Jun 05 '12 at 12:47
IE8+ has a built in debugger, use it and use Fiddler to watch http traffic. – epascarello Jun 05 '12 at 12:47
@epascarello. Read the comment before you... :) 15sec. – gdoron Jun 05 '12 at 12:47
Fixed up the $.ajax request, put a breakpoint on it, and stepped through. Also have fiddler on to see if the POST is actually made. I hit $.ajax and jump into jquery1.7.2.min.js at which point I honestly lose track of what's going on. I step over until I'm back out into my code. Success callback is not hit. Interesting thing is that I NEVER see a POST in Fiddler. – Russell Christopher Jun 05 '12 at 13:03
@gdoron That's what I thought, but the same ajax function is working fine in Chrome & FireFox http://jsfiddle.net/AeQxJ/3 In Chrome/FF, I see the post going out even when I'm running from inside jsfiddle. Same thing from IE never POSTS. I'm beginning to wonder if I've just done something goofy to my browser settings. May try this on a virgin IE install on a different machine... – Russell Christopher Jun 05 '12 at 13:24

score 1 · Accepted Answer · answered Jun 05 '12 at 12:57

1

If the cache: false is not working for you, the old school way was to add a get parameter to the url, like a random number, so:

var number=Math.floor(Math.random()*1)
$.ajax( {
      url : trustedURL + "?" + number,
      type: "POST",
      data : {
        username : userName,
        server : serverURL,
        client_ip : "",
        target_site : "" 
      },    
      cache : false


    } ).done( addTicketAndRender );

This should help you debugging as well (change from random number to sequential). If still doesnt work I remove .done and use something like complete i.e.

$.ajax( {
      url : trustedURL,
      type: "POST",
      data : {
        username : userName,
        server : serverURL,
        client_ip : "",
        target_site : "" 
      },    
      cache : false,
      complete : function() {
         addTicketAndRender
      }
  });

One last thing, if your doing this using your jsfiddle page, make sure you remove console.log() from your code, as this will cause IE to break (it doesn't understand console.log).

answered Jun 05 '12 at 12:57

Abe Petrillo

2,368
23
34

Madness. Added your suggestion to http://jsfiddle.net/AeQxJ/3/. It works in Chrome/Firefox - I see the POST request going out. In IE9, nothing. @Alxandr says it works in IE10 for him, however. – Russell Christopher Jun 05 '12 at 13:21
1

This brings up an alert box for me : http://jsfiddle.net/P4Xvu/ , so it is completing the ajax action. Note I also removed the .done and replaced with complete – Abe Petrillo Jun 05 '12 at 14:24
1

You're right. It returns the same statusText of "No Transport" as my error handler. I found this http://stackoverflow.com/questions/5087549/access-denied-to-jquery-script-on-ie which seems to be the solution. IE doesn't actually support Cross Domain requests with jquery, even if the SERVER does http://martinkool.com/post/18182537575/jquery-support-for-cross-domain-xhr-in-ie So, I have to use this XDR thing, or wait till IE 10, which will support what I need. – Russell Christopher Jun 05 '12 at 16:50

score 0 · Answer 3 · answered Jun 05 '12 at 12:42

$.post is only a shorthand version of $.ajax() link: http://api.jquery.com/jQuery.post/

If you need more control I suggest using $.ajax() since you have a lot more option with the "native" method. Link: http://api.jquery.com/jQuery.ajax/

Besides a good coding tips concerning jQuery.ajax() is always set $.ajax({cache: false}) somewhere as a default, since IE is (surprise) the only browser with cache: true as default

score 0 · Answer 4 · edited May 23 '17 at 10:09

0

IE tends to trip on console.log(''); statements. Try to wrap it into a Log() function:

function Log(text) {
    try {
        console.log(text);
    }
    catch (e) {
    }
}

If that fixes your problem, you'll want to use this approach to using console.log() throughout your project.

edited May 23 '17 at 10:09

Community

1
1

answered Jun 05 '12 at 12:59

kalyfe

1,005
1
16
33

Thanks, I removed those for IE testing. – Russell Christopher Jun 05 '12 at 13:21

Loathing IE and it's refusal to respond to JQuery Post

4 Answers4