Scan Issue Fix

User

document.addEventListener('deviceready', function () {
// Initialize Framework7
window.f7App = new Framework7({
el: '#app',
name: 'FossettsCircusApp',
theme: 'auto',
routes: [
{ path: '/', url: 'pages/home.html' },
{ path: '/event/:id/:dateId/', url: 'pages/event-details.html' }
]
});

// Create main view
window.f7App.views.create('.view-main');

// Start the app after permissions
function startApp() {
navigator.splashscreen.hide();
initializeApp();
}

// Handle camera permissions on Android
if (cordova.platformId === 'android' && cordova.plugins && cordova.plugins.permissions) {
const permissions = cordova.plugins.permissions;
permissions.checkPermission(permissions.CAMERA, function (status) {
if (status.hasPermission) {
startApp();
} else {
permissions.requestPermission(
permissions.CAMERA,
function (status) {
status.hasPermission ? startApp() : navigator.app.exitApp();
},
function () {
navigator.app.exitApp();
}
);
}
});
} else {
startApp(); // For iOS or browser
}
}, false);
function initializeApp() {
window.TOKEN = 'fossettscircustoken';
window.eventId = -1;
window.eventDateId = -1;
window.ApiUrl = 'https://staging.fossettscircus.com/boxoffice/index.php/api/';
let scanInProgress = false;
let alertVisible = false;

const scanConfig = {
preferFrontCamera: false,
showFlipCameraButton: true,
showTorchButton: true,
torchOn: false,
saveHistory: false,
prompt: "Place a code inside the scan area",
resultDisplayDuration: 500,
formats: "QR_CODE",
disableAnimations: true,
disableSuccessBeep: false
};

function showAlert(message, title = 'Alert') {
if (alertVisible) return;
alertVisible = true;
f7App.dialog.alert(message, title, () => {
alertVisible = false;
});
}

// Event Details Page
$(document).on('page:init', '.page[data-name="event-details"]', function (e) {
const page = e.detail;
const title = page.route.query.title || 'No Title';
const location = page.route.query.location || '';
const time = page.route.query.time || '';
const code = page.route.query.code || '';
eventDateId = page.route.query.eventDateId || -1;
eventId = page.route.query.eventId || -1;

page.$el.find('.event-title').text(title);
page.$el.find('.event-location').text(location);
page.$el.find('.event-time').text(time);
page.$el.find('input[name="code"]').val(code);

function sendCode(code, type) {
f7App.dialog.preloader(type === 'qr' ? 'Scanning code…' : 'Sending code…');
$('.scan').prop('disabled', true);
$('.manually').prop('disabled', true);

$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html(`Code ${code} sent to boxoffice, please wait…`);

$.ajax({
url: `${ApiUrl}scan`,
method: 'POST',
data: {
token: TOKEN,
event_date_id: eventDateId,
order_code: code
},
success: function (result) {
const apiResult = JSON.parse(result);
if (apiResult.result) {
$('#scan-result').removeClass('bg-dark').addClass('bg-success')
.html(`${apiResult.message}${apiResult.seating}${apiResult.tickets}`);
showAlert(apiResult.message, 'Scan Success');
$('[name="code"]').val(`${eventId}.${eventDateId}.`);
} else {
$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html(apiResult.message);
showAlert(apiResult.message, 'Scan Failed');
}
},
error: function () {
$('#scan-result').removeClass('bg-success').addClass('bg-dark')
.html(`Code ${code} could not be sent to boxoffice, please try again`);
showAlert('Scan failed. Please try again.', 'Scan Failed');
},
complete: function () {
$('.scan').prop('disabled', false);
$('.manually').prop('disabled', false);
f7App.dialog.close();
scanInProgress = false;
}
});
}

$(document).on('click', '.scan', function () {
if (scanInProgress) {
showAlert('Scan is already in progress. Please wait.', 'Please Wait');
return;
}
scanInProgress = true;
cordova.plugins.barcodeScanner.scan(scanSuccess, scanError, scanConfig);
});

$(document).on('click', '.manually', function () {
sendCode($('[name="code"]').val(), 'manual');
});
});

// Home Page
$(document).on('page:init', '.page[data-name="home"]', function () {
loadEvents();
$(document).on('click', '.reload-events', function () {
loadEvents();
});
});
}

