Listview is locked for some reason

Listview is locked for some reason

To whom it may concern,

I'm having a weird issue that may or may not be repeatable for other people but I managed to repeat it every time. This issue only happens on an iPad though and does not happen on the browser.

Some background:
This is a phone application using a mash up with PhoneGap to access the WebSQL library as well as some other stuff but only needing the WebSQL for this issue.

I'm using JQM1.3.1 but I don't want to update to the latest 1.4 because there's too many changes between the two versions.

What I'm doing:
I have a listview that on app load, is loading records dynamically using data from the database. On click of each records, a detail panel opens with another SQL query to get more data on that record. Detail panel is also dynamically loaded with data.

Before this issue, I had a different issue where if the user clicks multiple records too quickly, it would mess up the panel and it prevents the app from functioning properly after. The code snippet for that fix that is also included in this example but I'm pretty sure this fix is not what's causing the current issue as this existed before this change as well.

The issue:
After the app loads the listview, I click on any record and the panel opens. This is correct but then when I close the panel by swiping, the listview is now no longer able to be scrolled.

It's also possible to fix this issue in run time by after closing the panel and the listview is locked, open any other record and close the panel again. Listview is now no longer locked and the issue can not be repeated again. 

This happens only once on app open and to repeat, completely close the app (in background as well) and re-open the app.

A simplified version of this example does not include the WebSQL part but hopefully you get the idea and would be able to help.

HTML:
  1. <div class='wrapper'>
  2.     <div class='ui-grid-a paddingSearch'>
  3.         <div class='ui-block-a' style='float: left;  margin-left:  0.5%; width: 69%;'> 
  4.             <input type='search' class='SearchFilterbar' value='' />
  5.         </div>
  6.         
  7.         <div class='ui-block-b' style='float: right; margin-right: 0.5%; width: 29%;'> 
  8.             <a data-role='button'>Search</a>
  9.         </div>
  10.     </div>
  11.     <ul data-role='listview' class='listTest'>
  12.         <li><a onclick='setDetailView("test");'>test</a></li>
  13.         <li><a onclick='setDetailView("test");'>test</a></li>
  14.         <li><a onclick='setDetailView("test");'>test</a></li>
  15.         <li><a onclick='setDetailView("test");'>test</a></li>
  16.         <li><a onclick='setDetailView("test");'>test</a></li>
  17.         <li><a onclick='setDetailView("test");'>test</a></li>
  18.         <li><a onclick='setDetailView("test");'>test</a></li>
  19.         <li><a onclick='setDetailView("test");'>test</a></li>
  20.         <li><a onclick='setDetailView("test");'>test</a></li>
  21.         <li><a onclick='setDetailView("test");'>test</a></li>
  22.         <li><a onclick='setDetailView("test");'>test</a></li>
  23.         <li><a onclick='setDetailView("test");'>test</a></li>
  24.         <li><a onclick='setDetailView("test");'>test</a></li>
  25.         <li><a onclick='setDetailView("test");'>test</a></li>
  26.         <li><a onclick='setDetailView("test");'>test</a></li>
  27.         <li><a onclick='setDetailView("test");'>test</a></li>
  28.         <li><a onclick='setDetailView("test");'>test</a></li>
  29.     </ul>
  30. </div>
  31. <div data-role='panel' class='rightPanel' data-position='right' data-display='overlay' data-theme='d' data-dismissible='false'>
  32.     <span class='test'></span>
  33. </div>

JavaScript:
  1. $(document).on("pageshow", function(){
  2.     var newWidth = window.innerHeight - $(".paddingSearch").innerHeight() - 10;
  3.     $(".listTest").css({"height":newWidth+"px","overflow-y":"scroll"});
  4. });

  6. var rightPanel = "rightPanel";
  7. var timeoutReference;
  8. function setDetailView(str){
  9. if(panelIsOpen()){
  10.         closePanel();
  11. }

  13.     if (timeoutReference) {
  14.      clearTimeout(timeoutReference);
  15.     }
  16.     
  17.     timeoutReference = setTimeout(function() {
  18.      setDetailPanel(str);
  19.     }, 300);

  21. }

  23. function setDetailPanel(str){
  24.     // reset any pending timeouts
  25.     if (!timeoutReference){
  26.         return; // only execute once
  27.     }
  28.     timeoutReference = null;

  30.     //this timeout simulates the asynchronous calling of WebSQL query
  31.     setTimeout(function(){
  32.         //this timeout simulates the dynamic content loading of data taking time
  33.         setTimeout(function(){
  34.             //dynamic panel content setting
  35.             $(".test").html(str);
  36.         },100)
  37.         
  38.         //timeout to open panel roughly when data finishes loaded...technically not the best method but it works
  39.         setTimeout(function(){
  40.             openPanel();
  41.         },100);
  42.     },100);
  43. }

  45. function panelIsOpen(){
  46. if( $("."+rightPanel).hasClass("ui-panel-open") == true ){
  47. return true;
  48. }else{
  49. return false;
  50. }
  51. }
  52. function openPanel(){
  53. $("."+rightPanel).panel("open");
  54. }
  55. function closePanel(){
  56. $("."+rightPanel).panel("close");
  57. }

A live example of this can be found at link

This example might not be able to replicate the issue as it's missing the WebSQL aspect but including that part would be really big so hopefully someone already has a test database to use.

If my description is too vague or not replicable or apologise in advance but I'm not sure what to do now so I thought I'd try asking.

Thank you in advance.