jQuery Ajax fails when posting data due to keyword in post data

Question

I know why the post fails, but I'm not sure how to resolve it and I can't find any other references to this. I'm taking our references to jEditable to make this simpler, as it happens without the jEditable plugin.

So how the heck do I "escape" the keyword so that it posts correctly? Here's relevant code:

Test

<script type="text/javascript">
$(function() {
 $('#button').click(function() {
  $.ajax({
   type : 'POST',
   url : 'ajax/post_cms.php',
   dataType : 'html',
   data : {
    id : '1',
    data : '<p>This is a test of the system that shows me an alert !</p>'
   },
   success : function(data) {
    console.log(data);
   },
   error : function(XMLHttpRequest, textStatus, errorThrown) {
    console.log('An Ajax error was thrown.');
    console.log(XMLHttpRequest);
    console.log(textStatus);
    console.log(errorThrown);
   }
  });
 });
});
</script>

<input type="button" name="button" value="button" id="button" />

When it errors out, it's throwing the "error:" callback function, and the "errorThrown" is logged as undefined. I'm positive it's the word "alert" because if I spell it "allert" in the one place it appears, everything posts just fine. If you take out the HTML (so it's just "data : 'This is a test of the system that shows me an alert !'") it works just fine.

XMLHttpRequest = "XMLHttpRequest readyState=4 status=0 multipart=false" textStatus = "error" errorThrown = "undefined"

GAH!! HELP!!

Answer 1

If it's only the word alert, you could simply change it to something else, like #1234# and then parse it back. It's hacky but a library that crash if you enter "alert" sounds pretty funky to me.

You could also go in the lib code and fix it... or open a ticket and get them to fix it. It sounds to me it's a pretty important issue!

Answer 2

UPDATE: The problem was a firewall catching the AJAX request as a XSS attack. If you're experiencing problems similar to those exhibited below, make sure to check your environment.

Symptoms:

1. Post data is failing with an error code of 0
2. Post data works in other places but not in your environment
3. Post data works as long as it doesn't contain any javascript functions
4. Your library doesn't seem like it should be at fault based on documentation
5. You can't find a bug in your library.

I think there's something else wrong here other than jQuery. Your initial example works fine for me.

See a working example here: http://jsbin.com/ifami

Note: I had to change your the ajax URL to a valid url but otherwise there were no other changes.

That being said, you could try encoding your values as URI components:

<script type="text/javascript">
$(function() {
  $('#button').click(function() {
    $.ajax({
      type : 'POST',
      url : 'ajax/post_cms.php',
      dataType : 'html',
      data : {
        id : '1',
        data : encodeURIComponent('<p>This is a test of the system that shows me an alert !</p>')
      },
      success : function(data) {
        console.log(data);
      },
      error : function(XMLHttpRequest, textStatus, errorThrown) {
        console.log('An Ajax error was thrown.');
        console.log(XMLHttpRequest);
        console.log(textStatus);
        console.log(errorThrown);
      }
    });
  });
});
</script>

Answer 3

I think maybe your data: parameter needs another set of parenthesis, like so:

 data : ({ id : '1',
           data : '<p>This is a test of the system that shows me an alert !</p>'
           }),