Here's my HTML
<form id="the_form">
Zip / Postal Code: <input id="zip" type="text" name="zip"><br/>
<input type="submit" value="Submit" id="submitButton">
</form>
<div id="output"></div>
Here's my jQuery
<script type="text/javascript">
$("document").ready(function() {
$("#submitButton").on("click",function(){
var value_to_send_to_php = $.trim($("#zip").val());
if(value_to_send_to_php != "") {
$.post("formphptoajax_rb.php", $("#the_form").serializeArray() , function(data) {
//#1 doesn't work here
});
//#2 doesn't work here
}
//#3 doesn't work here
});
$("#output").text("success");
});
</script>
The above jQuery works fine. That is, on clicking submit, I get "success" output in the div with id "output".
What I can't understand is why I don't get the same result when I place $("#output").text("success"); at the locations marked #1, #2, or #3.
At #1 and #2 I get no output. At #3, I get "success" for a fraction of a second and then it vanishes.
As well as the click handler, the page is also submitting since you have clicked a "submit" button.
Use input type="button" instead. This is what it is designed for: a non-submitting button.
You need to do e.preventDefault() or return false from your handler. Also, what you have there will show success on load, not after clicking the button.
Ok, let's get straight. I suppose, that the $.post calls AJAX async callback (this is important, because if you don't want ASYNC callback then I poorly understood your question and my conclusions are wrong).
<script type="text/javascript">
$("document").ready(function() {
$("#submitButton").on("click",function(){
var value_to_send_to_php = $.trim($("#zip").val());
if(value_to_send_to_php != "") {
// - ok, we have "#zip" value filled, so let's take "#the_form" data and sends them asynchronously to server
$.post("formphptoajax_rb.php", $("#the_form").serializeArray() , function(data) {
//#1 doesn't work here
// - great, our AJAX callback was successful, so we can inform user, that save or whatever operation was successfull
// - now we can process "data" returned from server
// - and we can show the success message - $("#output").text("success");
// BUT, all this will happen only, when you prevent page from full postback (which refresh the whole page)
});
//#2 doesn't work here
}
//#3 doesn't work here
// - in this place you have to prevent page from continue submitting (therefore full page postback is initiated)
// - so there should be "return false;" (without quotes of course)
// - or you can use "e.preventDefault();" here (as someone already mentioned), but in that case you have to change your click event handler signature from "function()" to "function(e)"
});
$("#output").text("success");
});
</script>
Simplified, postback is called when submit button is clicked - browser takes the form data and refresh the page (while form data is send to server as request params). It is synchronous HTTP POST request. Well, the term "PostBack" is used mainly in ASP or ASP.NET.
As of "the original context does not exists at the time of ajax complete" - I mean, that when you send async callback to server, but immediately after that the page is refreshed (because of postback), then the original initiator of async callback no longer exists and there is no routine which can process the result of that callback (success nor failed).