Skip to content

Instantly share code, notes, and snippets.

@gicolek
Created June 3, 2015 21:50
Show Gist options
  • Save gicolek/ab33d50e77b869e62794 to your computer and use it in GitHub Desktop.
Save gicolek/ab33d50e77b869e62794 to your computer and use it in GitHub Desktop.
Gravity Forms dynamic reload
<script type="text/javascript">
// let's make call to the global gwrf variable visible after enabling Gravity Forms
window.gwrf;
(function ($) {
gwrf = function (args) {
// prototype arguments, created when we instantiate it
this.formId = args.formId;
this.spinnerUrl = args.spinnerUrl;
this.refreshTime = args.refreshTime;
this.refreshTimeout = null;
// form wrapper class followed by the form id
this.formWrapper = $('#gform_wrapper_' + this.formId);
this.staticElem = this.formWrapper.parent();
// we want to make sure that we'll have the cloned form html
this.formHtml = $('<div />').append(this.formWrapper.clone()).html();
this.spinnerInitialized = false;
this.init = function () {
var gwrf = this;
// this is Gravity Forms .js hook which we bind a function call to
// once the AJAX confirmation was loaded we'll trigger the function
$(document).bind('gform_confirmation_loaded', function (event, formId) {
// let's make sure we'll reload the right form
if (formId != gwrf.formId || gwrf.refreshTime <= 0)
return;
// let's reload the form after some time
gwrf.refreshTimeout = setTimeout(function () {
gwrf.reloadForm();
}, gwrf.refreshTime * 1000);
});
// let's make sure that the form will be closed only after the .closed-lightbox element was
// clicked on. This might be a button in the top right corner of our popup
$('.closed-lightbox').on('click', function (event) {
event.preventDefault();
gwrf.reloadForm();
});
};
// heart of our functionality
this.reloadForm = function () {
// let's check if the confirmation message has already been created
if (this.staticElem.find('.gform_confirmation_message_' + this.formId).length) {
if (this.refreshTimeout)
clearTimeout(this.refreshTimeout);
// let's look for the confirmation element and get the HTML of the parent form
this.staticElem.find('.gform_confirmation_message_' + this.formId)
.wrap('<div />').parent().html(this.formHtml);
// let's get rid of the HTML of the FORM
this.staticElem.find('#gform_wrapper_' + this.formId).unwrap();
// let's rerender the form
$(document).trigger('gform_post_render', [this.formId, 0]);
// if we had datepicker let's reinstantiate it
if (window['gformInitDatepicker'])
gformInitDatepicker();
}
};
// utility used to display the "spinner" loading image
this.initSpinner = function () {
var gwrf = this;
this.staticElem.on('submit', '#gform_' + this.formId, function () {
$('#gform_submit_button_' + gwrf.formId).attr('disabled', true).after('<' + 'img id=\"gform_ajax_spinner_' + gwrf.formId + '\" class=\"gform_ajax_spinner\" src=\"' + gwrf.spinnerUrl + '\" />');
gwrf.formWrapper.find('.gform_previous_button').attr('disabled', true);
gwrf.formWrapper.find('.gform_next_button').attr('disabled', true).after('<' + 'img id=\"gform_ajax_spinner_' + gwrf.formId + '\" class=\"gform_ajax_spinner\" src=\"' + gwrf.spinnerUrl + '\" alt=\"\" />');
});
};
this.init();
};
// if our document is ready we'll create a new form manually
jQuery(document).ready(function () {
new gwrf({"formId": {form_id}, "spinnerUrl": "{spinner_url}", "refreshTime": 0});
});
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment