Ajax Form Does Not Work With Internet Explorer 8,9

Question

I've written a form using ajax, so the page won't refresh after submittion. In Chrome and Firefox it works just fine, the problem comes up when I'm using Internet Explorer ( so far I've only checked 8,9). On IE8,9 I can't send the form , clicking on the submit button does not fire any event , as it should. Here's the code i'm using, I'd like to make clear that I've written the PHP and AJAX code in the same file due to my boss demands

if($_POST['isRadial']){
    if(($_POST['redialVal']) && ($_POST['waitVal'])&& ($_POST['userId']) ){
        $redial = $_POST['redialVal'] ;
        $wait = $_POST['waitVal'];
        $userId = $_POST['userId'];
        $error_message = "123Could Not Save Settings, Please Try Again.";
        $success_message ="Settings Were Updated Successfully, Will Be Implemented In 10 Minutes";
        $query = mysql_query("....");
        $getAll = mysql_query("...");
        if(mysql_num_rows($getAll)>0){
            $query = mysql_query("...'");
        }
        if(!$query){
            echo $error_message;
            return false;
        }
        else
            echo $success_message;
        //Update pull_tables
        file_put_contents("....);
    }
    else
        echo "</br>An Error Occured.Please Save Settings Again123.</br>";
}

Ajax code :

$(function(){
    $('#submitRedialWait').click(function(){
    var redial = $("#redialSettings").val();
    var wait = $("#waitSettings").val();
    //var userData = $("#ui").text();
    var userData=<?php echo $IDuser; ?>;
    $.ajax({
    url: '' , 
    type: 'POST',
    data: {redialVal: redial , waitVal : wait, userId :userData, isRadial:"yes"},
    success: function(result){     
    // $('#RedialWaitResults').text(result) ;
     alert('settings have been saved.');

    }
    });   
    return false;     
    });
});

Do you have any idea what my cause this problem come up ? (except of the existing of IE)

Any suggestion would be helpful , Thanks in advance

Answer 1

When using ajax,ajax will works in background. You have to do what you want on success/error of ajax request, it will do nothing from itself.

If you just want to reload the page af ter success. Just call

document.location.reload(true); or whatever you want...

OR

Show a message and reload window after some time using setTimeOut

setTimeout(function(){document.location.reload(true)},3000);

after alert('settings have been saved.'); in your code.

Answer 2

When I was working with AjaxForm for files submitting asynchronously, I found 2 interesting things.

First, to get ajaxform to work cross browser (IE 7+, chrome, firefox) u got to make sure u're using the submit method of ajaxform, i.e. something like this:

$('form').ajaxForm({
  success: ...,
  error: ...
}).submit();

The second thing surprised me. AjaxForm was working everywhere, including IE 7 and 9, but it wasn't working on IE 8. The reason was this, I forgot the att method=POST. So, u gotta make sure u have something like this:

<form action="/action.php" method="POST">...