Auto load staff events

User

$(document).on('click', '.reload-events-staff', function()
{

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) {

$('.staff-screen ul.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()];
$('.staff-screen div.events').append(`

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

0/500

`);

//$('.staff-screen ul.events').append(`${eventDatetime.toLocaleDateString('en-GB', dateOptions)} – ${eventDatetime.toLocaleTimeString('en-US', timeOptions)} ${dayname} – ${val.venue_title} – ${val.venue_full}Collect Payment`);
});
}else{
$('.events').html(`${events.message}`);
}
},
error: function(xhr,status,error)
{
f7App.dialog.alert('Something went wrong. Please try again.', 'Error');
},
complete: function()
{
f7App.dialog.close();
}
});
});
remove click event just run default

Assistant

To **run the AJAX function by default without needing a click**, simply extract the function from the click event and **call it directly** on page load (e.g. within `$(document).ready()` or Framework7's `page:init`).

Here’s the **modified version** of your code:

function loadStaffEvents() {
  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) {
        $('.staff-screen ul.events').html('');
        $('.staff-screen 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()];
          $('.staff-screen div.events').append(`
            <div class="space-y-4 mb-4" data-event-id="${val.event_id}" data-event-date-id="${val.event_date_id}">
              <div class="rounded-lg border border-border/40 card bg-background hover:shadow-lg transition-shadow cursor-pointer">
                <div class="p-6">
                  <div class="flex justify-between items-center">
                    <div>
                      <h3 class="text-xl font-semibold">${val.venue_full}</h3>
                      <p class="text-gray-600">${dayname} at ${eventDatetime.toLocaleDateString('en-GB', dateOptions)} - 
                        ${eventDatetime.toLocaleTimeString('en-US', timeOptions)}</p>
                    </div>
                    <div class="text-right">
                      <div class="inline-flex items-center rounded-full border font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 text-foreground border-border px-2.5 py-0.5 text-xs">
                        0/500
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>`);
        });
      } else {
        $('.events').html(`<div class="no-result-item text-center bg-info text-white">${events.message}</div>`);
      }
    },
    error: function(xhr, status, error) {
      f7App.dialog.alert('Something went wrong. Please try again.', 'Error');
    },
    complete: function() {
      f7App.dialog.close();
    }
  });
}

// Call it directly on page load or page init
$(document).ready(function() {
  loadStaffEvents();
});

// OR if you're using Framework7 page event:
$(document).on('page:init', '.page[data-name="staff"]', function (e) {
  loadStaffEvents();
});

✅ **Benefits:**
– No `.click()` event needed.
– You control where and when the event data loads.
– You can still reuse `loadStaffEvents()` anywhere else (e.g. refresh button).

User

framework 7 login with local storage

Assistant

To implement **Framework7 login with Local Storage**, you can follow this approach:

### ✅ What we’ll do:
1. User logs in by entering credentials (you can skip server check for simplicity).
2. Store a flag (e.g., `isLoggedIn = true`) in `localStorage`.
3. On app start, check `localStorage` — if logged in, redirect to home.
4. Else show login screen.

—

### 🔧 1. HTML (login.html)

<!-- login.html -->
<div class="page" data-name="login">
  <div class="page-content login-screen-content">
    <div class="block">
      <h2>Login</h2>
      <div class="list">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Username</div>
                <div class="item-input-wrap">
                  <input type="text" id="username" placeholder="Enter username">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Password</div>
                <div class="item-input-wrap">
                  <input type="password" id="password" placeholder="Enter password">
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block">
        <a href="#" class="button button-fill login-button">Login</a>
      </div>
    </div>
  </div>
</div>

—

### 🔌 2. JavaScript Logic

