Post Form in JQuery und bevölkern DIV - gebrochen in IE

Question

Ich versuche, ein Formular zu erstellen, das Daten über jQuery sendet und die Rückkehr in das gleiche DIV füllt. Auf diese Weise wird die Seite bei der Post-Aktion nicht aktualisiert.

<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> 

Die JS-Funktion:

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

Das funktioniert perfekt in FF3, aber es wäre nur zufällig arbeitet in IE6/7.

Der Server bestätigt, dass Post-Anforderungen vom IE kommen, aber es würde die Post-Daten nur gelegentlich erhalten.

Neugierig, beschloss ich, die Datenvariable zu alarmieren:

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

Sicher genug, FF3 würde jedes Mal, wenn die Rückkehr HTML ausdrucken, während IE6/7 würde meist Druckrohlinge, mit einer gelegentlichen HTML Rückkehr. Ich konnte nichts zu diesem Problem finden, also was mache ich falsch?

Gelöst: Ich verfolgte dies zu einer HTTP-Weiterleitung, die ich in meinem Anfrage-Handling-Code hatte. Daher würde die Funktion, die die POST-Anfrage bearbeitet, eine Weiterleitung auslösen, und IE mag sie nicht. Ich hatte damals eine totale geistige Verstopfung, und ich brauche die Weiterleitung nicht wirklich.

Der komische Teil ist natürlich, dass dies in FF funktioniert, und IE würde gelegentlich auch funktionieren, mit der Umleitung an Ort und Stelle.

Answer 1

Ich würde sagen, dass Sie das Formular-Tag in diesem Szenario überhaupt nicht verwenden müssen.

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

bearbeiten Als Paolo Bergantino, sagte ich auch die Inline-Javascript verwenden würde vermeiden. So verwenden Sie stattdessen:

<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"); 
    }); 
}); 

aktualisieren Da dies nach wie vor ein Problem verursacht, würde ich einige Tests mit dem $.ajax Verfahren durchzuführen. Außerdem glaube ich nicht, dass POST-Aufrufe jemals zwischengespeichert werden würden, aber nur für den Fall, dass der Cache auf "false" gesetzt wird. Ein weiterer Test, um sicherzustellen, dass Sie kein Serialisierungsproblem haben, besteht darin, Ihre Daten bereits verschlüsselt zu übergeben. Und wenn Ihr noch Fragen haben können Sie versuchen, Ihre Datentyp gesetzt

$.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'); 
    } 
});