JQM/Phonegap アプリを作成していますが、厄介な問題があります。
websql/sqllite db からのデータを表示するページがあり、2 ～ 3 フィールド (#view?id=123) しかありません。このページを初めて表示すると、すべて正常に動作します (データを取得し、JQM pagebeforeshow イベント内のフィールドに値を追加します)。
別のレコード (#view?id=234) のページを再度表示すると、問題が発生します。最後に表示されたデータを含むページが表示され、約 1 ～ 2 秒後に現在のレコードの値に更新されます。
このページのキャッシュを停止する方法はありますか (それが問題です - 私は JQM キャッシュ データ属性を使用していません)、または pagehide イベントでフィールドを空にしようとする必要がありますか?
前もって感謝します。
説明したコード例:
$('#view').live('pagebeforeshow', function(event, data) {
// Clear any interval counter
clearInterval(window.viewTimerIntervalID);
// On page load get passed url vars
if ($.mobile.pageData && ($.mobile.pageData.caseRef || $.mobile.pageData.id)){
if ($.mobile.pageData.caseRef) {
$('input#edit-case-ref').val($.mobile.pageData.caseRef);
}
if ($.mobile.pageData.id) {
$('input#edit-recordId').val($.mobile.pageData.id)
}
}
// Grab record ID from hidden field
var editId = $('input#edit-recordId').val();
// form fields
var caseTypeSelect = $('select#edit-case-type-select'),
taskTypeSelect = $('select#edit-task-type-select'),
caseRef = $('input#edit-case-ref'),
notes = $('textarea#edit-notes'),
editTimer = $('#edit-time h1'),
startButton = $('#editStartStopRecording'),
findCaseRef = $('a#findCaseRef');
var startButtonTextSpan = $('#editStartStopRecording').prev('span').find('span.ui-btn-text');
startButton.button('refresh');
// Empty values of fields
caseTypeSelect.val([]);
taskTypeSelect.val([]);
caseRef.val('');
notes.val('');
editTimer.text("0:00:00");
// Get options for first select
function getCaseTypes(tx) {
tx.executeSql('SELECT * FROM CASETYPES', [],
function(tx,results){
var len = results.rows.length;
// Remove any options already appended.
$('select#edit-case-type-select option').remove();
// Cache CaseType Select
var caseTypeSelect = $('select#edit-case-type-select');
// Append the first empty blank value option
caseTypeSelect.append('<option value="" data-placeholder="true">Select Case Type</option');
for (var i=0; i<len; i++){
// Append Select with details
caseTypeSelect.append('<option value="' + results.rows.item(i).id +'">' + results.rows.item(i).description + '</option>');
}
// Refresh the list to add JQM styles etc
caseTypeSelect.trigger("change");
},
errorCB
);
}
// Get options for second select
function getTaskTypes(tx) {
tx.executeSql('SELECT * FROM ACTIONTYPES', [],
function(tx,results){
var len = results.rows.length;
// Remove any options already appended.
$('select#edit-task-type-select option').remove();
// Cache CaseType Select
var taskTypeSelect = $('select#edit-task-type-select');
// Append the first empty blank value option
taskTypeSelect.append('<option value="" data-placeholder="true">Select Task Type</option');
for (var i=0; i<len; i++){
// Append Select with details
taskTypeSelect.append('<option value="' + results.rows.item(i).id +'">' + results.rows.item(i).description + '</option>');
}
// Refresh the list to add JQM styles etc
taskTypeSelect.trigger("change");
},
errorCB
);
}
// populate the selects with values from DB
function getRecording(tx) {
tx.executeSql('SELECT * FROM RECORDINGS WHERE id=?', [editId],
function(tx,results){
var len = results.rows.length;
for (var i=0; i<len; i++){
// Add values to selects
caseTypeSelect.val(results.rows.item(i).caseTypeId);
taskTypeSelect.val(results.rows.item(i).actionTypeId);
// Store this start date as a global var
window.editStartDate = results.rows.item(i).startDate;
// Add value to inputs
caseRef.val(results.rows.item(i).caseRef);
// Add notes
notes.val(results.rows.item(i).notes);
// Refresh the list to add JQM styles etc
caseTypeSelect.trigger("change");
taskTypeSelect.trigger("change");
// Calculate the time if still recording and start timer
if (!results.rows.item(i).endDate) {
// No end date so still recording....
// Need to work out diff between start and now
// And increment
var start = new Date(results.rows.item(i).startDate);
var end = new Date();
var dateDiff = end.getTime() - start.getTime();
milliSecs = dateDiff
// 1000 milliseconds in a second
msSecs = (1000)
// Convert to seconds
msMins = (msSecs * 60)
// Convert to mins
msHours = (msMins * 60)
// Floor and calc to hours
numHours = Math.floor(milliSecs/msHours)
// Calc Mins
numMins = Math.floor((milliSecs - (numHours * msHours)) / msMins)
// Calc secs
numSecs = Math.floor((milliSecs - (numHours * msHours) - (numMins * msMins))/ msSecs)
// Add leading zeros
if (numSecs < 10){
numSecs = "0" + numSecs
}
if (numMins < 10){
numMins = "0" + numMins
}
// Calc results
timeOnLoad = numHours + ":" + numMins + ":" + numSecs;
// Add to timer
editTimer.text(timeOnLoad);
// Start the incrementor and put the incrementor id in a global var (wuldnt work inside a local var for some reason).
window.viewTimerIntervalID = setInterval(editCount,1000);
// Change the button
startButtonTextSpan.text('Pause');
startButton.buttonMarkup({theme: 'g'}); //Red
startButton.buttonMarkup({icon: 'minus'}); // Swap out for custom icons
// Add the stop class
startButton.addClass('stop');
// Disable all fields as still recording
caseTypeSelect.selectmenu('disable');
taskTypeSelect.selectmenu('disable');
caseRef.textinput('disable');
notes.textinput('disable');
findCaseRef.addClass('ui-disabled');
// Calculate the time if enddate exists
} else {
// There is an end time - so calc diff and append
// Get start and end date, convert to JS date objects and subtract
var start = new Date(results.rows.item(i).startDate);
var end = new Date(results.rows.item(i).endDate);
var dateDiff = end.getTime() - start.getTime();
milliSecs = dateDiff
// 1000 milliseconds in a second
msSecs = (1000)
// Convert to seconds
msMins = (msSecs * 60)
// Convert to mins
msHours = (msMins * 60)
// Floor and calc to hours
numHours = Math.floor(milliSecs/msHours)
// Calc Mins
numMins = Math.floor((milliSecs - (numHours * msHours)) / msMins)
// Calc secs
numSecs = Math.floor((milliSecs - (numHours * msHours) - (numMins * msMins))/ msSecs)
// Add leading zeros
if (numSecs < 10){
numSecs = "0" + numSecs
}
if (numMins < 10){
numMins = "0" + numMins
}
// Calc results
resultString = numHours + ":" + numMins + ":" + numSecs;
// Append data
editTimer.text(resultString);
// Change the button
startButtonTextSpan.text('Resume');
startButton.buttonMarkup({theme: 'f'}); //Green
startButton.buttonMarkup({icon: 'plus'});
// Add the stop class
startButton.addClass('resume');
// Enable all fields as not recording
caseTypeSelect.selectmenu('enable');
taskTypeSelect.selectmenu('enable');
caseRef.textinput('enable');
notes.textinput('enable');
findCaseRef.addClass('ui-enabled');
}
}
},
errorCB
);
}
// Populate select options from DB
db.transaction(getCaseTypes, errorCB);
db.transaction(getTaskTypes, errorCB);
// Populate the fields with record details
db.transaction(getRecording, errorCB);
});
また、関連性があるかどうかはわかりませんが、複数ページのテンプレート (すべての #pages in one html document) を使用しています。再度、感謝します。