Fixing Data Sync in Oracle APEX with pageItems

While working on an Oracle APEX application, I came across a subtle but critical issue involving data desynchronization between the frontend and the backend. The problem was not throwing any error messages, making it even harder to detect. This article explains what was happening, how I identified the issue, and the simple fix that made everything work as expected.

The Setup

I have an AJAX Callback that fetches data from the database and displays it inside a Static Content region on the screen.
The process is straightforward:

• A stored procedure is called in the database.
• It returns a JSON object.
• That JSON is used to populate various fields on the page.

When the user clicks the Start button, a Dynamic Action executes the JavaScript code below:

apex.server.process("AssignLoad", {
    pageItems: "#P5_VAR1,#P5_VAR2,#P5_VAR3,#P5_VAR4,#P5_VAR5"
}, {
    dataType: "json",
    success: function(pData) {

        if (pData.success) {

            apex.message.clearErrors();
            apex.item('P5_VAR5').hide(); // Hide conditional field

            const itemsData = [
                { id: 'P5_VAR1', value: pData.loadNumber },
                { id: 'P5_VAR2', value: pData.productCode },
                { id: 'P5_VAR3', value: pData.productCategory },
                { id: 'P5_VAR4', value: pData.flagCertified },
                { id: 'P5_VAR5', value: pData.showFlag }
            ];

            itemsData.forEach(({ id, value }) => {
                apex.item(id).setValue(value);
            });

            if (apex.item('P5_VAR4').getValue().toUpperCase() === 'S') {
                apex.item('P5_VAR5').show();
            }

        } else {
            apex.message.showErrors([
                {
                    type: "error",
                    location: ["inline"],
                    message: pData.message,
                    pageItem: "P5_VAR1"
                }
            ]);
        }
    },
    error: function(request, status, error) {
        alert("Request error => " + status + " - " + error);
    }
});

The Problem

When the first record is loaded, the user can edit its fields and click Save.
This works perfectly — the values are updated in the database and a new record is automatically loaded for the user to continue.

But here’s the catch: when the user edits and tries to save the second record, nothing happens.

• No error.
• No confirmation.
• No update in the database.

At first glance, it looks like a random failure or maybe a validation issue. But after digging deeper, I realized it was a frontend/backend state mismatch.

Root Cause

After saving the first record, the frontend is correctly populated with the second one — visually, everything seems fine.

However, the backend (i.e., the session state) is still holding the values of the first record.

So when the Save process is triggered again, it’s actually trying to update the first record, not the second.

Since the ID no longer matches what’s shown on the screen, the update silently fails — without triggering any validations or errors.

The Fix: pageItems

To keep the frontend and backend in sync, I explicitly passed the relevant page items as parameters in the pageItems attribute of the apex.server.process() call:

pageItems: "#P5_VAR1,#P5_VAR2,#P5_VAR3,#P5_VAR4,#P5_VAR5"

This forces APEX to submit those items to the server before executing the AJAX Callback.

As a result:

• The session state is updated with the current record.
• Any backend logic now operates on the correct data.
• The second record can be saved without issue.