Partial Page Refresh After Lesson Completion

When a learner marks a lesson complete, something on the page usually needs to update — a progress bar, a “Continue” button, a locked message that should disappear. Without the right setup, they check the box and… nothing. They have to manually refresh to see the change. That breaks the flow.

Partial page refresh fixes that. Instead of reloading the entire page, BricksMembers can update only the sections that changed — progress bars, conditional content, drip-unlocked areas — via AJAX. Or you can choose a full reload that scrolls to the right spot. Either way, learners get immediate feedback when they complete content. And the best part: All 100% Bricks-native. No custom elements or so needed!

This guide explains how it works, when to use each option, and how to set it up.

What you’ll learn:

• Two triggers: After Progress Change (any completion) and After Drip Unlock (when completing unlocks drip content)
• Two modes: partial refresh (AJAX) vs full refresh
• When to use each trigger and mode
• Step-by-step setup
• Optional scroll, highlight, and progress bar refresh
• Common mistakes and troubleshooting

Prerequisites:

• Progress Tracking module enabled
• Drip Content module enabled (only if using After Drip Unlock)
• A Bricks page with a Progress Checkbox

Two Triggers: When Does the Refresh Happen?

The Progress Checkbox has two separate controls that determine when a refresh runs. Both live in the Events tab.

After Progress Change

Fires on any progress change, when the learner marks content complete or unchecks it. Use this when you want the page to update whenever progress changes, regardless of drip.

Use cases: Progress bars that need to update in place. Sections that show “completed” vs “in progress” based on Bricks conditions. Dashboards where completion status drives what’s visible. Any page where content depends on progress and you want it to update without a full reload.

Note: Partial refresh fires on both complete and incomplete. Full refresh fires on complete only.

After Drip Unlock

Fires only when completing this post unlocks new drip content. Use this when the main goal is updating locked/unlocked areas, e.g. a “Continue to Lesson 2” button that appears only after Lesson 1 is done.

Use cases: Lesson pages where the next lesson is drip-locked. Content that unlocks when prerequisites are completed. Any scenario where drip rules control what’s visible.

Important: When drip unlocks occur, After Drip Unlock overrides After Progress Change. So you can set both: use After Progress Change for general updates (e.g. progress bars), and After Drip Unlock for drip-specific behavior. When completing unlocks drip content, the drip settings apply; otherwise, the progress change settings apply.

The Two Modes: Partial vs Full Refresh

Both triggers offer the same three options:

• Do nothing — No automatic update. The learner must reload manually.
• Update matched wrappers (AJAX) — Partial refresh. Selected wrapper elements re-render in place via AJAX—no full page reload. Content updates instantly. Optional scroll-to-element and highlight effects.
• Reload page with position — Full refresh. The page reloads, then either restores scroll position or jumps to a target element. Simpler to configure.

When to Use Each Mode

Partial refresh (AJAX) gives a seamless, app-like feel. Content updates without a flash or reload, ideal when the learner stays in context. It requires wrapper elements, CSS selectors, and Bricks element IDs, but pays off in UX. For After Progress Change, you can also enable Refresh Progress Bars to automatically re-render all BRM Progress Bar elements on the page.

Full refresh is simpler. No wrapper setup, just pick the mode and, if using “Scroll to element”, add a class or ID to the target. Use it when you prefer reliability over seamlessness, or when the page has complex state (multiple query loops, heavy JavaScript) that benefits from a clean reload.

Setup: Partial Refresh (AJAX)

Partial refresh re-renders specific sections via AJAX. When the learner completes (or uncompletes) content, BricksMembers fetches fresh HTML for the matched wrappers from the server and swaps it in. The server evaluates all conditions (drip, access, progress, etc.) and returns the correct state—so you never risk showing the wrong content.

Step 1: Prepare Your Wrapper

Each section you want to refresh must live inside a wrapper (Section, Container, or Div). That wrapper holds the content that changes, for drip: locked message + unlocked next-button; for general progress: progress-dependent sections, completion badges, etc.

