Detecting Changes in Subform Repeater Element

Introduction

This guide explains how to detect changes made inside a Subform Repeater Element using the Custom HTML element.

Get started

Prerequisites

The Subform Repeater Plugin is required to implement this functionality. The source code and plugin are available at GitHub: Subform Repeater Plugin.

Where to get the plugin

You can download the Subform Repeater Plugin from the Subform Repeater GitHub repository.

How to install

Download the plugin JAR file from the releases page.
Go to Settings > Manage Plugins > Upload Plugin.
Once uploaded, the plugin will be available in your Joget environment.

How to use it

Create Subform Form

The subform form consists of a hidden field as a Foreign Key to connect both Parent and Subform forms, elements depending on the use case, two Custom HTML elements to wrap the Subform Repeater in a container, and a script to detect changes.

Wrap the elements in a div class in the first Custom HTML element using the HTML code below.

<div class="link-container" style="padding-left:30%;"></div>

The second Custom HTML will handle any changes made in the original text and will create a new link based on the new text entered.

Below is the script used:

<script type="text/javascript">
 
$(document).ready(function() {
   // Use event delegation to ensure the event handler is attached only once
 
    // to the parent container of all the subform rows
 
    $(document).on('change', 'input[id$="_SR_url"]', function() {
 
        if (!this.changeHandled) {
 
            alert("URL Changed");
 
            createURL(this); // Pass the current element to the createURL function
 
            this.changeHandled = true; // Mark this change event as handled
        }
 
    });
 
    function createURL(inputElement) {
 
        var val = $(inputElement).val();
 
        var newVal = "<a href='" + val + "' target='_blank'>" + val + "</a>";
 
        // Locate the closest repeating section container for this URL field
 
        var $sectionContainer = $(inputElement).closest('.subform-section');
 
        // Within that container, find the link container (no longer using the ID)
 
        var $linkContainer = $sectionContainer.find('.link-container');
 
        // Update the HTML of the link container with the new link
 
        $linkContainer.html(newVal);
 
        // Reset the handled flag after a short delay
 
        setTimeout(function() {
 
            inputElement.changeHandled = false;
 
        }, 100);
    };
});
</script>
</script>

$(document).on('change', 'input[id$="_SR_url"]', function() will target any ID with the SR_url on its name; this has been done by looking up the URL ID using the inspect tool, as shown below: