Issue with Saving Template Data in Custom Gravity Forms Feed Add-On

Get Help
, , ,
1

Hello Community,

I’ve developed a custom add-on for Gravity Forms using the GFFeedAddOn framework.

The add-on allows users to save and load feed field mapping templates. While templates can be created and loaded successfully, there’s an issue when trying to save the form after loading a template. Clicking “Save Settings” or editing any of the loaded fields unexpectedly clears the input fields, losing the loaded template data.

This occurs even when the fields are visibly populated. I’ve tried various JavaScript hooks but haven’t found a solution.

Could you provide guidance on ensuring the template data remains intact and is saved correctly?

Here is a video demo to my problem as well.

https://screenrec.com/share/JnIe8pbsY1

Here is my JS file.

function applyTemplate(templateData) {
  // Clear all existing rows except the first one
  jQuery(".mapping-row").not(":first").remove();

  // Iterate over the template data
  templateData.forEach(function (mapping, index) {
    if (index === 0) {
      // Delay the population of the first row to ensure the DOM has been updated
      setTimeout(function () {
        updateField(
          "#_gform_setting_dynamicMapping_custom_key_0",
          mapping.key,
          index
        );
        updateField(
          "#_gform_setting_dynamicMapping_custom_value_0",
          mapping.value,
          index
        );
      }, 100); // Slight delay for the first row
    } else {
      // Add a new row for additional data
      jQuery(".add_field_choice").last().click();

      // Delay the population of the new row to ensure the DOM has been updated
      setTimeout(function () {
        updateField(
          "#_gform_setting_dynamicMapping_custom_key_" + index,
          mapping.key,
          index
        );
        updateField(
          "#_gform_setting_dynamicMapping_custom_value_" + index,
          mapping.value,
          index
        );
      }, 100 * index);
    }
  });
}

function updateField(selector, value) {
  var element = jQuery(selector);
  if (element.length) {
    // Setting the value
    element.val(value);

    // Manually updating the DOM element's value attribute
    element.attr("value", value);

    // Triggering the change event for Gravity Forms
    element.trigger("change");
  }
}

// Delegate event handling to the form container
jQuery("#gform-settings").on("change", "input, select, textarea", function () {
  console.log("Field changed:", this);
});

function loadTemplateData(templateId) {
  jQuery.ajax({
    url: ajaxurl,
    type: "POST",
    data: {
      action: "get_feed_field_mapping_template_data",
      templateId: templateId,
    },
    success: function (response) {
      if (response.success) {
        console.log("Template data:", response.data);
        applyTemplate(response.data);
      } else {
        console.log("Error: ", response.data);
        alert("Error loading template data");
      }
    },
    error: function () {
      alert("Error loading template data");
    },
  });
}

function showConfirmationModal() {
  if (confirm("Do you want to continue? Existing settings will be cleared.")) {
    var templateId = jQuery("#template").val();
    loadTemplateData(templateId);
  }
}

//
//
//
//
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.