Using AJAX and IE with content that has HTML tags – ugh.

Posted: 2013/01/23 in Development, HTML / HTML5, JavaScript

Background:

Developed this really slick, internal website where I use a ton of AJAX calls to constantly load next-steps into the browser.  I’m using this as a way to make the screen much easier to use — instead of a large number of form-fields to fill out, the user is only given what is needed right-now, then, given what’s needed next in a contextually relevant way (thereby not even having/displaying fields that are irrelevant to the circumstance).

And then I tried it all in IE.  Ugh.  Finally got it to work (CSS hacks and all), only to have formatted text have its tags stripped.  Instead of having a heading-line followed by an unordered list, I got plain text.  PLAIN text.  Grrr.

Sure, most of my co-workers use Chrome or Firefox, but not all…

Been using jQuery’s really slick AJAX Shorthand methods lately.  They are super slick and very easy to use.  However, when it comes to debugging what’s going wrong, I end up using the base ‘ajax’ method.  I used way too many a lot of jQuery’s AJAX settings to try to get IE to like the incoming content.  Spent a lot of time with content-headers/display-types, trying to send JSON, etc.  Nuthin.  Every other attempt at something cool would break either Chrome or Firefox.  And NEVER work in IE.

Solution:

A solution that currently works (as of 2013 Jan 13) in Chrome, Firefox, and IE 8 (my IE 9 is inaccessible for the time being) is, in essence, to create a Text Node ( smartly named createTextNode() ) and append it to the element.

jQuery.ajax({
   url: "coolstuff.php",
   type: "POST",
   cache: false,
   data: {"first_data_point" : "data data data", "second_data_point" : "more data, more data" },
   success: function(data) {
      // here comes the good stuff
        var blurb = document.createTextNode(data); // throw the incoming HTML-with-tags into a Text Node
        document.getElementById("some_element").appendChild(blurb);
      // end good stuff
  }
});

It would have been nicer to use jQuery’s .html() function, which worked fine in Chrome and Firefox, like so:

jQuery("some_element").html(data);

But no such luck.  For some reason, the data gets stripped of all tags.  And, yes, the incoming blurb is clean code.   Perhaps I needed to treat the incoming blurb as an entire HTML document, with doc-types and everything.  But that would turn this into a worthless project (read: not worth the time/effort) as I am returning nicely formatted text back to the server (using my new, maybe favorite, text-editor / CMS-y tool CK Editor!!).

Lots of time and effort, a labor that ended in one more line of code than before.  But it now works in IE.  Ugh.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s