document.addEventListener('deviceready', function () {
  // Initialize Framework7 app
  var f7App = new Framework7({
    el: '#app',
    name: 'LoginApp',
    theme: 'auto',
    routes: [
      { path: '/', url: 'pages/home.html' },
      { path: '/login/', url: 'pages/login.html' }
    ]
  });

  var mainView = f7App.views.create('.view-main');

  // Redirect if already logged in
  if (localStorage.getItem('isLoggedIn') === 'true') {
    mainView.router.navigate('/');
  } else {
    mainView.router.navigate('/login/');
  }

  // Handle login button click
  $(document).on('click', '.login-button', function () {
    var username = $('#username').val();
    var password = $('#password').val();

    if (username === 'admin' && password === 'admin') {
      localStorage.setItem('isLoggedIn', 'true');
      mainView.router.navigate('/');
    } else {
      f7App.dialog.alert('Invalid credentials', 'Login Failed');
    }
  });
});

—

### 🏠 3. Home Page (home.html)

<!-- home.html -->
<div class="page" data-name="home">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Home</div>
      <div class="right">
        <a href="#" class="link logout-button">Logout</a>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <h2>Welcome!</h2>
      <p>This is the home page.</p>
    </div>
  </div>
</div>

—

### 🚪 4. Logout Logic

$(document).on('click', '.logout-button', function () {
  localStorage.removeItem('isLoggedIn');
  f7App.views.main.router.navigate('/login/');
});

—

### ✅ Summary
– 🔐 You simulate login using localStorage.
– 🔁 Redirect to home if already logged in.
– 🚪 Logout clears the login status.

Let me know if you want to include a backend check via AJAX too.

User

How to pair android studion virtual to mobile using qrcode

Assistant

To pair Android Studio's **Device Mirroring** or **ADB over Wi-Fi** with your **real Android device using a QR code**, follow these steps:

—

### ✅ Requirements:
– Android Studio **Hedgehog** or later
– USB cable (for initial setup)
– Phone running Android 11 or above (preferably)
– Developer options & USB debugging enabled

—

### 🔄 Option 1: **ADB Pairing via QR Code (No Cable Needed)**

#### 🔧 Step-by-Step Instructions:

1. **Enable Developer Options** on your phone:
– Go to **Settings > About phone** → tap **Build number** 7 times
– Go to **Settings > System > Developer options**

2. **Enable Wireless Debugging**:
– In **Developer options**, turn on **Wireless debugging**

3. **Pair using QR code**:
– In Android Studio:
– Go to **Device Manager** (right sidebar) → Click **+ Pair using Wi-Fi**
– Choose **Pair using QR code**

– On your Android device:
– Still in **Wireless Debugging** → Tap **Pair device with QR code**
– Scan the QR code shown in Android Studio

4. ✅ Done! Your real device will show up under **Connected Devices** in Android Studio.

—

### 🔁 Option 2: **ADB Over Wi-Fi Using IP and Port (Manual)**

If QR pairing fails, use this method with a USB cable for the first time:

adb usb                     # (optional) ensure USB connection
adb tcpip 5555
adb connect <DEVICE_IP>:5555

You can get the IP from:
– `adb shell ip route`
– or phone’s Wi-Fi settings.

—

### 📌 Notes:
– QR Code method uses **secure pairing** (Android 11+).
– Works even without USB if Wireless Debugging is supported.
– Make sure both PC and phone are on the **same Wi-Fi network**.

—

Let me know if you want to mirror the screen or just run/debug apps.

User

ok now paired how to use in android studio

Assistant

Great — since your Android device is now **paired via QR code** and connected for wireless debugging, here’s how to **use it in Android Studio**:

—

### ✅ Steps to Use Paired Android Device in Android Studio

#### 📱 1. **Check Device Connection**
– Open **Android Studio**
– Go to **Device Manager** (right toolbar)
– Your phone should appear under **"Connected Devices"**
– Name like `Pixel 6a (Wi-Fi)` or similar
– If not, open **Terminal** and run:

adb devices

You should see your device listed as `device`.

—

