Mod_rewrite with jQuery... Why isn't it working?

I have a page that uses jQuery to submit a form and append data back to it. However, it doesn't work when mod_rewrite is used. If you are on the page like this http://mydomain.com/file.php?string=m5cl, then it will work. Weird.

Here's my code:

$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {
    // validate and process form
    // first hide any error messages
$('.error').hide();

var message = $("textarea#message").val();
var fullname = $("input#fullname").val();
var ticket_id = $("input#ticket_id").val();
var date = $("input#datee").val();
var picture_url = $("input#picture_url").val();
var userid = $("input#userid").val();
var user_status = $("input#user_status").val();
var sent = $("input#sent").val();

    var dataString = 'message=' + message + '&user_id=' + userid + '&user_status=' + user_status + '&date=' + date + '&sent=' + sent + '&ticket_id=' + ticket_id;
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  url: "process.php",
  data: dataString,
  success: function() {

         $(wrapperId).append("<div style='background-color:#dcd9d9;padding:15px;-moz-border-radius:8px;border-radius:8px; border:1px solid #d3d0d0;'><img src='" + $('#picture_url').val() + "' style='float:left;margin-right:15px;margin-top:-3px; border:开发者_JAVA技巧3px solid #ffffff;' width='39'><div style='font-size:18px;font-family:Helvetica;color:#363636;font-weight:lighter;margin-bottom:2px;'>" + $('#fullname').val() + "</div><div style='font-size:14px;font-family:Helvetica;color:#363636;font-weight:lighter;text-align:justify;'>" + $('#datee').val() + "</div></div><div style='font-size:15px;color:#363636;line-height:18px;margin-top:15px;padding:0px 15px 0px 15px;text-align:justify;margin-bottom: 30px;'>" + $('#message').val() + "</div>");



      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#name").select().focus();
});

Not an answer to your original question, but it's a critical fix.

You don't have to do all this:

var message = $("textarea#message").val();
var fullname = $("input#fullname").val();
var ticket_id = $("input#ticket_id").val();
var date = $("input#datee").val();
var picture_url = $("input#picture_url").val();
var userid = $("input#userid").val();
var user_status = $("input#user_status").val();
var sent = $("input#sent").val();

    var dataString = 'message=' + message + '&user_id=' + userid + '&user_status=' + user_status + '&date=' + date + '&sent=' + sent + '&ticket_id=' + ticket_id;
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  url: "process.php",
  data: dataString,
  success: function() {

If all of these things are in a <form> element and each of those elements has a name= attribute which is identical to the variable name (so it gets passed to the script properly), you can condense all of that, into this (yes, really):

$.ajax({
      type: "POST",
      url: "process.php",
      data: $('#yourFormId').serialize(),
      success: function() {

Also, since you aren't sanitizing the values, if I put a space into one of those input boxes, your POST request will die, as the request string will be invalid.

Have you tried this?

 var dataString = 
{
  'message': message, 
  'user_id': userid, 
  'user_status': user_status, 
  'date': date,
  'sent':sent,
  'ticket_id': ticket_id
}