Javascript AJAX function not stopping form submission

[Vinod Vijay]

Hi,

Im facing issue in validating my form through javascript code. When my javascript function viewdetails() gets called then it is printing the alert hiding/showing... which is correct as this alert is coming first in javascript logic and then it calls 2nd alert Case level lock check... inside AJAX beforeSend block which is also correct. But immediately after this, why it is calling the alert out of ajax call which is writting out of AJAX logic?

My AJAX logic is to first validate the form based on return value of JSON object inside AJAX success:function and then decide whether to block form submission(by return false;) or proceed with form submission.

Problem is that the control is going to 3rd alert out of ajax call without waiting for AJAX response and this form is keep submitting.

Javascript function:-

function viewdetails(rowNum,fbNo,commentNum,commentStatusCode,statusCode,jobType, commentWrkFlowID){
		
		alert('hiding/showing...');
		//document.getElementById("actionTd").style.visibility = "hidden";
		//document.getElementById("processingId").style.visibility = "hidden";
		
		//document.getElementById("actionTd").style.display = "none";		
		//document.getElementById("processingId").style.display = "none";
		
		
		var dataObj=new Object();
 	    dataObj.feedbackNumber=fbNo;
 	    $.ajax({
				type: 'POST',
				url: SERVER_CONTEXT_PATH + "/CaseLevelLockServlet",
				data: $.param(dataObj),
				cache : false,
				beforeSend:function(){
					alert('Case level lock check...');
				},
				success:function(response){
					alert('Inside response block');
					var json = $.parseJSON(response);
					alert('Returned JSON object '+json);
					var feedbackLockedBy = json.feedbackLockBy;
					alert('feedbackLockedBy '+feedbackLockedBy);
					if(null!=feedbackLockedBy){
						$('#lockIcon').show();
						document.getElementById("actionTd").style.visibility = "hidden";
						document.getElementById("processingId").style.visibility = "hidden";
						alert("Feedback "+ json.feedbackNumber +" is locked by user: "+feedbackLockedBy);
						return false;
					}else{
						alert('This case has no lock');
						$('#lockIcon').hide();
						document.getElementById("actionTd").style.visibility = "visible";
						document.getElementById("processingId").style.visibility = "visible";
					}
									
				},
				error:function(jqXHR, textStatus, errorThrown){
					alert("Error while checking case level lock from service...");
					$('#lockIcon').hide();
					document.getElementById("actionTd").style.visibility = "visible";
					document.getElementById("processingId").style.visibility = "visible";
				}
			}); 		
		alert('out of ajax call');
---------------------
---------------
form submit logic......
}

Following is how Im calling this function:-
<a href="javascript: viewdetails('<%=rNo%>','<securednested:write property="feedbackNumber" />','<securednested:write property="commentNumber" />','<securednested:write property="commentStatusCode" />','<securednested:write property="feedbackStatusCode"/>','<securednested:write property="jobTypeDescription"/>', '<securednested:write property="workFlowProssCode"/>'); return false;"><img id="processingId" src="images/icms_process.png" title="Processing" width="50" height="50" border="0"/></a>


Please help me in suggesting some useful tips as I have tried a lot with different combinations of calling this javascript function:-

<input onclick="return viewdetails('<%=rNo%>','<securednested:write property="feedbackNumber" />','<securednested:write property="commentNumber" />','<securednested:write property="commentStatusCode" />','<securednested:write property="feedbackStatusCode"/>','<securednested:write property="jobTypeDescription"/>', '<securednested:write property="workFlowProssCode"/>');" id="processingId" type="image" src="images/icms_process.png" alt="Processing" width="50" height="50">

and

<input onclick="javascript: viewdetails('<%=rNo%>','<securednested:write property="feedbackNumber" />','<securednested:write property="commentNumber" />','<securednested:write property="commentStatusCode" />','<securednested:write property="feedbackStatusCode"/>','<securednested:write property="jobTypeDescription"/>', '<securednested:write property="workFlowProssCode"/>'); return false;" id="processingId" type="image" src="images/icms_process.png" alt="Processing" width="50" height="50">

[Bear Bibeault]

Why do you have (mostly unreadable and unformatted) script inside the HTML attributes? You are obviously using jQuery and you should not have script mixed into the structure like that.

The next logical step in my opinion, is to refactor your script to move that script out of the HTML and into proper jQuery unobtrusive script. That will help not only make the page follow jQuery standards, it will make the script much more readable than the script blobs that you currently have.

[Vinod Vijay]

Bear Bibeault wrote:Why do you have (mostly unreadable and unformatted) script inside the HTML attributes? You are obviously using jQuery and you should not have script mixed into the structure like that.

The next logical step in my opinion, is to refactor your script to move that script out of the HTML and into proper jQuery unobtrusive script. That will help not only make the page follow jQuery standards, it will make the script much more readable than the script blobs that you currently have.

Formatting of script I will check, however where is the problem? Why form is not waiting for json response first?

[Bear Bibeault]

Get rid of the alerts and learn how to use the Developer Tools to set breakpoints so you can stop execution and look at the state of execution.

[Eric Pascarello]

It is as simple as: You can not return from an Asynchronous method.

The success is called after the function has already completed. It is like trying to get on a airplane after it already left the airport. Not going to happen.

[Vinod Vijay]

Eric Pascarello wrote:It is as simple as: You can not return from an Asynchronous method.

The success is called after the function has already completed. It is like trying to get on a airplane after it already left the airport. Not going to happen.

Sir, I'm aware it is an asynchronous call and success block will be called after completion of asynchronous logic and we will get JSON object in the end. But my question is through this JSON object in success block, I'm trying to determine the value in it and based on that value received I have to decide whether to proceed ahead for form submission or stop there itself.

My logic is to first make AJAX call, then check & decide through JSON object, if everything is okay then call rest of javascript logic for form submission.
If can split AJAX and rest of script in separate javascript function but how put these in correct place?
Please advice.

[Karthik Jayachandran]

It seems only you can identify the problem here. You may have to introduce yourself to front-end webtools, like Firefox's Firebug or Chrome's Developer tools.

These tools can help you find the problem very quickly. It can show if any ajax request is made or not (see Net Panel in Firebug), whether it is successfull or not, or if there is any javascript error you can see it in console, etc. You can also set a breakpoint to the alert line and check for yourself why it is being called before the ajax response.

[Dave Tolls]

If the form is to submitted based on the result of an Ajax call then the form submission code will need to be inside the success function and your "Submit" button (if that's what it is) should not be submitting at all.