Jquery Bootstrap TouchSpin plugin and update/reset of one option

Dynamically Updating jQuery Bootstrap TouchSpin Options

Learn how to update and reset options for the jQuery Bootstrap TouchSpin plugin after initialization, enhancing user interaction and form flexibility.

The jQuery Bootstrap TouchSpin plugin is a popular choice for creating numeric input fields with increment and decrement buttons. While its initial setup is straightforward, developers often face the challenge of dynamically updating or resetting its options after the plugin has been initialized. This article will guide you through the process of modifying TouchSpin options on the fly, providing practical examples and a clear understanding of the underlying mechanisms.

Understanding TouchSpin Options and Methods

The TouchSpin plugin provides a rich set of options to customize its behavior and appearance, such as min, max, step, prefix, postfix, and more. Once initialized, these options are typically static. However, the plugin exposes methods that allow for runtime manipulation. The key to updating options is using the option method, which can retrieve or set individual options, or even update multiple options at once.

flowchart TD
    A[Initialize TouchSpin] --> B{Need to Update Options?}
    B -- Yes --> C[Call `$(selector).trigger("touchspin.destroy")`]
    C --> D[Re-initialize with New Options]
    B -- No --> E[Continue Using TouchSpin]
    D --> E

Flowchart for updating TouchSpin options by re-initialization

While the above flowchart illustrates a common approach (destroy and re-initialize), the TouchSpin plugin also offers a more direct way to update options without destroying the instance, which is often more efficient for single option changes. This involves using the option method directly.

Updating a Single Option Dynamically

To change a single option, such as the max value or the step increment, you can use the option method with two arguments: the option name (as a string) and its new value. This is particularly useful when you need to react to user input or other dynamic conditions that affect the spin control's behavior.

$(document).ready(function() {
    $("#demo_vertical").TouchSpin({
        verticalbuttons: true,
        verticalupclass: 'glyphicon glyphicon-plus',
        verticaldownclass: 'glyphicon glyphicon-minus',
        min: 0,
        max: 100,
        step: 1
    });

    // Update the 'max' option dynamically
    $("#updateMaxButton").on("click", function() {
        var newMax = 200;
        $("#demo_vertical").trigger("touchspin.updatesettings", {max: newMax});
        console.log("Max value updated to: " + newMax);
    });

    // Update the 'step' option dynamically
    $("#updateStepButton").on("click", function() {
        var newStep = 5;
        $("#demo_vertical").trigger("touchspin.updatesettings", {step: newStep});
        console.log("Step value updated to: " + newStep);
    });
});

Example of updating individual TouchSpin options using touchspin.updatesettings

Resetting Options to Initial State

Sometimes, you might want to revert the TouchSpin control to its original configuration. The most straightforward way to achieve this is to destroy the current instance and then re-initialize it with the default or desired initial options. This ensures a clean slate, especially if multiple options have been changed over time.

$(document).ready(function() {
    var initialOptions = {
        verticalbuttons: true,
        verticalupclass: 'glyphicon glyphicon-plus',
        verticaldownclass: 'glyphicon glyphicon-minus',
        min: 0,
        max: 100,
        step: 1
    };

    $("#demo_vertical_reset").TouchSpin(initialOptions);

    // Reset button click handler
    $("#resetButton").on("click", function() {
        // Destroy the current instance
        $("#demo_vertical_reset").trigger("touchspin.destroy");
        
        // Re-initialize with initial options
        $("#demo_vertical_reset").TouchSpin(initialOptions);
        console.log("TouchSpin reset to initial options.");
    });
});

Destroying and re-initializing TouchSpin to reset options

1. Initialize TouchSpin

First, initialize your TouchSpin input with its default or desired initial options.

2. Prepare New Options

Define an object containing the new options you wish to apply. For example, {max: 200, step: 5}.

3. Trigger Update

Call $("#yourInputId").trigger("touchspin.updatesettings", newOptionsObject); to apply the changes.

4. Verify Changes

Test your input to ensure the new options are correctly applied and the spin control behaves as expected.