#### ▶️ 2. **Run Your App on the Device**
– Open your Android project
– Click the **Run ▶️** button or press `Shift + F10`
– In the **"Select Deployment Target"** window, choose your **Wi-Fi connected phone**
– Click **OK** or **Run**

Android Studio will build the app and install it on your device wirelessly.

—

#### 🔁 3. **Enable Instant Run (Optional for Speed)**
– Go to **File > Settings > Build, Execution, Deployment > Deployment**
– Enable **"Apply changes…"** to push code without reinstalling the app

—

#### 🚫 4. **To Disconnect Device Later**
– On your phone:
Go to **Developer options > Wireless debugging** → Tap **Forget all devices**
– Or run in terminal:

adb disconnect <ip>:port

—

—

Let me know if you want to **mirror screen**, **debug logs**, or use **ADB commands** directly.

User

we have seen device but how to run

Assistant

Perfect — since your device is **visible in Android Studio**, here’s exactly how to **run your app on it** step-by-step:

—

### ✅ How to Run Your App on the Paired Android Device

#### 🔁 Step-by-Step:

1. **Open Your Project** in Android Studio.

2. At the top toolbar, locate the **Device dropdown** (next to the green ▶️ Run button).

3. From the dropdown, **select your connected device**:
It should appear like:
`Pixel 6a (Wi-Fi)` or `SM-M14 (192.168.x.x:5555)` depending on your phone.

4. Click the **Run ▶️ button** or press `Shift + F10`.

5. Android Studio will:
– **Build the APK**
– **Install it wirelessly**
– **Launch the app automatically** on your phone

—

### 📱 On Your Phone
– Ensure the screen is **unlocked**
– You’ll see your app open once it’s successfully deployed

—

### 🛠 If the device is not listed in dropdown:
– Try clicking **Run ▶️** anyway — a popup will appear to **select device**
– If still not listed:
– Go to **View > Tool Windows > Device Manager**
– Or run `adb devices` to verify it’s connected as `device`

—

Let me know if:
– You want to enable **live logcat logging**
– You want to **debug** the app using breakpoints
– You need **multiple devices or emulator + real device setup**

User

error: function(xhr,status,error)
{
f7App.dialog.alert('Something went wrong. Please try again.'+error+status+xhr, 'Error');
}
how to get detailed error

Assistant

To get **detailed error output in your AJAX error callback**, you should extract useful parts from the `xhr` object, such as:

– `xhr.status` – HTTP status code (e.g., 404, 500)
– `xhr.statusText` – status description (e.g., "Not Found")
– `xhr.responseText` – raw server response
– `error` – general error message from jQuery
– `status` – error type (like "error", "timeout", "parsererror")

—

### ✅ Updated Error Function (Verbose Logging):

error: function(xhr, status, error) {
    let detailedMessage = `
      ❌ Status: ${xhr.status} (${xhr.statusText})n
      🧠 Error Type: ${status}n
      📩 Response: ${xhr.responseText || 'No response'}n
      🧾 Error: ${error}
    `;
    
    console.error("AJAX Error Details", {
        status: xhr.status,
        statusText: xhr.statusText,
        responseText: xhr.responseText,
        error: error,
        fullXhr: xhr
    });

    f7App.dialog.alert(detailedMessage, 'Error');
}

—

### 🛠 Extra Tip for JSON Responses

If your backend returns JSON and you're expecting `result.message`, check:

try {
    const json = JSON.parse(xhr.responseText);
    console.log("Parsed JSON:", json);
} catch (e) {
    console.warn("Response is not valid JSON");
}

—

This gives you a **clear breakdown** inside both:
– The **alert for the user**
– The **console for debugging**

Let me know if you want to log it to a remote server or alert with a friendly error message instead.

User

xhr.status return 0

Assistant

When `xhr.status` returns **0** in a jQuery AJAX request, it typically means the request **never reached the server properly**, or the browser **blocked it**. Here's what it means and how to fix it.

