Refresh the page after updating a field value in Formidable forms
Formidable Forms provides an easy way to update a field value with a click on a link. However one of its shortcomings is, if the value being updated by the link is visible on the page, it is not updated to its new value as shown below.
In this post, we are going to fix it by introducing a custom shortcode which utilizes existing Formidable code where possible and enhance it where it is required.
Step 1:
Create a new shortcode frm_city_entry_update_field which replaces the Formidable Javascript function frmUpdateField in the link with a modified function frmCityUpdateField. Add this to functions.php or use Code Snippets plugins which is our preferred method for adding custom scripts.
add_shortcode('frm-city-entry-update-field', 'frm_city_entry_update_field');
function frm_city_entry_update_field( $atts ) {
//Call Formidable forms function which is used by original shortcode
$link = FrmProEntriesController::entry_update_field($atts);
//Inject enhanced version of Javascript code which supports page refresh and confirmation message options.
if(!empty($link)) {
preg_match('/(?<=frmUpdateField)\([^\)]*\)/', $link, $matches);
if($atts['confirmation_msg']){
$confirm_script = "onclick=\"if(confirm('" . $atts['confirmation_msg'] . "')){frmCityUpdateField" . $matches[0] . ";}return false;\"";
} else {
$confirm_script = "onclick=\"frmCityUpdateField" . $matches[0] . "; return false;\"";
}
$link = preg_replace('/onclick=\"[^\"]*\"/', $confirm_script, $link);
}
return $link;
}Step 2:frmCityUpdateField Javascript function is identical to frmUpdateField function except it refreshes the page upon successfully updating the field. Here we used Code Snippet plugin to inject Javascript code. If you use a different approach, you may have to copy only the Javascript part which starts with <script> and end with </script>
add_action( 'wp_head', function () { ?>
<script>
function frmCityUpdateField(entry_id, field_id, value, message, num) {
jQuery(document.getElementById("frm_update_field_" + entry_id + "_" + field_id + "_" + num)).html('<span class="frm-loading-img"></span>');
jQuery.ajax({
type: "POST",
url: frm_js.ajax_url,
data: {
action: "frm_entries_update_field_ajax",
entry_id: entry_id,
field_id: field_id,
value: value,
nonce: frm_js.nonce
},
success: function() {
if (message.replace(/^\s+|\s+$/g, "") === "")
jQuery(document.getElementById("frm_update_field_" + entry_id + "_" + field_id + "_" + num)).fadeOut("slow");
else
jQuery(document.getElementById("frm_update_field_" + entry_id + "_" + field_id + "_" + num)).replaceWith(message);
location.reload();
}
})
}
</script>
<?php } );Step 3:
Use the new shortcode frm-city-entry-update-field in place of frm-entry-update-field shortcode. All attributes of the shortcode will work as usual.
e.g. [frm-city-entry-update-field id=[id] field_id=205 value="Open" label="Open this venue"]
Bonus:
As an added bonus, frm-city-entry-update-field provides an optional confirmation_msg attribute to which prompts the user to confirm before updating the field value.
e.g.
[frm-city-entry-update-field id=[id] field_id=205 value="Open" label="Open this venue" confirmation_msg="Are you sure want to Open this Venue?"]
