title: Ajax and JSON response bug in Internet Explorer (works in all other browsers)
body: <p>For some reason IE is asking us to download a file instead of running it as ajax. This works in all browsers except IE. I tried messing with the headers that it returns with no luck. </p>
  
  <p>The function grabs form data then post's it the response is a can be an array of any number of items to be updated on the page. </p>
  
  <p>Its not suppose to be file its suppose to be just a json response.</p>
  
  <p>PHP</p>
  
  <pre><code>header('Content-type: application/json');
  
  $error = "The Email and Password you entered could not be resolved.";
  $elements[0]['target'] = '.error_report';
  $elements[0]['action'] = 'inside';
  $elements[0]['data'] = '&lt;p&gt;'.$error.'&lt;/p&gt;';
  $this-&gt;output-&gt;set_output(
    json_encode(array("elements" =&gt; $elements))
  );
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(document).ready(function () {
      jQuery.ajaxSetup({
          cache: false,
          dataType: 'json',
          error: function () {
              alert("Request was not successful. Please try again shortly.");
          }
      });
  
      $(document).ajaxSuccess(function (e, xhr, settings) {
          var response = xhr.responseText;
          if (settings.dataType != 'json') {
              return;
          };
  
          try {
              response = jQuery.parseJSON(response);
          } catch (e) {
              alert(e);
              return;
          }
  
          if (response.elements instanceof Array) {
              var reqs = ['target', 'action'];
              var valid = true;
              for (var i=0;i&lt;response.elements.length;i++) {
                  var cur = response.elements[i];
                  var sel;
  
                  for (var j=0;j&lt;reqs.length;j++) {
                      if (typeof cur[reqs[j]] !== "string") {
                          valid = false;
                          break;
                      };
                  };
  
                  if (!valid) {
                      continue;
                  };
  
                  sel = $(cur.target);
                  switch (cur.action) {
                      case "inside":
                          sel.html(cur.data);
                      break;
                      case "instead":
                          sel.replaceWith(cur.data);
                      break;
                      case "remove":
                          sel.remove();
                      break;
                      case "refreshPage":
                          window.location.reload();
                      default:
                          if (typeof sel[cur.action] === "function") {
                              sel[cur.action](cur.data);
                          }; // else continue
                      break;
                  };
              };
          };
  
  
              // Dispatch the AJAX request, and save it to the data object so that
              // is can be referenced and cancelled if need be.
  
              self.data('ajaxify.xhr', jQuery.ajax({
                  url: this.action,
                  type: 'post',
                  dataType: options.dataType,
                  data: (beforeSubmitIsJquery ? beforeSubmitResult.serialize()
                                              : self.serialize()),
                  success: function (/**/) {
                      cleanup();
  
                      options.onSuccess.apply(that, arguments);
                  },
                  error: function (/**/) {
                      cleanup();
  
                      options.onError.apply(that, arguments);
                  },
                  complete: function (/**/) {
                      options.onComplete.apply(that, arguments);
                  }
              }));
  </code></pre>