—

### 🚨 Causes of `xhr.status == 0`:

—

### ✅ How to Debug It

Update your error block like this to get more clues:

error: function(xhr, status, error) {
    console.error("AJAX Error", {
        status: xhr.status,                // 0
        statusText: xhr.statusText,        // Often empty
        responseText: xhr.responseText,    // May be empty
        readyState: xhr.readyState,        // 0-4
        errorThrown: error,
        url: this.url                      // URL being requested
    });

    f7App.dialog.alert(`
        ❌ AJAX failed!
        Status: ${xhr.status}
        ReadyState: ${xhr.readyState}
        Error: ${error}
        Response: ${xhr.responseText || 'No response'}
    `, 'Error');
}

—

### 🛠 Solutions to Try

1. **Check your `url` value**:

url: `${ApiUrl}today` // Make sure ApiUrl is set correctly

– Try logging `ApiUrl` before the AJAX call to ensure it's not undefined.

2. **Add CORS headers on server (if using PHP)**:

header("Access-Control-Allow-Origin: *");
   header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
   header("Access-Control-Allow-Headers: Content-Type, Authorization");

3. **Use HTTPS for both frontend and backend**
If your app is served over HTTPS, your API must also be HTTPS.

4. **Test API directly**:
– Open browser dev tools → Network tab
– Paste the API URL directly to see if it responds

5. **Try using `cordova-plugin-whitelist` (if in Cordova)**:
If you're running this inside a Cordova app:

<access origin="*" />
   <allow-navigation href="*" />
   <allow-intent href="*" />

And ensure plugin is installed:

cordova plugin add cordova-plugin-whitelist

—

Let me know if you're testing on mobile, localhost, or remote server — I can give more specific advice.

User

document.addEventListener('deviceready', function () {
if (cordova.platformId === 'android') {
var permissions = cordova.plugins.permissions;

permissions.checkPermission(permissions.CAMERA, function (status) {
if (!status.hasPermission) {
// Request permission
permissions.requestPermission(
permissions.CAMERA,
function (status) {
if (status.hasPermission) {
navigator.splashscreen.hide(); // Hide splash after permission
initializeApp(); // Proceed with your app
} else {
navigator.app.exitApp(); // Exit if denied
}
},
function () {
navigator.app.exitApp(); // Exit on request error
}
);
} else {
navigator.splashscreen.hide();
initializeApp(); // Permission already granted
}
});
} else {
navigator.splashscreen.hide(); // For browser/iOS fallback
initializeApp();
}
}, false);
function initializeApp() {

let TOKEN = 'fossettscircustoken';
var eventId = -1;
var eventDateId = -1;
let ApiUrl = 'https://staging.fossettscircus.com/boxoffice/index.php/api/';

});

$(document).on('page:init', '.page[data-name="staff-pay-terminal"]', function () {
$('.back-to-access').on('click', function () {
f7App.views.main.router.navigate('/staff/');
});
$(document).on('input', '#amountInput', function () {
const amount = parseFloat($(this).val());
const btn = $('#chargeBtn');

if (amount > 0) {
btn.removeClass('disabled color-gray').addClass('color-green');
btn.text('Charge €' + amount.toFixed(2));
} else {
btn.addClass('disabled color-gray').removeClass('color-green');
btn.text('Charge €0.00');
}
});
})
var staffEventsLoaded = false;
$(document).on('page:init', '.page[data-name="staff-tickets"]', function () {
$('.back-to-access').on('click', function () {
f7App.views.main.router.navigate('/staff/');
});
$(document).on('click', '.reload-events-staff', function()
{

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) {

$('.staff-screen ul.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()];
$('.staff-screen div.events').append(`

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

0/500

`);

//$('.staff-screen ul.events').append(`${eventDatetime.toLocaleDateString('en-GB', dateOptions)} – ${eventDatetime.toLocaleTimeString('en-US', timeOptions)} ${dayname} – ${val.venue_title} – ${val.venue_full}Collect Payment`);
});
}else{
$('.events').html(`${events.message}`);
}
},
error: function(xhr,status,error)
{
f7App.dialog.alert('Something went wrong. Please try again.', 'Error');
},
complete: function()
{
f7App.dialog.close();
}
});
});

