jQuery(document).ready(function($) {
var message, container, messageBox, deleteInput, deleteMsgs, buttons, confirm, cancel, lineBreak;
container = document.createElement( 'div' );
messageBox = document.createElement( 'p' );
deleteInput = document.createElement( 'input' );
deleteInput.type = 'text';
deleteInput.id = 'confirmDeleteInput';
buttons = document.createElement( 'div' );
buttons.style.marginTop = '10px';
buttons.style.backgroundColor = '#f4f5f6';
confirm = document.createElement( 'div' );
confirm.style.padding = '8px';
confirm.style.cursor = 'default';
confirm.style.backgroundColor = '#d9534f';
confirm.style.borderColor = '#d9534f';
confirm.style.fontSize = '14pt';
confirm.style.fontWeight = 'bold';
confirm.style.color = '#ffffff';
confirm.style.borderRadius = '4px';
cancel = document.createElement( 'div' );
cancel.style.padding = '8px';
cancel.style.cursor = 'default';
cancel.style.backgroundColor = '#5bc0de';
cancel.style.borderColor = '#5bc0de';
cancel.style.fontSize = '14pt';
cancel.style.fontWeight = 'bold';
cancel.style.color = '#ffffff';
cancel.style.borderRadius = '4px';
lineBreak = document.createElement( 'br' );
container.classList.add( 'message' );
messageBox.innerHTML += 'This will DELETE all forms, form submissions,' +
' and deactivate Ninja Forms';
messageBox.appendChild( lineBreak );
messageBox.innerHTML += '<br>Type <span style="color:red;">DELETE</span>' +
container.appendChild( messageBox );
container.appendChild( deleteInput );
container.appendChild( lineBreak );
deleteMsgs = document.createElement( 'div' );
deleteMsgs.id = 'progressMsg';
deleteMsgs.style.display = 'none';
deleteMsgs.style.color = 'red';
container.appendChild( deleteMsgs );
confirm.innerHTML = 'Delete';
confirm.classList.add( 'confirm', 'nf-button', 'primary' );
confirm.style.float = 'left';
cancel.innerHTML = 'Cancel';
cancel.classList.add( 'cancel', 'nf-button', 'secondary', 'cancel-delete-all' );
cancel.style.float = 'right';
buttons.appendChild( confirm );
buttons.appendChild( cancel );
buttons.classList.add( 'buttons' );
container.appendChild( buttons );
message = document.createElement( 'div' );
message.appendChild( container );
var downgradeContainer, downgradeTitle, downgradeWarning, downgradeCTA, downgradeInput;
downgradeInput = document.createElement( 'input' );
downgradeInput.setAttribute( 'type', 'text' );
downgradeInput.id = 'downgradeConfirmInput';
downgradeInput.style.marginBottom = '15px';
downgradeInput.style.padding = '7px';
downgradeInput.style.border = '1px solid #D3D3D3';
downgradeInput.style.width = '100%';
downgradeInput.style.height = '3em';
downgradeCTA = document.createElement( 'p' );
downgradeCTA.innerHTML = nfAdmin.i18n.downgradeConfirmMessage;
downgradeWarning = document.createElement( 'p' );
downgradeWarning.innerHTML = nfAdmin.i18n.downgradeWarningMessage;
downgradeWarning.style.color = 'red';
downgradeTitle = document.createElement( 'h3' );
downgradeTitle.innerHTML = nfAdmin.i18n.downgradeMessage;
downgradeContainer = document.createElement( 'div' );
downgradeContainer.appendChild( downgradeTitle );
downgradeContainer.appendChild( downgradeWarning );
downgradeContainer.appendChild( downgradeCTA );
downgradeContainer.appendChild( downgradeInput );
// set up delete model with all the elements created above
deleteAllDataModal = new jBox( 'Modal', {
addClass: 'dashboard-modal',
deleteAllDataModal.setContent( message.innerHTML );
deleteAllDataModal.setTitle( 'Delete All Ninja Forms Data?' );
// add event listener for cancel button
var btnCancel = deleteAllDataModal.container[0].getElementsByClassName('cancel')[0];
btnCancel.addEventListener('click', function() {
deleteAllDataModal.close();
var doAllDataDeletions = function( formIndex ) {
// Gives the user confidence things are happening
$( '#progressMsg' ).html( 'Deleting submissions for '
+ nfAdmin.forms[ formIndex ].title + "" + ' ( ID: '
+ nfAdmin.forms[ formIndex ].id + ' )' );
$( '#progressMsg').show();
// notify php this is the last one so it delete data and deactivate NF
if( formIndex === nfAdmin.forms.length - 1 ) {
// do this deletion thang
'action': 'nf_delete_all_data',
'form': nfAdmin.forms[ formIndex ].id,
'security': nfAdmin.nonce,
).then (function( response ) {
formIndex = formIndex + 1;
response = JSON.parse( response );
if(response.data.hasOwnProperty('errors')) {
var errors = response.data.errors;
if (Array.isArray(errors)) {
errors.forEach(function(error) {
console.log('Delete All Data Errors: ', errors);
// we expect success and then move to the next form
if( response.data.success ) {
if( formIndex < nfAdmin.forms.length ) {
doAllDataDeletions( formIndex )
// if we're finished deleting data then redirect to plugins
if( response.data.plugin_url ) {
window.location = response.data.plugin_url;
} ).fail( function( xhr, status, error ) {
// writes error messages to console to help us debug
console.log( xhr.status + ' ' + error + '\r\n' +
'There was an error deleting submissions for '
+ nfAdmin.forms[ formIndex ].title );
// Add event listener for delete button
var btnDelete = deleteAllDataModal.container[0].getElementsByClassName('confirm')[0];
btnDelete.addEventListener('click', function() {
var confirmVal = $('#confirmDeleteInput').val();
// Gotta type DELETE to play
if ('DELETE' === confirmVal) {
this.style.backgroundColor = '#9f9f9f';
this.style.borderColor = '#3f3f3f';
var cancelBtn = $( '.cancel-delete-all' );
cancelBtn.css( 'backgroundColor', '#9f9f9f' );
cancelBtn.css( 'borderColor', '#3f3f3f');
// this is the first one, so we'll start with index 0
deleteAllDataModal.close();
$( '.js-delete-saved-field' ).click( function(){
'action': 'nf_delete_saved_field',
id: $( that ).data( 'id' )
'security': nfAdmin.nonce
$.post( nfAdmin.ajax_url, data )
.done( function( response ) {
$( that ).closest( 'tr').fadeOut().remove();
// Start building our downgrade model.
jQuery( '#nfDowngrade' ).click( function( e ) {
class: 'nfDowngradeModal',
// TODO: Maybe this should be build using DOM node construction?
content: downgradeContainer.innerHTML,
text: nfAdmin.i18n.downgradeButtonPrimary,
class: 'nfDowngradeButtonPrimary',
callback: function( e ) {
// If our "Downgrade" button does not have have an attribute of disabled...
if( 'disabled' !== $('.nfDowngradeButtonPrimary').prop( 'disabled' ) ){
var url = window.location.href;
// ...split the url based on the question mark from the query string...
// build the downgrade url and redirect the user.
url[0] = url[0] + '?page=ninja-forms&nf-switcher=rollback&security=' + nfAdmin.nonce;
window.location.replace( url[0] );
text: nfAdmin.i18n.downgradeButtonSecondary,
class: 'nfDowngradeButtonSecondary',
callback: function( e ) {
// Close the modal if this button is clicked.
downgradeModel.toggleModal( false );
var downgradeModel = new NinjaModal( data );
// Style and add the disabled tag by default.
$('.nfDowngradeButtonPrimary').css( 'background', '#ccc' );
$('.nfDowngradeButtonPrimary').css( 'border', '#ccc 1px solid' );
$('.nfDowngradeButtonPrimary').prop( 'disabled', 'disabled' );
// Listen to our input and...
$('#downgradeConfirmInput').on( 'keyup', function(){
// ...if DOWNGRADE is typed then...
if( 'DOWNGRADE' == $('#downgradeConfirmInput').val() ) {
// ...apply our blue styling to button and remove disabled attribute.
$('.nfDowngradeButtonPrimary').css( 'background', '#1EA9EA' );
$('.nfDowngradeButtonPrimary').css( 'border', '#1EA9EA 1px solid' );
$('.nfDowngradeButtonPrimary').prop( 'disabled','' );
// ...if DOWNGRADE is not typed then...
if( 'DOWNGRADE' !== $('#downgradeConfirmInput').val() ) {
// ...set styling back to default and reapply the disabled prop.
$('.nfDowngradeButtonPrimary').css( 'background', '#ccc' );
$('.nfDowngradeButtonPrimary').css( 'border', '#ccc 1px solid' );
$('.nfDowngradeButtonPrimary').prop( 'disabled', 'disabled' );
$( document ).on( 'click', '#delete_on_uninstall', function( e ) {
deleteAllDataModal.open();
$( document ).on( 'click', '.nf-delete-on-uninstall-yes', function( e ) {
$( "#delete_on_uninstall" ).attr( 'checked', true );
// If we're allowed to track site data...
if ( '1' == nfAdmin.allow_telemetry ) {
// Show the optout button.
$( '#nfTelOptin' ).addClass( 'hidden' );
$( '#nfTelOptout' ).removeClass( 'hidden' );
// Show the optin button.
$( '#nfTelOptout' ).addClass( 'hidden' );
$( '#nfTelOptin' ).removeClass( 'hidden' );
// If optin is clicked...
$( '#nfTelOptin' ).click( function( e ) {
$( '#nfTelOptin' ).addClass( 'hidden' );
$( '#nfTelSpinner' ).css( 'display', 'inline-block' );
// Hit AJAX endpoint and opt-in.
$.post( ajaxurl, { action: 'nf_optin', ninja_forms_opt_in: 1 },
$( '#nfTelOptout' ).removeClass( 'hidden' );
$( '#nfTelSpinner' ).css( 'display', 'none' );
// If optout is clicked...
$( '#nfTelOptout' ).click( function( e ) {
$( '#nfTelOptout' ).addClass( 'hidden' );
$( '#nfTelSpinner' ).css( 'display', 'inline-block' );
// Hit AJAX endpoint and opt-out.
$.post( ajaxurl, { action: 'nf_optin', ninja_forms_opt_in: 0 },
$( '#nfTelOptin' ).removeClass( 'hidden' );
$( '#nfTelSpinner' ).css( 'display', 'none' );
jQuery( '#nfTrashExpiredSubmissions' ).click( function( e ) {
content: '<p>' + nfAdmin.i18n.trashExpiredSubsMessage + '</p>',
btnPrimaryText: nfAdmin.i18n.trashExpiredSubsButtonPrimary,
btnSecondaryText: nfAdmin.i18n.trashExpiredSubsButtonSecondary,
batch_type: 'expired_submission_cleanup',
// extraData: [ 'test1', 'test2', 'test3' ]
new NinjaBatchProcessor( settings );
jQuery( '#nfRemoveMaintenanceMode' ).click( function( e ) {
jQuery( this ).addClass( 'disabled' ).attr( 'disabled', 'disabled' );
jQuery( '#nf_maintenanceModeProgress' ).html("<strong>Removing Maintenance Mode...</strong>" );
jQuery( '#nf_maintenanceModeProgress' ).fadeIn( 1 );
action: 'nf_remove_maintenance_mode',
security: nf_settings.nonce,
).then (function( response ) {
response = JSON.parse( response );
// if there are errors then, console it out
if( response.data.errors ) {
console.log( response.data.errors );
jQuery( that ).removeClass( 'disabled' ).removeAttr( 'disabled' );
jQuery( '#nf_maintenanceModeProgress' ).html("<strong>Done.</strong>" );
jQuery( '#nf_maintenanceModeProgress' ).fadeOut( 600 );
} ).fail( function( xhr, status, error ) {
// writes error messages to console to help us debug
console.log( xhr.status + ' ' + error + '\r\n' +
'There was an error resetting maintenance mode' );