Friday 3 February 2012

Android Browser Back Form Re-submission/Caching Issue

I am not much into Android Development. But I came across a strange issue while working on porting our existing web based application to android compatible browsers.
We hadn't made any drastic changes to our HTML pages(we were using XSLT) to port it to Android compatible browsers and it all seemed fine, until I came across this one.
We used to have a html form and pass hidden fields through it using the submit button... No big deal.. just plain old html forms with some jQuery.
While we navigated to one of our pages on Android Browser and clicked browser back 3 or 4 times, it used to navigate back to the previous page... no issues until now.....
But when we clicked the submit button on that old page, it used to dynamically create the form and submit it again, just like the first time we navigated from that page but took us to the page before that.

Just to explain it.....

                      (take input data)                           (take password)                     (Complete)
Screen2       ----------------->        Screen 3        ---------------------->                  Screen4
(Submit Button)                            (Submit Button)                                 ( No navigation button)
(hidden fields:                              (hidden fields:
nextScreen=3)                            nextScreen=4)    

1. Suppose User is on Screen 4.
2. Now User clicks Browser Back Button 3 or 4 times (android 2.2 and android 2.3).
3. User is navigated to screen 3.
4. Now User clicks on Submit Button of Screen 3.
5. User is now navigated to Screen 2.  (Request sent to the server had  nextScreen=2)

We had used proper meta tags like shown below:
<meta http-equiv="Cache-Control" content="no-store, no-cache, max-age=0"/>
<meta http-equiv="Pragma" content="no-cache" />


We tried clearing the browser cache and load our pages again, it again used to run into same trouble.


Finally we figured out  what was creating this trouble......


On Screen 3, our form used to look like this:
<form method="post" action="doSomething" name="abc" autocomplete="off" >
<input type="password" name="def" />
<input type="hidden" name="nextScreen" value ="4" />
</form>


This  autocomplete="off" used to create havoc and take some cached value of nextScreen (=2 in this case) from the previous screens.

So we updated our form to use it like this:


<form method="post" action="doSomething" name="abc"  >
<input type="password" name="def" autocomplete="off" />
<input type="hidden" name="nextScreen" value ="4" />
</form>


No comments:

Post a Comment