// load events click

$('.reload-events-staff').trigger('click');

$(document).on('click', '.logout-staff', function()
{

localStorage.removeItem('staff_token');
localStorage.removeItem('access_type');
f7App.views.main.router.navigate('/');
});
});
$(document).on('page:init', '.page[data-name="staff-check-orders"]', function () {
$('.back-to-access').on('click', function () {
f7App.views.main.router.navigate('/staff/');
});
});
$(document).on('page:init', '.page[data-name="staff-dashboard"]', function () {
$('.back-to-access').on('click', function () {
f7App.views.main.router.navigate('/');
});
$('#staff-tickets').on('click', function () {
f7App.views.main.router.navigate('/staff-tickets/');
});
$('#open-pay-terminal').on('click', function () {
f7App.views.main.router.navigate('/staff-pay-terminal/');
});
$('#check-orders').on('click', function () {
f7App.views.main.router.navigate('/staff-check-orders/');
});

// load events click
$('.reload-events-staff').trigger('click');
$(document).on('click', '.logout-staff', function()
{

localStorage.removeItem('staff_token');
localStorage.removeItem('access_type');
f7App.views.main.router.navigate('/');
});
});
$(document).on('page:init', '.page[data-name="staff-login"]', function () {
$('.back-to-access').on('click', function () {
f7App.views.main.router.navigate('/');
});
$('#staff-login-form').on('submit', function (e) {
e.preventDefault();
var email = $('#staff-email').val();
var password = $('#staff-password').val();
f7App.dialog.preloader('Logging in…');
$.ajax({
url: `${ApiUrl}staff_login`,
method: 'POST',
data: {
token: TOKEN,
email: email,
password: password
},
success: function (result, status, xhr) {
var apiResult = JSON.parse(result);
if (apiResult.result) {
f7App.views.main.router.navigate('/staff/');
} else {
$('#login-result').html(apiResult.message);
}
},
error: function (xhr, status, error) {
f7App.dialog.alert('Something went wrong. Please try again.', 'Error');
},
complete: function () {
// ✅ Hide preloader after AJAX completes
f7App.dialog.close();
}
});
});
});

// Page: Customer
$(document).on('page:init', '.page[data-name="customer"]', function () {
// 👇 Ensure Bootstrap re-binds modal events
$('.back-to-access').on('click', function () {
f7App.views.main.router.navigate('/');
});
var sendCode = function(code)
{
$('.scan').prop('disabled', true);
$('.manually').prop('disabled', true);
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html('Code '+ code +' sent to boxoffice, plase wait…');

$.ajax({
url: `${ApiUrl}scan`,
method: 'POST',
data: {
token: TOKEN,
event_date_id: eventDateId,
order_code: code
},
success: function(result,status,xhr)
{
var apiResult = JSON.parse(result);

if ( apiResult.result )
{
$('#scan-result').removeClass('bg-dark').addClass('bg-success').html(apiResult.message+''+apiResult.seating+''+apiResult.tickets);

// reset input to set next code
$('[name="code"]').val(eventId +'.'+ eventDateId +'.');
}
else
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html(apiResult.message);
}
},
error: function(xhr,status,error)
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html('Code '+ result.text +' could not be sent to boxoffice, please try again');
},
complete: function()
{
$('.scan').prop('disabled', false);
$('.manually').prop('disabled', false);
}
});
}

var scanError = function (error)
{
$('#scan-result').removeClass('bg-success').addClass('bg-dark').html("Scanning failed: " + error);

f7App.popup.open('#modal-scan-result');
};

