Confirmation required on create or save product or service - v6.5.0

Every time on save (creating or editing) a product or a service, a confirmation (onbeforeunload) is required. Anyway, if "leave this page" choosen, save runs correctly.

It's not easy for me debug this, but I tried to fix it in my vtfei rep, p/s_save_alert_dialog branch

It isn't a clean fix and there, surely, exist a more "pure" fix

Hi Davide,

I tried reproducing the issue in v6.5.0, but its working fine for me. This issue is related to javascript. Try installing firebug in your Mozilla browser and try the same operation. It might helps you to catch the error.

Hi Satish, yes the problem is inside JS. You can get the issue, pop up dialog, modifying file

libraries/jquery/posabsolute-jQuery-Validation-Engine/js/jquery.validationEngine.js

at line 119

...
// If the form doesn't validate, clear the 'validating' class before the user has a chance to submit again
setTimeout(function(){
	element.removeClass('validating');
}, 100);
...

set setTimeout 2nd parameter to 300 (or more) and try again. The issue raises in these Vtiger points:

• Accounts: create or modify (on modify you have to change something before click Save button)
• Products: create or modify (on modify you have to change something before click Save button)
• Services: create or modify (on modify you have to change something before click Save button)
• Users: create

==================================================================================

OK now sit down and relax because I'll try to put steps here :D

Everyone of up above actions exec an Ajax post: Account to check duplicate, Products and Services for multiple currencies and Users to check if new user already exist

Vtiger JS code is correct, but setTimeout into jquery.validationEngine.js might raises this issue if form validation is with AppConnector.request

I start from bottom and I expose for Account module: about the others it is similar

Pop up dialog is showed because into (layouts/vlayout/modules/Vtiger/resources/Edit.js)

...
registerLeavePageWithoutSubmit : function(form){
	InitialFormData = form.serialize();
	window.onbeforeunload = function(e){
		if (InitialFormData != form.serialize() && form.data('submit') != "true") {
			return app.vtranslate("JS_CHANGES_WILL_BE_LOST");
		}
	};
},
...

form.data('submit') is undefined

Why is it undefined? Submit occours two times: first one by Save button click and the second one by javascript after Ajax post done

On every submit following js code is executed

...
registerSubmitEvent: function() {
	var editViewForm = this.getForm();
	
	editViewForm.submit(function(e){
		//Form should submit only once for multiple clicks also
		if(typeof editViewForm.data('submit') != "undefined") {
			return false;
		} else {
			var module = jQuery(e.currentTarget).find('[name="module"]').val();
			if(editViewForm.validationEngine('validate')) {
				//Once the form is submiting add data attribute to that form element
				editViewForm.data('submit', 'true');
				//on submit form trigger the recordPreSave event
				var recordPreSaveEvent = jQuery.Event(Vtiger_Edit_Js.recordPreSave);
				editViewForm.trigger(recordPreSaveEvent, {'value' : 'edit'});
				if(recordPreSaveEvent.isDefaultPrevented()) {
					//If duplicate record validation fails, form should submit again
					editViewForm.removeData('submit');
					e.preventDefault();
				}
			} else {
				//If validation fails, form should submit again
				editViewForm.removeData('submit');
				// to avoid hiding of error message under the fixed nav bar
				app.formAlignmentAfterValidation(editViewForm);
			}
		}
	});
},
...

on first submit:

editViewForm.validationEngine('validate') is true, so it adds data: editViewForm.data('submit', 'true') => correct

recordPreSaveEvent.isDefaultPrevented() is true because Ajax post, so it removes data: editViewForm.removeData('submit') => correct

Ajax post is running and as soon as it is done, it execs second submit

If Ajax post is faster than setTimeout time into

setTimeout(function(){
	element.removeClass('validating');
}, 100);

editViewForm.validationEngine('validate') fails

(libraries/jquery/posabsolute-jQuery-Validation-Engine/js/jquery.validationEngine.js at line 111)

if((element.is("form") || element.hasClass("validationEngineContainer")) && !element.hasClass('validating'))

it is false because 'validating' class is not removed still ... and onbeforeunload shows dialog

All depend on how much fast is Ajax post

At this point I don't know if the solution is to push down the time into setTimeout, but maybe. It needs to understand why there was put a setTimeout

Is there any one who is facing the same issue ?

I think yes. Oleg Tsoy into his issue #125 (closed) discovered problem before me, but fix resolves effect not the source problem

"double press Save button" was until 6.4.0 and that was into Account, Products, Services and Users (creating)

into vt6.4.0, try to set setTimeout 2nd parameter to 10 (into libraries/jquery/posabsolute-jQuery-Validation-Engine/js/jquery.validationEngine.js) and everything will work fine

"double press Save button" problem had been hidden "pop up dialog" problem

first click ran Ajax post and second click ran Save

mentioned in merge request !93 (merged)

Hi Davide,

You can try with my fix where I mentioned in !93 (merged)

Great Satish ... it's working fine ♦

without to alter validation plugin

if are there similar fixes to Accounts and Users ... those would be super great ;)

Hi Davide,

For Users, You can check the fix in same merge request. For Accounts, its not reproducible. You apply the same change in Accounts/Edit.js also.

mentioned in commit 4f3a8865

mentioned in commit 0288ce1d

mentioned in commit bf8ffa67

Yep it's working!!

Users creating OK

Accounts creating OK

Accounts save OK

Accounts creation confirmation on duplicate OK

into Accounts/Edit.js I put

   form.on(Vtiger_Edit_Js.recordPreSave, function(e, data) {
		var accountName = thisInstance.getAccountName(form);
		var recordId = thisInstance.getRecordId(form);
		var params = {};
        if(!(accountName in thisInstance.duplicateCheckCache)) {
            Vtiger_Helper_Js.checkDuplicateName({
                'accountName' : accountName, 
                'recordId' : recordId,
                'moduleName' : 'Accounts'
            }).then(
                function(data){
                    thisInstance.duplicateCheckCache[accountName] = data['success'];
                    InitialFormData = form.serialize(); // <<<<<<<<<<<<<======================= I put here
                    form.submit();
                },
                function(data, err){
                    thisInstance.duplicateCheckCache[accountName] = data['success'];
                    thisInstance.duplicateCheckCache['message'] = data['message'];
					var message = app.vtranslate('JS_DUPLICTAE_CREATION_CONFIRMATION');
					Vtiger_Helper_Js.showConfirmationBox({'message' : message}).then(
						function(e) {
							thisInstance.duplicateCheckCache[accountName] = false;
							form.submit();
						},
						function(error, err) {
							
						}
					);
                }
			);
        }
       
		else {
			if(thisInstance.duplicateCheckCache[accountName] == true){
				var message = app.vtranslate('JS_DUPLICTAE_CREATION_CONFIRMATION');
				Vtiger_Helper_Js.showConfirmationBox({'message' : message}).then(
					function(e) {
						thisInstance.duplicateCheckCache[accountName] = false;
						form.submit();
					},
					function(error, err) {
						
					}
				);
			} else {
				delete thisInstance.duplicateCheckCache[accountName];
				return true;
			}
		}
        e.preventDefault();
	})

I think you add the same line, before the line of "form.submit()" in same api

Yes you are right. I added just before all 3 form.submit()

Just done a fast test and everything work fine

Status changed to closed