StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
12220250
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-08-31T17:47:52.160
FavoriteCount
0
LastActivityDate
2012-08-31T17:47:52.160
LastEditDate
LastEditorUserId
0
OwnerUserId
1639200
ParentId
11062803
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
You can do it asynchronously. Create a global variable, I call it ajax_done_and_successful_flag, that you initialize to false at the beginning of the program. You will set this to true or false at various places in your Ajax functions such as your Ajax success function or your Ajax error function. Then you need to add a submit handler at the bottom of your validate function. <pre><code>submitHandler: function(form) { if (ajax_done_and_successful_flag === true) { form.submit() } } </code></pre> The problem is the code is not executing in a linear way. Put a bunch of Firebug's console.log statements in your code. Observe the sequence of execution. You will see that your Ajax response will come back last, or whenever it feels like it. That's why you need the submitHandler AND the global flag to force the validate function to wait for correct Ajax results before the form is submitted. Any output to the screen from the Ajax response, needs to be done in the Ajax functions, such as the success function and the error function. You need to write to the same location as the validate function's success/error functions. This way the Ajax error messages blend in with the validate function's error function. This concept may seem a bit tricky. The idea to keep in mind is that the success and error functions in the validate function are writing to the same location as the success and error functions in the Ajax call, and that is okay, that is how it should be. The location of my error messages is right next to where the user types the input. This creates a nice user experience that I think you are asking for. Here is my code sample. I simplified it. I am running jQuery-1.7.1 and jQuery validation plug-in 1.6 I am using Firefox 14.0.1 and I also tried it on Chrome 21.0 successfully. <pre><code> var ajax_done_and_successful_flag = false; // Add methods ... $.validator.addMethod("USERNAME_NOT_DUPLICATE", function (value, element) { return this.optional(element) || validate_username_not_duplicate( ); }, "Duplicate user name."); // validate $(document).ready(function ( ) { $('#register_entry_form form').validate({ rules: { username: { required: true, minlength: 2, maxlength: 20, USERNAME_PATTERN: true, USERNAME_NOT_DUPLICATE: true }, ... errorPlacement: function (error, element) { element.closest("div").find(".reg_entry_error").html(error); }, success: function(label) { label.text('Success!'); } , submitHandler: function(form) { if (ajax_done_and_successful_flag === true ) { form.submit(); } } }); }); /* validation functions*/ function validate_username_not_duplicate() { var username_value = $('#username').val(); // whatever is typed in $.ajax({ url: "check_duplicate_username.php", type: "POST", data: { username: username_value }, dataType: "text", cache: false, //async: false, timeout: 5000, error: function (jqXHR, errorType, errorMessage) { ajax_done_and_successful_flag = false; if ( errorType === "timeout" ) { $('#username').closest("div").find(".reg_entry_error").html("Server timeout, try again later" ); } else if ... }, success: function (retString, textStatus,jqXRH) { if ( retString === "yes") { // duplicate name // output message next to input field $('#username').closest("div").find(".reg_entry_error").html("Name already taken."); ajax_done_and_successful_flag = false; } else if ( retString === "no") { // name is okay // output message next to input field $('#username').closest("div").find(".reg_entry_error").html("success!"); ajax_done_and_successful_flag = true; } else { console.log("in validate_username_duplicate func, success function, string returned was not yes or no." ); $('#username').closest("div").find(".reg_entry_error").html("There are server problems. Try again later."); ajax_done_and_successful_flag = false; } } // end success function }); // end ajax call return true; // automatically return true, the true/false is handled in // the server side program and then the submit handler } </code></pre> The reg_entry_error is the place right beside the text input. Here is a simplified code sample of the form. <pre><code> <label class="reg_entry_label" for="username">Username</label> <input class="reg_entry_input" type="text" name="username" id="username" value="" /> </code></pre> I hope this answers your question.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow do I do a jQuery blocking AJAX call without async = false?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USKen Johnson
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.