f7App.popup.open('#modal-scan-result');
};
$(document).on('click', '.reload-events', function()
{

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) {

$('.customer-screen ul.events').html('');

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

0/500

`);
// $('.customer-screen ul.events').append(`
//
//
//
//
// ${eventDatetime.toLocaleDateString('en-GB', dateOptions)} –
// ${eventDatetime.toLocaleTimeString('en-US', timeOptions)} ${dayname} –
// ${val.venue_title} – ${val.venue_full}
//
//
//
//
// `);
// $('.customer-screen ul.events').append(`${eventDatetime.toLocaleDateString('en-GB', dateOptions)} – ${eventDatetime.toLocaleTimeString('en-US', timeOptions)} ${dayname} – ${val.venue_title} – ${val.venue_full}`);

});
}else{
$('.events').html(`${events.message}`);
}
},
error: function(xhr,status,error)
{
f7App.dialog.alert('Something went wrong. Please try again.'+xhr.statusText+xhr.status, 'Error');
},
complete: function()
{
f7App.dialog.close();
}
});
});

// load events click
$('.reload-events').trigger('click');

$(document).on('click', '.customer-screen .events .list-group-item', function()
{

$('.customer-screen .events .list-group-item').removeClass('active');
$(this).addClass('active');

$('#scan-info').html($(this).html());

eventId = $(this).attr('data-event-id');
eventDateId = $(this).attr('data-event-date-id');

$('[name="code"]').val(eventId +'.'+ eventDateId +'.');

// first scan on event date click
//cordova.plugins.barcodeScanner.scan(scanSuccess, scanError, scanConfig);
f7App.popup.open('#modal-scan-result');

});

$(document).on('click', '.scan', function()
{
cordova.plugins.barcodeScanner.scan(scanSuccess, scanError, scanConfig);
});

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

});

// $('ons-button').on('click', function(e) {
// ons.notification.alert('Button is tapped!');
// })

});

}

above code for fetch event for customer section stopped working its return ajax status 0 in andrdroind but when run in browser its work well

Assistant

Thank you for sharing the full code. The AJAX call in your **Cordova/Framework7 app** is returning `status 0` **only in Android (device or emulator)**, which strongly indicates a **CORS, HTTPS, or network configuration issue specific to Cordova**.

—

### ✅ Root Cause (Most Likely):

Your AJAX call is to:

let ApiUrl = 'https://staging.fossettscircus.com/boxoffice/index.php/api/';

While this works in the **browser**, Cordova apps run in a **WebView sandbox**, and:

– Do **not allow external domains** unless explicitly permitted.
– Require **CORS headers** on the server.
– May block **HTTPS → HTTP** (or vice versa) if not handled correctly.

—

### ✅ Fix It Step-by-Step:

—

#### ✅ 1. Add Cordova Whitelist Plugin (if not added):

Run:

cordova plugin add cordova-plugin-whitelist

Then in `config.xml`, add:

<allow-navigation href="*" />
<access origin="*" />
<allow-intent href="*" />

—

#### ✅ 2. Ensure AndroidManifest Permissions:

Inside your `AndroidManifest.xml`, confirm:

<uses-permission android:name="android.permission.INTERNET" />

—

#### ✅ 3. Server Must Allow CORS

Your server (`staging.fossettscircus.com`) **must send the right headers**:

In your PHP API backend (`index.php/api/today`), add:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

Place these at the **very top** before any output.

—

#### ✅ 4. Debug with More Detail

In your `.ajax()` `error` callback, replace with this to inspect further:

error: function(xhr, status, error) {
    console.error("XHR ERROR:", {
        status: xhr.status,
        statusText: xhr.statusText,
        responseText: xhr.responseText,
        readyState: xhr.readyState,
        errorThrown: error,
        headers: xhr.getAllResponseHeaders()
    });
    
    f7App.dialog.alert(`
        ❌ AJAX Failed
        Status: ${xhr.status} (${xhr.statusText})
        Error: ${error}
        Response: ${xhr.responseText}
    `, 'Error');
}

