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

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 2

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 3

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

Answer 4

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 5

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 6

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() {

    }
});