1. Add a wrapper around the content that should update
2. Give it a CSS class or custom ID, e.g. drip-refresh, progress-refresh, or unlock-panel. In Bricks: select the wrapper → Advanced → CSS Class(es) or CSS ID
3. Inside the wrapper, add child elements whose visibility depends on conditions (drip locked/unlocked, progress completed, etc.). Use Bricks conditions to control visibility
4. Important: Don’t put conditional logic on the wrapper itself—only on its children. Otherwise the refresh won’t work correctly.

Step 2: Configure the Progress Checkbox

Choose which trigger to use (After Progress Change or After Drip Unlock), then:

1. Select the BRM Progress Checkbox in Bricks
2. Open the Events tab and find the trigger you’re using
3. Set it to Update matched wrappers (AJAX)
4. Enter the CSS Selector that matches your wrapper. Examples: .drip-refresh (class), #unlock-panel (ID). For multiple wrappers, separate with commas
5. Enter the Bricks Element IDs. Bricks assigns a 6-character ID to each element. Select your wrapper and look at the top of the settings panel, you’ll see something like #brxe-yydnul. The part after #brxe- (e.g. yydnul) is the element ID. Enter it here. For multiple wrappers, the order must match the order of your CSS selectors, comma-separated.
6. If using After Progress Change, optionally enable Refresh Progress Bars to re-render all BRM Progress Bar elements on the page

Scroll & Highlight (optional): After the AJAX refresh, you can scroll to the first refreshed element and/or highlight it. Enable Scroll to Element and Highlight Element in the same control group. Useful when the updated area is below the fold—the learner’s attention is drawn to it.

Setup: Full Refresh

Simpler: set your chosen trigger to Reload page with position. When the refresh fires, the page reloads. You can then choose:

• Restore exact scroll position — Returns the learner to where they were before the reload
• Scroll to element — Jumps to an element matching a CSS selector. Add that class or ID to your target in Bricks. Optionally enable highlight so the target is visually emphasized.

No wrapper or selector setup required, just pick the mode and, if using “Scroll to element”, add the class/ID to the element you want to jump to.

How Partial Refresh Stays Accurate

With partial refresh, BricksMembers asks the server for the current state each time it re-renders. It doesn’t blindly force “unlocked” or “completed” on the client. The server evaluates all conditions (drip, access, progress) and returns the correct HTML. Security and logic stay on the server where they belong.

Common Mistakes and Troubleshooting

• Wrapper does not update — Confirm the trigger (After Progress Change or After Drip Unlock) is not “Do nothing”. Confirm the CSS Selector matches your wrapper exactly (e.g. .drip-refresh vs drip-refresh—the dot matters for classes). Confirm the Bricks Element IDs are correct and in the right order. Check the browser console for JavaScript errors.
• Nothing to refresh — Make sure you have wrapper(s) with content that changes based on conditions. For drip, use Bricks conditions (Drip → is Locked / is Unlocked). For general progress, use progress-related conditions.
• Scroll or highlight not working — Confirm Scroll to Element or Highlight Element is enabled. Check that the AJAX refresh completed successfully (wrapper content updated). Scroll and highlight apply to the first refreshed element when multiple selectors are configured.
• Full reload instead of partial — Partial refresh only runs when the mode is “Update matched wrappers (AJAX)” and the script finds wrappers matching your selector. If the selector is wrong or the wrapper is missing, it may fall back to a full reload or do nothing.
• Drip unlock not refreshing — For After Drip Unlock, the refresh only fires when completing actually unlocks drip content. If no drip content unlocks (e.g. the next lesson was already unlocked), the drip handler won’t run. Use After Progress Change if you want a refresh on every completion regardless of drip.

Summary

Partial page refresh turns a clunky “refresh to see the update” moment into a smooth one. Choose After Progress Change for any completion, or After Drip Unlock when completing unlocks drip content. Use partial refresh for an app-like feel, or full refresh for simplicity. Either way, learners get immediate feedback—and that keeps them engaged.