Form submition with jQuery is not working correctl

Question

jQuery $.ajax() does not seem to work correctly with IE8 but it is working with Firefox, Chrome and Safari. I am submittin the form and response back in JSON format.

Here is my code:

test.php:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>

<form action='_test.php' method='post' class='ajaxform'>
 <input type='text' name='txt' value='Test Text'>
 <input type='submit' value='submit'>
</form>

<div id='testDiv'></div>

_test.php:

<?php
      $arr = array( 'testDiv' => $_POST['txt'] );
      echo json_encode( $arr );
?>

jsFile.js:

jQuery('.ajaxform').live('submit', function(event) {

 $.ajax({
        url  : $(this).attr('action'),
        type : $(this).attr('method'),
        dataType: 'json',
        data : $(this).serialize(),
        success : function( data ) {
     for(var id in data) {
      jQuery('#' + id).html( data[id] );
     }
            }
    });

 return false;
});

Behavior:

In Firefox, Chrome, Safari:

When I submit the form then value of textfield(txt) is successfully populated in DIV(testDiv) without disturbing whole page.

In IE:

When I submit the form then it just shows json form on screen like this: {"testDiv":"Test Text"}

How to solve this problem in IE?

Thanks.

Answer 1

I replaced my jquery code with this and it is working on all browsers:

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

I don't know what is this but it is working now. Thanks to all to participate and help me to solve this issues.

Answer 2

Your JSON response (output of _test.php) should contain : instead of ;, as @sje397 said. Seems like other browser are okay with ;, but not IE8, so the value is kept a string instead being parsed as an object.

EDIT: for some reason your data isn't being converted to json, try putting

if(typeof(data)=='string') {
  data=$.parseJSON(data);
}

at the top of your success handler and see if it works.

Answer 3

1. Try changing the selector (to input:submit or :submit)
2. Add an error handler to the ajax call and see what it says

Answer 4

instead of

for(var id in data) {
  jQuery('#' + id).html( data[id] );
}

have you tried using $.each() ?

jQuery.each(data , function(id, val) {
  jQuery('#' + id).html( val );
});

and also, you have misinterpret $(this), (I guess)

jQuery('.ajaxform').live('submit', function(event) {

  var $this = $(this); // add this line...

 $.ajax({
        url  : $this.attr('action'),
        type : $this.attr('method'),
        dataType: 'json',
        data : $this.serialize(),
        success : function( data ) {
     for(var id in data) {
      jQuery('#' + id).html( data[id] );
     }
            }
    });

 return false;
});

Answer 5

FYI:

Naveed, I tried the code you posted in IE8 on Win 7 (both in Compatibility and non-Compatibility modes) and it displayed the 'Test Text' correctly as plain text inside the div and not in JSON format.