Ajax Connector

Update backend meta fields in real time directly from the frontend with Interactor's Ajax Connector.

watch the Ajax Connector tutorial

Play Video

Interactor’s Ajax Connector will let you manipulate backend meta field values in real time using Interactor Triggers and Events.

If you’re working with ACF or JetEngine meta fields, the Ajax Connector is sure to revolutionize the way you work with the values contained within those meta fields. This is because this new and powerful feature will let you pair a special Interactor Event with any of your backend meta fields and have that event fire its operation using Interactor Triggers.

This means that we can manipulate and update backend meta field data using all of our favorite interactor Triggers, ranging from user interactions like click or double click, to more complex inputs like a specific element being inserted in the DOM. The moment the trigger fires, the meta fields will update, without needing to refresh the page.

We can even visualize the change immediately by using a Custom Field Dynamic Tag on any widget to fetch the updated values from our fields in real time.

Ajax Event

Once our triggers are set up, we are one step closer to unleashing the new Ajax Event. If you are not sure how Interactor Triggers work, refer to the Interactor Module Page and the Interactor Overview Video.  Having added a new item with the Event repeater, we can select Ajax from the Event drop down menu.

Let’s take a look at all the available options, in the order they appear within the event.

Operations.

There are four operations available in the Operation menu.

  • Callback Update

Callback Update is the operation you want to select if you want to manipulate the value in any widgets that are connected to the targeted meta field ID via the Custom Field Dynamic Tag. This Operation will work just like the Update Meta Field Operation, but won’t actually change the value in the backend meta fields. It will only use them to update the output of the widgets connected to it, according to the Callback Settings and the Parameters Settings.

  • Update Meta Field

Update Meta Field will update the value in the targeted backend meta field according to the Parameters Settings. Using the Callback Settings, this operation too can of course update any widget connected to the fields.

  • Increment

The Increment operation will add the numeric value specified in Parameters Settings to the targeted meta field. This is especially useful for counters or similar functions.

  • Decrement

The Decrement operation will subtract the numeric value specified in Parameters Settings to the targeted meta field. This means that if the numeric value is 1, for example, it will subtract 1. If we use -1, it will actually work like if we had incremented by 1.

Metafield ID

This is the setting field in which we want to paste our Meta Field ID. This is the field that will be updated or otherwise manipulated by the event, as soon as the conditions for firing it are met by the triggers.

Context.

This menu lets us specify which kind of meta field the targeted ID refers to.

We can target Post Meta, Taxonomy Meta, User Meta and even the Options Page contexts with the Ajax Event.

Callback Settings.

Toggling on Callback Update in the The Callback Settings will update the selected element in the DOM with the corresponding change determined by the rest of the Event and Parameters settings.

If we’re using any operation other than Callback Update, we can also keep this option toggled off, if we have no need to update any Element when the meta field targeted by the Event gets updated.

It’s important to note that when using Callback Update on a widget, we want to first give the widget an HTML tag, and target the tag as well in the Element Selector field, by typing the unique selector followed by the corresponding HTML tag. This is so that the styling options won’t get lost as soon as the value gets updated.

We can select between Text and HTML Callback Methods, depending on if we want plain text or otherwise.

Parameters Settings.

The Parameters Settings determine what value the meta field will be added, subtracted, or otherwise entirely substituted by in the meta field, according to the selected Operation.

We can add a manual parameter value, use a Dynamic Tag, or even fetch the value from a form field. If we choose that option, it’s important to remember that Elementor doesn’t actually identify its form fields by the ID we give them in their advanced tabs, but it will prepend #form-field- to the actual specified Field ID. You can learn more on this matter by watching the Interactor & The Inspection Tool and Fetching Form Field Values with Interactor Tutorials

Security notes.

One very important thing to note is that since the update meta field operation will update the meta field directly from the frontend, it’s heavily recommended to not connect it to critical or otherwise important meta fields, as each meta field connected using this operation will become available for modification to anybody with access to the page. However, for an added bit of security, we can use Interactor conditions.

For example we can allow only logged in users to carry out more sensitive Ajax Events, by selecting user logged in as a precondition to allow the trigger connected to the event to fire. Or we can even require the logged in user to be an administrator. We can connect as many triggers as we need to each and any Interactor Condition, so we won’t need to create more than one.

Scope : Extension
Dependencies: Elementor

Frequently Asked Questions

Interactor’s Ajax Connector is a tool designed to enable real-time manipulation of backend meta field values using Interactor Triggers and Events. It’s a valuable feature, particularly for ACF or JetEngine meta fields. By combining Interactor Events with backend meta fields, you can seamlessly update data without requiring a page refresh, making content management more dynamic and efficient.
Within the Ajax Connector’s Event menu, you’ll find four primary operations: Callback Update: This operation allows for visual adjustments to the values of widgets connected to a specific meta field ID without affecting the backend data. Update Meta Field: It directly alters the value in the targeted backend meta field based on specified parameters. Moreover, it can update widgets linked to those fields using the Callback Settings. Increment: Handy for adding numeric values to a meta field, often used for creating counters or similar functions. Decrement: The Decrement operation subtracts a specified numeric value from the targeted meta field, offering flexibility in managing numeric data.
When using the Ajax Connector for meta field updates, enhancing security is crucial. To achieve this: Avoid direct connections to critical or essential meta fields, as they might become accessible for modification by anyone with access to the page. Leverage Interactor conditions to control who can trigger Ajax Events. For instance, you can restrict access to logged-in users or require them to have administrator privileges before allowing an event to execute. By following these security measures, you can ensure responsible and secure data handling while using the Ajax Connector, preventing unauthorized access to critical information.

THIS FEATURE IS PART OF :

SAY HELLO TO YOUR NEW SUPER POWER

Update meta fields from the frontend without Writing code

AJAX

Our Counter is at :

145

increment or decrement a value of a meta field in the WP admin

Our field stores this value now

안녕하세요

change a meta field value

 from the user input

More Modules

Query Control
Zapier Connector for Interactor
OTP Form Action New
Custom Webhook Connector New
Taxonomy Terms Dynamic Tag
Slider Power New
Save Cookies Form Action New
Dynamic Nav Menu
ACF Relationship Tag
JetEngine Dynamic Visibility: LearnDash Addon
OpenAI Form Action New
Google Spreadsheet Tag
Checkout Anything Form Action
Time Span Dynamic Tag
Salesforce CRM Form Action
GTM DataLayer Connector New
Ajax Reload Prevention New
WooCommerce Advanced Dynamic Tags New
Interactor Engine
Signature Field