—

#### 🧪 5. Test with a Localhost Server on Android Device

Sometimes Android WebView blocks requests to `localhost` or `https` servers with self-signed SSL. Try changing:

let ApiUrl = 'http://your-lan-ip/boxoffice/index.php/api/';
// or deploy a test endpoint on a public URL with HTTPS and CORS enabled

—

### 🧠 Extra Tips

– If you're using `content-security-policy`, loosen it for dev:

<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: gap:;">

– Android 9+ blocks **cleartext (HTTP)** traffic by default. You must allow it in `network_security_config.xml`.

—

### ✅ Final Suggestion:

If you want, I can test the live `https://staging.fossettscircus.com/boxoffice/index.php/api/today` URL for proper CORS headers. Just let me know.

Let me know how you're running it (emulator, real device, APK) and I’ll tailor the fix more closely.

User

cors header already present and its working best in cordova run broswer
but I think I have updated android sdk

Assistant

Thanks for the update. Since:

– ✅ CORS headers are present,
– ✅ It works in `cordova run browser`,
– ❌ But fails on **real Android device or emulator** with `status = 0`,
– 💡 And you've **recently updated Android SDK**,

You're likely hitting a **WebView security change in newer Android SDK versions**, especially Android 10+ (SDK 29+).

—

### ✅ Checklist to Fix Cordova AJAX status 0 on Android:

#### ✅ 1. **Enable `usesCleartextTraffic`** if using HTTP (not needed for HTTPS)
If your API URL is `http://` (not `https://`), Android 9+ blocks it by default.

In `AndroidManifest.xml` inside “:

android:usesCleartextTraffic="true"

And define this inside `res/xml/network_security_config.xml`:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <base-config cleartextTrafficPermitted="true" />
</network-security-config>

Then reference it:

<application
  android:networkSecurityConfig="@xml/network_security_config"
  android:usesCleartextTraffic="true"
  ...>

✅ **Not needed for HTTPS**, but if your domain uses a **self-signed SSL** or weak certificate, that can cause issues too.

—

#### ✅ 2. **Force Cordova to Use Legacy WebView**
If you're using a new Android WebView (based on Chromium), it may enforce stricter network rules.

Add to `config.xml`:

<preference name="AndroidInsecureFileModeEnabled" value="true" />
<preference name="AndroidXEnabled" value="true" />

You can also try forcing a compatible WebView:

cordova plugin add cordova-plugin-androidx-adapter

—

#### ✅ 3. **Inspect Dev Logs via `adb logcat`**
Run this in terminal to see real-time logs:

adb logcat | grep chromium

This will often reveal:
– Mixed content errors
– Certificate validation issues
– Blocked cross-origin requests

—

#### ✅ 4. **Test with Postman or Mobile Browser on Same Device**
Use your **phone’s browser** to open:

https://staging.fossettscircus.com/boxoffice/index.php/api/today

If the result is empty or SSL warns you — then the problem is with:
– SSL cert (not fully trusted)
– Invalid DNS or redirect

—

#### ✅ 5. **Try Running With Older Target SDK**
Temporarily change `platforms/android/app/build.gradle`:

targetSdkVersion = 30

Or in `config.xml`:

<preference name="android-targetSdkVersion" value="30" />

Then run:

cordova platform remove android
cordova platform add android@latest
cordova build android

—

### 🧪 Final Debug Help
If still stuck, add a temporary test API with:

<?php
header("Access-Control-Allow-Origin: *");
echo json_encode(["result" => true, "message" => "It works!"]);

Then test that in your app to isolate the API issue vs. SDK/WebView issue.

—

Let me know your:
– Android version (10/11/12/etc.)
– Cordova version
– Target SDK in `AndroidManifest.xml`

And I’ll guide you precisely!