• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Javascript AJAX function not stopping form submission

 
Ranch Hand
Posts: 165
Tomcat Server Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:-



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

 
Sheriff
Posts: 67747
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 165
Tomcat Server Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67747
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.

 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Ranch Hand
Posts: 165
Tomcat Server Java Ubuntu
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.

 
Ranch Hand
Posts: 93
Python Redhat Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Rancher
Posts: 4801
50
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
reply
    Bookmark Topic Watch Topic
  • New Topic