admin.js – Store Locator Plus® Internal Docs

WordPress & JavaScript “Admin Edition”

Posted by lcleveland in Development, WordPress

WordPress does some odd things when it comes to managing the DOM elements, especially when it comes to JavaScript and CSS. WordPress has crafted their own creative PHP methodology for getting data from PHP into JavaScript when loading the scripts. This allows for JavaScript variables to be “pre-initialized” when the scripts are first rendered.

Useful for getting a known starting state in JavaScript based on PHP state and logic that has run up to the point that the scripts are loaded.

Not standard AT ALL given today’s single page app and other advanced methodologies just as REST queries, etc. that could do the same job.

SLP Settings : Quick Save

Posted by lcleveland in Development, Store Locator Plus®

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);
      }
    });