No-code AJAX-like loading in Breakdance

In this post we’re going to cover how we code create AJAX like post loading in popup without writing code for AJAX.

What is AJAX?

AJAX (Asynchronous JavaScript and XML) is a web development technique used to create interactive and dynamic web applications. It allows web pages to update content asynchronously by exchanging small amounts of data with the server in the background, without requiring a full page reload.

Here’s a breakdown of how AJAX works:

1. Asynchronous: AJAX allows parts of a web page to be updated asynchronously, meaning the user can interact with the web page while the browser is sending or receiving data from the server.
2. JavaScript: JavaScript is used to handle the request to the server and process the response.
3. XML (or JSON): Originally, XML (Extensible Markup Language) was used to structure the data being exchanged, but today, JSON (JavaScript Object Notation) is more commonly used due to its simplicity and ease of use in JavaScript.

How AJAX Works:

• A JavaScript function (typically via XMLHttpRequest or newer fetch API) sends a request to the server.
• The server processes the request (often through backend logic, like PHP, Python, or Node.js).
• The server sends a response (usually in the form of JSON or XML).
• JavaScript processes the server response and updates specific parts of the web page dynamically, without refreshing the entire page.

Benefits:

• Better User Experience: By updating parts of a web page without reloading the entire page, AJAX improves speed and user interactivity.
• Reduced Server Load: Only necessary data is exchanged, rather than reloading the entire page.

Cons:

• You need to write PHP code for handling AJAX
• You will lose page builder styling options
• You need to write JS code which will send AJAX request
• You will need to know how protect AJAX calls

Iframe and Breakdance templates to solve problem

What is an <iframe>?

An <iframe> (inline frame) is an HTML element that allows embedding an entire HTML document (or web page) within another web page. The content inside the iframe is treated as a separate document, and can be loaded independently.

Key Differences Between <iframe> and AJAX:

Why iframe approach this better for page builders?

Mostly users of the page builder are no-code or low-code persons and they are not full stack developers. To handle AJAX properly you need full stack skills to make backend and frontend functionality. That is often too much for design oriented page builder users.

Also, above parts are much harder and time consuming to do than to make conditions and templates with page builder. Conditions and Templates could be done in matter of minutes, and AJAX could eat up whole day to implement, style and test.

Breakdance Conditions and Templates to rescue

With combination of Conditions and Templates within Breakdance we could solve make iframe to execute almost all benefits of the AJAX approach, reduce time to implement, and neglects cons of iframe method.

Core principle

We are using URL parameter to differentiate when post should be loaded as regular or as iframe.

Problem 1: Iframe loads header and footer

When loading post AJAX-like we don’t want to have header and footer because they are already present on main page and that looks ugly. Luckly to get rid of them is really easy, we need to create two special templates.

Header and footer templates

Make header template, with blank content. So to hide header we are just loading empty template instead of regular one.

Use following settings for header templates:

Repeat the same for footer template.

Logical idea behind this is that every time this URL parameter is present, we’ll place blank header and footer and remove them in this fashion from iframe.

Condition is here in place because without it we would have whole site without header and footer templates which we surly don’t want.

Problem 2: You may want design crafted for this preview just

In order to to have

*Note1 – if you apply everywhere it will use that template, but unlike header and footer you may want it to apply only to post, or one CPT or something like that. This would give you flexibility to make variation for each.

Performance and cache things

If your cache plugin supports adding cache keys, you could define loadoveriframe URL parameter as key so cache would cache that version also and they would not collide with regular post template. And force cache when this parameter is present.

Most of the cache plugins should skip cache when URL parameter is present. And by default regular post template will be cached and special won’t. But all of this will depend on your cache system.

Usage examples

We’ve reinvented this approach to enable our users to ship AJAX-like interface in matter of minutes and that they would have fully flexibility over design without need to write almost any code.

Component: Dynamic Lightbox

We are using this approach for Dynamic Lightbox component. This component aims to load post

• Component
• Component docs