JQuery Message Form and DIV Padding - Violation in IE

Question

I am trying to create a form that submits data through jQuery and fills the return in the same DIV. Therefore, the page does not refresh after the action.

<div id="add_value_form"> <form method="POST" action="#" onsubmit='return false'> <!-- input fields --> <input type="submit" value="Add" onclick='post_form("/add_value");'> </form> </div> 

JS function:

 function post_form(url) { $.post(url, {'test':'test'}, function(data) { $("#add_value_form").empty().append(data); }, "text"); } 

This works fine in FF3, however it will only work in IE6 / 7.

The server confirms that mail requests come from IE, but it sometimes received message data.

Curiously, I decided to warn the data variable:

 $.post(url, {'test':'test'}, function(data) {alert(data);}, "text"); 

Of course, FF3 prints the HTML return code each time, while IE6 / 7 will mostly print spaces, with random HTML return. I could not find anything on this issue, so what am I doing wrong?

Solved: I traced this with the HTTP redirect that I had in the request processing code. Thus, the function processing the POST request throws the redirect, and IE does not like it. At that time, I had complete mental constipation, and I really did not need a redirection.

The strange part, of course, is that this works in FF, and IE will sometimes work, and the redirect is in place.

Answer 1

I would say that you do not need to use the form tag in this scenario at all.

 <div id="add_value_form"> <!-- input fields --> <input type="button" value="Add" onclick='post_form("/add_value");' /> </div> 

Edit As Paolo Bergantino said, I would also avoid using inline javascript. So use instead:

 <div id="add_value_form"> <!-- input fields --> <input type="button" value="Add" class="formSubmitButton" /> </div> 

Javascript

 $(document).ready(function() { $('.formSubmitButton').click(function() { $.post('/add_value', {'test':'test'}, function(data) { $("#add_value_form").empty().append($(data)); }, "text"); }); }); 

Refresh . Since this still causes the problem, I would perform some tests using the $.ajax method. In addition, I do not believe that POST calls will always be cached, but just in case, try setting the caching to false. Another test to make sure you have no serialization problem is to transfer your data in an already encoded form. And if you still have problems, you can try setting your data type to text

 $.ajax({ url: '/add_value', type: 'POST', cache: false, data: 'test=testValue', dataType: 'text', complete: function(xhr, textStatus) { alert('completed'); }, success: function(data) { alert(data); }, error: function(xhr, textStatus, errorThrown) { alert('woops'); } });