Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Regular Contributor
iruka
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
My Carrier: DiGi

tx.executeSql unable to load callback function.

Hi all. I'm having this really weird issue with my database.

 

I have this link "ADD" that allow users to add remark into the database. This is the layout for inputing remarks and calling the add remarks function.

function edroland(remark_id, refTdNo, refNo, dotDetail, requesterName, claimAmount, claimDate)
{
  //alert(remark_id+refTdNo+refNo+dotDetail);
  $('#container' ).hide();
  var diaRemark = "";
  var overlayWidth = Math.round(screen.width - 100);
  diaRemark += '<div id="overlay">';
  //diaRemark += '<div id="overlay" x-blackberry-onBottom="setTimeout(function() { focusTest(\'textRemark\') })">';
  diaRemark += '<table id="firstTable" class="tblOneReject" style="width: '+overlayWidth+'px">';
  diaRemark += '<tr>';
  diaRemark += '<td id="longHeader" class="tdOneRejectHeader" colspan="2">PLEASE KEY-IN SOME REMARKS</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">REF NO</td>';
  diaRemark += '<td class="tdOneRejectText">'+refNo+'</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">REQUESTER</td>';
  diaRemark += '<td class="tdOneRejectText">'+requesterName+'</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">DATE</td>';
  diaRemark += '<td class="tdOneRejectText">'+claimDate+'</td>';
  diaRemark += '</tr>'; 
  diaRemark += '<td class="tdOneRejectRemark">AMOUNT</td>';
  diaRemark += '<td class="tdOneRejectText">'+claimAmount+'</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td id="tdRemarks" class="tdOneRejectRemark">REMARKS</td>';
  diaRemark += '<td class="tdOneRejectText"><textarea id="textRemark" cols="45" rows="7"></textarea></td>';
  diaRemark += '</tr>';
  diaRemark += '</table>';//end of tblOneReject

  diaRemark += '<table class="tblTwoReject" style="width: '+overlayWidth+'px;">';
  diaRemark += '<tr>';
  diaRemark += '<td id="abc" class="tdTwoRejectButtons"><span id="saveBtn" class="spanBtn" x-blackberry-focusable="true" x-blackberry-initialFocus="true" onmouseover="refReject(this)" onmouseout="noRefReject(this)" onclick="remarkSubmit(\''+remark_id+'\', \''+refTdNo+'\', \''+refNo+'\', \''+dotDetail+'\', \''+requesterName+'\', \''+claimAmount+'\', \''+claimDate+'\')">&nbsp;&nbsp;SAVE&nbsp;&nbsp;</span></td>';
  diaRemark += '<td class="tdTwoRejectButtons"><span id="rejectBtn" class="spanBtn" x-blackberry-focusable="true" onmouseover="refReject(this)" onmouseout="noRefReject(this)" onclick="remarkReset()">RESET</span></td>';
  diaRemark += '<td class="tdTwoRejectButtons"><span id="cancelBtn" class="spanBtn" x-blackberry-focusable="true" onmouseover="refReject(this)" onmouseout="noRefReject(this)" onclick="hideDialog()">CANCEL</span></td>';
  diaRemark += '</tr>';
  diaRemark += '</table>';
  diaRemark += '</div>';

  $('#container').after(diaRemark);
  setTimeout(function () {focusTest('textRemark')}, 100);
}

 The add remarks function (remarkSubmit)

function remarkSubmit(remark_id, refTdNo, refNo, dotDetail, requesterName, claimAmount, claimDate)
{  
  var remarkDisplay = "";
  var validateRemark = $('#textRemark').val();
  if(validateRemark == "")
  {
    alert("Remark field cannot be empty when rejecting claim.Please key-in some remarks");
    $('#textRemark').focus();
    return false;
  }
  
  var remarkValue = $.trim(validateRemark);

  if(remarkValue.length > 10)
  {
    remarkDisplay = remarkValue.substr(0,16);
    remarkDisplay += ' ...';
  }

  else
  {
    remarkDisplay = remarkValue;
  }
   
  var remarkId = remark_id;
  var remarkRefNo = refNo;

  tableDB = createDatabase();
  addRemark = "INSERT INTO tempRemark (remarkCellId, remarkRefNo, remarkText) VALUES (?, ?, ?)";
  tableDB.transaction(function(tx){
    tx.executeSql(addRemark, [remarkId, remarkRefNo, remarkValue]);
  });

  $('#'+remark_id).text(remarkDisplay);
  $('#'+dotDetail).attr('onclick' , 'editRemarks(\''+remark_id+'\', \''+refTdNo+'\', \''+refNo+'\', \''+dotDetail+'\', \''+requesterName+'\', \''+claimAmount+'\', \''+claimDate+'\')');
  $('#'+dotDetail).text("EDIT");
  $('#container').show();
  $('#overlay').remove();
}

 Once the remarks have been added into the database the "ADD" link will be change to "EDIT" to allow users to edit the remarks. The layout for editing remarks

function editRemarks(remark_id, refTdNo, refNo, dotDetail, requesterName, claimAmount, claimDate)
{
  $('#container').hide();
  var diaRemark = "";
  var overlayWidth = Math.round(screen.width - 100);
 
  diaRemark += '<div id="overlay">';
  diaRemark += '<table class="tblOneReject" style="width: '+overlayWidth+'px;">';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectHeader" colspan="2">EDITING REMARKS (PLEASE KEY-IN SOME REMARKS)</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">REF NO</td>';
  diaRemark += '<td class="tdOneRejectText">'+refNo+'</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">REQUESTER</td>';
  diaRemark += '<td class="tdOneRejectText">'+requesterName+'</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">DATE</td>';
  diaRemark += '<td class="tdOneRejectText">'+claimDate+'</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">AMOUNT</td>';
  diaRemark += '<td class="tdOneRejectText">'+claimAmount+'</td>';
  diaRemark += '</tr>';
  diaRemark += '<tr>';
  diaRemark += '<td class="tdOneRejectRemark">REMARKS</td>';
  diaRemark += '<td id="textAreaField" class="tdOneRejectText">'+retrieveRemark(refNo)+'</td>';
  //diaRemark += '<td id="textAreaField" class="tdOneRejectText"><textarea id="textRemark" x-blackberry-focusable="true" x-blackberry-initialFocus="true" cols="45" rows="7">'+retrieveRemark(refNo)+'</textarea></td>';
  //alert(diaRemark);
  diaRemark += '</tr>';
  diaRemark += '</table>';//end of tblOneReject
  diaRemark += '<table class="tblTwoReject" style="width: '+overlayWidth+'px;">';
  diaRemark += '<tr>';

  diaRemark += '<td class="tdTwoRejectButtons"><span class="spanBtn" x-blackberry-focusable="true" onmouseover="refReject(this)" onmouseout="noRefReject(this)" onclick="remarkUpdate(\''+remark_id+'\', \''+refTdNo+'\', \''+refNo+'\',\''+dotDetail+'\', \''+requesterName+'\', \''+claimAmount+'\', \''+claimDate+'\')">&nbsp;EDIT&nbsp;</span></td>';
  diaRemark += '<td class="tdTwoRejectButtons"><span class="spanBtn" x-blackberry-focusable="true" onmouseover="refReject(this)" onmouseout="noRefReject(this)" onclick="remarkReset()">RESET</span></td>';
  diaRemark += '<td class="tdTwoRejectButtons"><span class="spanBtn" x-blackberry-focusable="true" onmouseover="refReject(this)" onmouseout="noRefReject(this)" onclick="hideDialog()">CANCEL</span></td>';
  diaRemark += '</tr>';
  diaRemark += '</table>';
  $('#container').after(diaRemark);
 setTimeout(function () {focusTest('textRemark')}, 100);
}

 The function to retrieve remark(retrieveRemark)

function retrieveRemark(refNo)
{
  var tableDB = createDatabase();
  var selectRemark = "SELECT remarkText FROM tempRemark WHERE remarkRefNo = ?";
  var txtAreaStr;
 
  tableDB.transaction(function(tx) {
 
    tx.executeSql(selectRemark, [refNo], function(axl, results) {
  
      var valueRemark = results.rows.item(0).remarkText;
      txtAreaStr = '<textarea id="textRemark" cols="45" rows="7">'+valueRemark+'</textarea>';
      $('#textAreaField').append(txtAreaStr);


    },null);


  });
}

 The function to update remark(remarkUpdate)

function remarkUpdate(remark_id, refTdNo, refNo, dotDetail, requesterName, amountPend, claimDate)
{
 // alert(remark_id+refNo+counter+dotDetail+leftFocus+rightFocus);
  var remarkDisplay;
  var remarkValidate = $('#textRemark').val();
  if(remarkValidate == "")
  {
     alert("Remark field cannot be empty when rejecting claim. Please key-in some remarks");
     $('#textRemark').focus();
     return false;
  }
  
  if(remarkValidate.length > 10)
  {
    remarkDisplay = remarkValidate.substr(0, 16);
    remarkDisplay += ' ...';
  }
  else
  {
    remarkDisplay = remarkValidate;
  }
   var remarkValue = $.trim(remarkValidate);
   var remarkId = refNo;

   var tableDB = createDatabase();
   var updateRemarkSql = "UPDATE tempRemark SET remarkText = ? WHERE remarkRefNo = ?";

   tableDB.transaction(function(tx){
     tx.executeSql(updateRemarkSql, [remarkValue, remarkId]);
   }); 
   $('#'+remark_id).text(remarkDisplay);
   $('#overlay').remove();
   $('#container').show();
}

 The flow of this adding and editing remarks works like these. The table used to store the added remarks will be deleted when the user quits the app and the data will be later to a backend database before dropping the table. The table will be created again when the user loads the app so they can add remarks.

 

The problem that I am having is that when user click to EDIT remarks, the added will be loaded into the textarea. Then once done user quits the app and then later they load the app again, ADD remarks, click on EDIT the added remarks won't be loaded. If they quit the app and then load again ADD remark and  EDIT remark, the remarks will be loaded.

 

The callback in retrieve remark seems to be loaded alternately when user load and quit the apps.

 

Can anyone please help?

Please use plain text.