Placing a nextmatch in an edit form prevents regular form submit and field validation?

AlexS 2020-02-03 19:48:19 UTC #1

Hello Developers,
as already mentioned here Framework::refresh_opener, is it possible to refresh the parent pop up window instead of the main app window?, I placed a nextmatch widget on an edit Pop up. While the nextmatch widget is behaving correctly, I now noticed that I’ m not able to submit the edit form any more. Pressing on the save or apply button just does nothing at all… (no js error in the browser, nothing in the server log…)

After some trial and error a noticed that if I add the following

onclick="widget.getInstanceManager().submit(‘button[apply]’,false,true);

to the apply button, then the form submit works again when pressing apply button, but the form does not validate i.e. needed fields…

in the the code https://github.com/EGroupware/egroupware/blob/47c5a25841d17839c6261169272ddb0b3482cdf1/api/js/etemplate/etemplate2.js#L731 :

/**

Submit form via ajax

@param {(et2_button|string)} button button widget or string with id

@param {boolean|string} async true: do an asynchronious submit, string: spinner message (please wait…)

default is asynchronoush with message

@param {boolean} no_validation - Do not do individual widget validation, just submit their current values

@param {et2_widget|undefined} _container container to submit, default whole template

@return {boolean} true if submit was send, false if eg. validation stoped submit
*/
etemplate2.prototype.submit = function(button, async, no_validation, _container)
{

I read that setting the third parameter ( no_validation - Do not do individual widget validation, just submit their current values) to false should enable validation… so i tried:

onclick="widget.getInstanceManager().submit(‘button[apply]’,false,false);

But then again no submit takes place…!?

I hope you can help me on this !

Thank you in advance

Alex

RalfBecker 2020-02-04 16:41:39 UTC #2

Hi Alexander,

a submit iterates over all widgets in the template can calls submit on them:

github.com

EGroupware/egroupware/blob/master/api/js/etemplate/etemplate2.js#L748


	}
	var container = _container || this.widgetContainer;


	// Get the form values
	var values = this.getValues(container);


	// Trigger the submit event
	var canSubmit = true;
	if(!no_validation)
	{
		container.iterateOver(function(_widget) {
			if (_widget.submit(values) === false)
			{
				canSubmit = false;
			}
		}, this, et2_ISubmitListener);
	}


	if (canSubmit)
	{
		if (typeof async == 'undefined' || typeof async == 'string')

That submit method calls isValid() on input widgets, to check if their input validates:

github.com

EGroupware/egroupware/blob/master/api/js/etemplate/et2_core_inputWidget.js#L313


		return ok;
	},


	/**
	 * Called whenever the template gets submitted. We return false if the widget
	 * is not valid, which cancels the submission.
	 *
	 * @param _values contains the values which will be sent to the server.
	 * 	Listeners may change these values before they get submitted.
	 */
	submit: function(_values) {
		var messages = [];
		var valid = this.isValid(messages);


		// Passing false will clear any set messages
		this.set_validation_error(valid ? false : messages);
		return valid;
	}
});}).call(this);

I suspect that one of the nextmatch-headers return false for isValid and therefore stopping the submit.
I would debug the issue by setting a breakpoint in the set_validation_error method, to check which widgets calls it:

github.com

EGroupware/egroupware/blob/master/api/js/etemplate/et2_core_inputWidget.js#L231


		{
			if(_value && !this.options.readonly) {
				jQuery(node).attr("required", "required");
			} else {
				node.removeAttribute("required");
			}
		}


	},


	set_validation_error: function(_value) {
		var node = this.getInputNode();
		if (node)
		{
			if (_value === false)
			{
				this.hideMessage();
				jQuery(node).removeClass("invalid");
			}
			else
			{

For that (NM-header-)widget(s) we need to overwrite the isValid method to return true.

Ralf

AlexS 2020-02-06 08:26:49 UTC #3

Thank @RalfBecker,
with your tips I was able to find the problem:
The form could not be submitted because of several action_popup et2_templates in the et2_template of the nextmatch. The action_popup is hidden in the default view and only appears if you choose the respective action from the nextmatch action. In these templates I had some widgets with needed=“true”. These widgets have no values by default and because they where hidden I could not see the validation error… For now I removed the needed=“true” parameter in these widgets and can submit the form.
Thanks again and BR
Alex