Originally all of the SLP settings forms had to be submitted by clicking a save button. This runs a typical form post + full page render… old-school web 1.X style.

Along the way work was done to utilize JavaScript triggers and save data with an onBlur on settings form fields. The tech uses jQuery using an AJAX-type model to send a single form field to the WordPress AJAX processor to manage saving a single field without re-rendering the entire page or sending the entire form.

How It Is Triggered

SLP base plugin’s admin.js initializes and hooks a change_option JS function to any INPUT type field with a quick_save CSS class attached.

    var qs_inputs = jQuery('.quick_save').find(':input');
    qs_inputs.on('change', function (e) {
      change_option(e.currentTarget);
    });
    qs_inputs.on('blur', function (e) {
      var start_val = e.currentTarget.defaultValue;
      if (e.currentTarget.value !== start_val) {
        change_option(e.currentTarget);
      }
    });

Data I/O

jQuery post is used to send data to the WordPress AJAX listener on the backend. In essence WordPress is serving the front end via rendered HTML + JavaScript and the backend via REST and AJAX listeners that are built into the core WordPress product. The Store Locator Plus® base plugin (plugins/store-locator-le) has WordPress hooks that listen for specific events coming in through the AJAX (or REST) listeners.

Here you can see the admin.js method that formats the data sent to the AJAX listener as well as the SLP function that eventually manages the change_option action coming down the WordPress AJAX pipeline.

The JavaScript POST needs to send the action (action), a security nonce (security), the name of the field (formdata[option_name]), and the new value (formdata[option_value]).

Nuances

UI Color Coding

The form inputs that are attached to the quick save trigger are colored red on the UI.

ID Attribute Required On Dom

The ID attribute MUST be present on any option that uses quick save. This is managed via the SLP base plugin settings module and should already be present on all fields.

wp_data Variable Required in JS

wp_data JavaScript variable required, must be “localized” when script is enqueued.

Pixabay Image: https://pixabay.com/vectors/car-lamborghini-realistic-sports-2158284/

Leave a Reply