jQuery $.post update not working in IE

Question

I can't get this update script to work in IE. Works fine in every other browser. IE tells me that the update was performed. However, it wasn't. I've no more hair left to pull out..grr. BTW I've tried $.ajax and $.get too..still no luck. I'm thinking it may have something to do with the live click handler. Don't know...I've tried everything..(putting headers for no-cache, attaching a random number to the end of my url string)..nothing fricken works...blasted IE.

This is the $('.save').live('click') function I am using:

$(".save").live("click", function(){
  $.post("update.php", { cache : false, saveID : saveIt.value, saveMo : saveMonth, saveYr : saveYear, saveCtg : saveCt, saveThg : saveTh },
  function(data){
    if(data.success) {

      $(textareaThoughts).hide();
      $(saveIt).parents(".dirRowOne").find(".cancel").hide();
      $(saveIt).parents(".dirRowOne").find(".edit, .del").show();
      $(saveIt).hide();
      $("#dirConsole").html(data.message);

    } else if(data.error) {
    }
  }, "json");
return false;
});

Here's the update.php

<?php

  if($_POST) {

      $data['id'] = $db->escape_value($_POST['saveID']);
      $data['months'] = trim($db->escape_value($_POST['saveMo']));
      $data['years'] = trim($db->escape_value($_POST['saveYr']));
      $data['cottages'] = trim($db->escape_value($_POST['saveCtg']));
      $data['thoughts'] = trim(htmlentities($db->escape_value($_POST['saveThg'])));

      $id = $data['id'];
      $m = $data['months'];
      $y = $data['years'];
      $c = $data['cottages'];
      $t = $data['thoughts'];

      $query = "UPDATE //tablename SET month = '{$m}', year = '{$y}', cottage = '{$c}', thoughts = '{$t}'  WHERE dirID = '{$id}'";
      $result = $db->query($query);

       if($result) {
          $data['success'] = true;
          $data['message'] = "Update Successful!";
       } else {
          $data['error'] = true;
       }

 echo json_encode($data);

 }


?>

This is the JSON response:

{"id":"360","months":"June","years":"1990","cottages":"Cedar","thoughts":"Hello","success":true,"message":"Update Successful!"}

Answer 1

I agree with the answer above. I've seen IE flake with AJAX requests, both GET and POST, when a cache-busting string is not used. Just append a random cache busting string to your URL like so:

    $.post("update.php?ts="+new Date().getMilliseconds(), { cache : false, saveID : saveIt.value, saveMo : saveMonth, saveYr : saveYear, saveCtg : saveCt, saveThg : saveTh },
      function(data){
...

and it should just start working in IE.

Answer 2

Finally! I solved my problem which is because of "same origin policy" and just raise in IE!: I've just change the URL parameter from : 'http://mysite.com/api/' to '/api/' and it works!!!

hope it help some of you!

Answer 3

Have you tried removing the "return false". This seems to cancel the onclick event in IE.

Answer 4

First things that comes to my mind is a caching problem on the AJAX request. Try appending a random value (using Math.Random() or whatever you want) to the POST request and see what happens. I always append a random value to GET requests to ensure the responses are unique but I'm not sure how about the POST request.

Also check out this link and see if any of it applies: http://greenash.net.au/posts/thoughts/an-ie-ajax-gotcha-page-caching

Answer 5

At this point in the process I would set up a server side log and see what IE is actually posting and if it was actually posting anything, not much of a code hint but the code looks good to me.

Answer 6

I recommend using link text with turned on parameter value capturing for post mortem debugging. It is free so give it a try.

Answer 7

Have you tried using the base .ajax method instead of the post abstraction?

http://docs.jquery.com/Ajax/jQuery.ajax#options

Perhaps it's not detecting the datatype with the post method.

Here is an full ajax call that works for me:

$.ajax({
    type: "POST",
    url: "content_admin.asmx/UpdateFolderDocumentOwner",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: '{documentID:' + $("#did").val() + '}',
    error: handleJsonError,
    success: function() {

    }
});  

Answer 8

Changing

<meta http-equiv="content-type" content="text/html;charset=utf-8">

to

<meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

worked for me.

Answer 9

For debugging problems like these make sure you get some information about the error back. IE tends to be silent when something goes wrong, but there is a way to get an error back:

$.post("update.php",{data:"blabla"},function(){
  /*... stuff to do on success...*/
},"json").fail(function(XMLHttpRequest,textStatus,errorThrown){
  /*... display the errors here so you know what is wrong...*/
  alert(textStatus+": "+errorThrown);
});

At least you know what's wrong and you can start searching more effectively for the right solution.