function loadEvents()
{

f7App.dialog.preloader('Loading events…');
$.ajax({
url: `${ApiUrl}today`,
method: 'POST',
data: {
token: TOKEN
},
success: function(result,status,xhr)
{
console.log(result);
var events = JSON.parse(result);
if (events.result) {

$('div.events').html('');

const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
$.each(events.data, function(i, val)
{
var eventDatetime = new Date(val.event_datetime);
var dateOptions = { year: '2-digit', month: '2-digit', day: '2-digit' };
var timeOptions = { hour12: true, hour: '2-digit', minute: '2-digit' };
var dayname=weekday[eventDatetime.getDay()];
var code=val.event_id +'.'+ val.event_date_id +'.';

$('div.events').append(`

${val.venue_title}-${val.venue_full}
${dayname} at ${eventDatetime.toLocaleDateString('en-GB', dateOptions)} –
${eventDatetime.toLocaleTimeString('en-US', timeOptions)}

0/500

`);

});
}else{
$('div.events').html(`${events.message}`);
}
},
error: function(xhr,status,error)
{
f7App.dialog.alert('Something went wrong. Please try again.', 'Error');
},
complete: function()
{
f7App.dialog.close();
}
});
}
Still some times event not load in adnroid i mean load event function not called
Also when scan and after complete click on back to show and then scan again its still show scan is already in prgress

Assistant

You're encountering **two separate issues** in your Framework7 + jQuery + Cordova app:

—

### ✅ **Issue 1: `loadEvents()` sometimes not called on Android**

This usually happens because **Cordova’s `deviceready`** fires **after the page has already initialized**, or **event handlers are attached before the page exists** in the DOM. To ensure reliable behavior:

#### 🔧 Solution:
Use Framework7’s `f7ready()` and ensure `page:init` handlers are inside the Framework7 lifecycle. Also, debounce DOM event binding to avoid duplicates.

**Fix 1**: Wrap `loadEvents` logic properly:

// Inside initializeApp() → Replace this:
$(document).on('page:init', '.page[data-name="home"]', function () {
  loadEvents();
  $(document).on('click', '.reload-events', function () {
    loadEvents();
  });
});

// With this safer and more efficient version:
f7App.on('pageInit', function (page) {
  if (page.name === 'home') {
    loadEvents();

    // Unbind first to avoid multiple bindings
    $(document).off('click', '.reload-events').on('click', '.reload-events', function () {
      loadEvents();
    });
  }
});

—

### ✅ **Issue 2: `scanInProgress` stuck `true` when navigating back and scanning again**

You're setting `scanInProgress = true` **before** calling the barcode scanner, but if the user goes "Back" before scan completes, the flag stays `true`.

#### 🔧 Solution:
Reset `scanInProgress = false` also when user **navigates away from the page**, or **manually cancels** the scan.

**Fix 2**: Add event unbinding and reset on page removal:

// Inside event-details page:init
f7App.on('pageBeforeRemove', function (page) {
  if (page.name === 'event-details') {
    scanInProgress = false; // Reset scan state
    $(document).off('click', '.scan');
    $(document).off('click', '.manually');
  }
});

Also, double check this part:

function scanSuccess(result) {
  scanInProgress = false; // Already there – good
  ...
}
function scanError(error) {
  scanInProgress = false; // Already there – good
  ...
}

But make sure you're not missing `scanInProgress = false` in any unexpected user actions (e.g. navigating away mid-scan).

—

### ✅ Bonus: Improve Event Binding and State

Use a **`bindScanEvents()`** and `unbindScanEvents()` approach for better cleanup.

function bindScanEvents() {
  $(document).on('click', '.scan', scanHandler);
  $(document).on('click', '.manually', manualHandler);
}

function unbindScanEvents() {
  $(document).off('click', '.scan', scanHandler);
  $(document).off('click', '.manually', manualHandler);
}

Then use these inside `page:init` and `pageBeforeRemove`.

—

### ✅ Summary

Would you like me to give you the **fully optimized version** of your `initializeApp()` function with all these changes applied?