Trigger events on page load

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');
i want
run $('.reload-events-staff').trigger('click'); one time when click on page on framewrok 7

Here’s how to do it properly:

### ✅ Recommended Way:
Assuming the page has `data-name="staff"`:

// Framework7 page:init event
$(document).on('page:init', '.page[data-name="staff"]', function (e) {
  $('.reload-events-staff').trigger('click');
});

### ✅ Alternate with `page:afterin` (if animation/navigation needs to finish first):

$(document).on('page:afterin', '.page[data-name="staff"]', function (e) {
  $('.reload-events-staff').trigger('click');
});

### ✅ Full Example in context:

// Trigger load on staff page open
$(document).on('page:init', '.page[data-name="staff"]', function (e) {
  $('.reload-events-staff').trigger('click');
});

// Click handler
$(document).on('click', '.reload-events-staff', function () {
  f7App.dialog.preloader('Loading events...');
  $.ajax({
    url: `${ApiUrl}today`,
    method: 'POST',
    data: { token: TOKEN },
    success: function(result) {
      var events = JSON.parse(result);
      if (events.result) {
        $('.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() {
      f7App.dialog.alert('Something went wrong. Please try again.', 'Error');
    },
    complete: function() {
      f7App.dialog.close();
    }
  });
});

Let me know your `data-name` or page ID if you want to bind this specifically to another page.

correct this

**"Regarding the database, we currently have an outdated SQL file. We need the latest version of the database SQL file to use on our local server."**

Alternate concise version:

**"We have an old version of the SQL file. Please share the latest database SQL file so we can use it on our local server."**

Let me know if you want a more formal or technical tone.

—

### ✅ Solution: Run `.trigger('click')` only the **first time**
To avoid multiple calls, you can use a flag to ensure the reload only happens once per session:

var staffEventsLoaded = false;

$(document).on('page:init', '.page[data-name="staff"]', function (e) {
  if (!staffEventsLoaded) {
    $('.reload-events-staff').trigger('click');
    staffEventsLoaded = true;
  }
});

—

### 🔄 Optional: Reset on logout or page reload
If needed, you can reset the flag when the user logs out or navigates away completely:

$(document).on('click', '.logout-staff', function () {
  staffEventsLoaded = false;
});

—

### 📌 Alternative (Framework7 Route Guard Based)
If you're using routes with `on: { pageInit() {} }`, you can apply the same `flag` logic inside the route’s `pageInit`.

Let me know if you want the events to refresh *every time you enter the page* **but not when going back** — in that case we’ll switch to using `page:mounted` or route hooks with `keepAlive`.