Using CodeMirror editor causes code errors

cpaschen commented

2018-11-04 03:04:13 +00:00

(Migrated from github.com)

Steps to reproduce the issue

In JCB component configuration / Global tab set Select an editor to Editor - CodeMirror

Expected result

Able to edit code within JCB using the codemirror editor and save entered code

Actual result

When trying to save anything within JCB when code mirror is used get
Error
Invalid field: PHP getForm MethodTarget (array) $data values & (bool) $loadData & (object) $form & (int) $id (item id if found).
Invalid field: PHP postSaveHook MethodTarget (object) $model for the data model object and (array) $validData for the validated data.

Get similar errors in other areas. ANYWHERE that code is entered if you try to save you get similar errors.

You can't save anything if CodeMirror is the editor.

System information (as much as possible)

OS Name & Version: WAMP
MySql Version: 5.7.19
Apache Version: 2.4.27
PHP Version: 7.1.9
Joomla Version: 3.8.12
JCB Version: 2.9.7
Browser: Chrome/Firefox

Additional comments

Using TinyMCE (or none) for editors works fine.

Would be very helpful to be able to use CodeMirror (or some other editor designed for code entry)

### Steps to reproduce the issue In JCB component configuration / Global tab set Select an editor to Editor - CodeMirror ### Expected result Able to edit code within JCB using the codemirror editor and save entered code ### Actual result When trying to save anything within JCB when code mirror is used get Error Invalid field: PHP getForm MethodTarget (array) $data values & (bool) $loadData & (object) $form & (int) $id (item id if found). Invalid field: PHP postSaveHook MethodTarget (object) $model for the data model object and (array) $validData for the validated data. Get similar errors in other areas. ANYWHERE that code is entered if you try to save you get similar errors. You can't save anything if CodeMirror is the editor. ### System information (as much as possible) - OS Name & Version: WAMP - MySql Version: 5.7.19 - Apache Version: 2.4.27 - PHP Version: 7.1.9 - Joomla Version: 3.8.12 - JCB Version: 2.9.7 - Browser: Chrome/Firefox ### Additional comments Using TinyMCE (or none) for editors works fine. Would be very helpful to be able to use CodeMirror (or some other editor designed for code entry)

Llewellyn commented

2018-11-04 09:47:09 +00:00

Please read over this issue 305 as you will see this has been an issue from the start.

So it is a Joomla bug as far as I can see, if anyone knows more they are welcome to point it out to me. For now just use the none/editor as the default and you should be okay.

The reality is with none of the default fields do we do much more then setup the xml for the field in JCB. So Joomla does the work in its own classes of converting the xml to the HTML you see on the page. So since it has a save error, I would assume they are doing something wrong in the editor. Other HTML editors work, just the codeMirrior that is causing issues.

I am open for suggestions here, since I agree it would be nice to get this resolve.

Please read over this [issue 305](https://github.com/vdm-io/Joomla-Component-Builder/issues/305) as you will see this has been an issue from the start. So it is a Joomla bug as far as I can see, if anyone knows more they are welcome to point it out to me. For now just use the none/editor as the default and you should be okay. The reality is with none of the default fields do we do much more then setup the xml for the field in JCB. So Joomla does the work in its own classes of converting the xml to the HTML you see on the page. So since it has a save error, I would assume they are doing something wrong in the editor. Other HTML editors work, just the codeMirrior that is causing issues. I am open for suggestions here, since I agree it would be nice to get this resolve.

TLWebdesign commented

2019-01-29 14:56:03 +00:00

(Migrated from github.com)

Just to add to this problem info. I can't save the custom form fields. It always give error" Unaccaptable value". I don't know if it's related to this issue and don't want to create duplicates.

What i noticed is:

If field already has code in it. Saving is not a problem.
If field is empty it throws the errors as seen in the screenshot.

This is on Bitnami with Codemirror as editor.

Just to add to this problem info. I can't save the custom form fields. It always give error" Unaccaptable value". I don't know if it's related to this issue and don't want to create duplicates. ![schermafbeelding 2019-01-29 om 15 54 17](https://user-images.githubusercontent.com/4402824/51916720-2a3f1580-23de-11e9-8875-f9abb8c78e64.png) What i noticed is: - If field already has code in it. Saving is not a problem. - If field is empty it throws the errors as seen in the screenshot. This is on Bitnami with Codemirror as editor.

Llewellyn commented

2019-01-29 18:18:25 +00:00

Well that field is a required field, and that is the expected result. So if you add code to it, does it save?

Llewellyn commented

2019-01-29 18:23:15 +00:00

I honestly just gave up on this, momentarily.... The codemirror editor is just messing with the validation. Other editors for HTML no problem... but with codemirror I have not yet seen it work. But who knows some update may have fixed it. I have not tested it for a while now, so any feedback will help.

TLWebdesign commented

2019-01-29 18:59:49 +00:00

(Migrated from github.com)

As you can see in background there is code. "//" is in there. Any recommendations on alternative editors to use? because no syntax highlight is kind of a pain in the butt.

TLWebdesign commented

2019-01-29 19:20:43 +00:00

(Migrated from github.com)

Well that field is a required field, and that is the expected result. So if you add code to it, does it save?

There was code added. And this happens to all fields on custom buttons tab and the PHP tab. And probably more. The weird thing is. When the field contains already a value it works fine.

What i did now is disable code mirror from JCB settings. add two slashed in the fields i want to use. Then enable codemirror again and everything works fine from then on. Haven't been able to replicate this issue in default joomla components.

> Well that field is a required field, and that is the expected result. So if you add code to it, does it save? There was code added. And this happens to all fields on custom buttons tab and the PHP tab. And probably more. The weird thing is. When the field contains already a value it works fine. What i did now is disable code mirror from JCB settings. add two slashed in the fields i want to use. Then enable codemirror again and everything works fine from then on. Haven't been able to replicate this issue in default joomla components.

TLWebdesign commented

2019-01-29 19:21:41 +00:00

(Migrated from github.com)

btw it doesn't matter much but i just figured i mention it. Looking at the history of this issue i totally get you not wanting to investigate further 👍 Much more important things to do in a day 😄

Llewellyn commented

2019-01-30 00:48:41 +00:00

The validation is a simple JavaScript, and I am think if we improve it, we will have solved the problem.

Lets take the Site View as our focus on this script.

Joomla.submitbutton = function(task)
{
	if (task == ''){
		return false;
	} else { 
		var isValid=true;
		var action = task.split('.');
		if (action[1] != 'cancel' && action[1] != 'close'){
			var forms = $$('form.form-validate');
			for (var i=0;i<forms.length;i++){
				if (!document.formvalidator.isValid(forms[i])){
					isValid = false;
					break;
				}
			}
		}
		if (isValid){
			Joomla.submitform(task);
			return true;
		} else {
			alert(Joomla.JText._('site_view, some values are not acceptable.','Some values are unacceptable'));
			return false;
		}
	}
}

This is how Joomla's own component does the validation.

JFactory::getDocument()->addScriptDeclaration('
	Joomla.submitbutton = function(task)
	{
		if (task == "article.cancel" || document.formvalidator.isValid(document.getElementById("item-form")))
		{
			jQuery("#permissions-sliders select").attr("disabled", "disabled");
			' . $this->form->getField('articletext')->save() . '
			Joomla.submitform(task, document.getElementById("item-form"));
			// @deprecated 4.0  The following js is not needed since 3.7.0.
			if (task !== "article.apply")
			{
				window.parent.jQuery("#articleEdit' . (int) $this->item->id . 'Modal").modal("hide");
			}
		}
	};
');

As you will see they have this $this->form->getField('articletext')->save() which adds JavaScript from the editor on the page. So depending on the editor you get something like this:

WFEditor.getContent('jform_articletext');

But that is anyway after the document.formvalidator.isValid(document.getElementById("item-form")) so yes we can do some work on this, and I would really like to do this right.

It has worked (the current JCB JavaScript) for almost everything, but not for the codemirror, so if anyone knows how to code that JavaScript right, step up.

I am wondering if we should not also move the JavaScript to the edit view (like Joomla content component), and remove the js file completely. So Joomla content component has one editor on the page/view but with JCB you can have many... and this seems where the challenge comes in.

The validation is a simple JavaScript, and I am think if we improve it, we will have solved the problem. Lets take the **Site View** as our focus on [this script](https://github.com/vdm-io/Joomla-Component-Builder/blob/staging/admin/views/site_view/submitbutton.js). ```JavaScript Joomla.submitbutton = function(task) { if (task == ''){ return false; } else { var isValid=true; var action = task.split('.'); if (action[1] != 'cancel' && action[1] != 'close'){ var forms = $$('form.form-validate'); for (var i=0;i<forms.length;i++){ if (!document.formvalidator.isValid(forms[i])){ isValid = false; break; } } } if (isValid){ Joomla.submitform(task); return true; } else { alert(Joomla.JText._('site_view, some values are not acceptable.','Some values are unacceptable')); return false; } } } ``` [This is how Joomla's own component does the validation](https://github.com/joomla/joomla-cms/blob/3.10-dev/administrator/components/com_content/views/article/tmpl/edit.php#L36). ```php JFactory::getDocument()->addScriptDeclaration(' Joomla.submitbutton = function(task) { if (task == "article.cancel" || document.formvalidator.isValid(document.getElementById("item-form"))) { jQuery("#permissions-sliders select").attr("disabled", "disabled"); ' . $this->form->getField('articletext')->save() . ' Joomla.submitform(task, document.getElementById("item-form")); // @deprecated 4.0 The following js is not needed since 3.7.0. if (task !== "article.apply") { window.parent.jQuery("#articleEdit' . (int) $this->item->id . 'Modal").modal("hide"); } } }; '); ``` As you will see they have this `$this->form->getField('articletext')->save()` which adds JavaScript from the editor on the page. So depending on the editor you get something like this: ```JavaScript WFEditor.getContent('jform_articletext'); ``` But that is anyway after the `document.formvalidator.isValid(document.getElementById("item-form"))` so yes we can do some work on this, and I would really like to do this right. It has worked (the current JCB JavaScript) for almost everything, but not for the codemirror, so if anyone knows how to code that JavaScript right, step up. I am wondering if we should not also move the JavaScript to the edit view (like Joomla content component), and remove the js file completely. So Joomla content component has **one editor** on the page/view but with JCB you can have many... and this seems where the challenge comes in.

ro-ot commented

2019-01-30 11:38:44 +00:00

(Migrated from github.com)

Try this

Joomla.submitbutton = function(task)
{
	if (task == ''){
		return false;
	} else { 
		var action = task.split('.');
		if (action[1] == 'cancel' || action[1] == 'close' || document.formvalidator.isValid(document.getElementById("adminForm"))){
			Joomla.submitform(task, document.getElementById("adminForm"));
		} else {
			alert(Joomla.JText._('site_view, some values are not acceptable.','Some values are unacceptable'));
		}
	}
}

Try this ``` Joomla.submitbutton = function(task) { if (task == ''){ return false; } else { var action = task.split('.'); if (action[1] == 'cancel' || action[1] == 'close' || document.formvalidator.isValid(document.getElementById("adminForm"))){ Joomla.submitform(task, document.getElementById("adminForm")); } else { alert(Joomla.JText._('site_view, some values are not acceptable.','Some values are unacceptable')); } } } ```

Llewellyn commented

2019-01-30 13:08:11 +00:00

Okay I did, and the issue remains, but the code is better so I will anyway use it.

I see at this point that it could be the show-hide custom script. Since all field already open, meaning those who loading when the page loads they submit even if they have no values only server side complains not the JavaScript validation. So this seem to relate to the custom show-hide scripts of JCB, like some initialization is missing.

Okay I did, and the issue remains, but the code is better so I will anyway use it. I see at this point that it could be the show-hide custom script. Since all field already open, meaning those who loading when the page loads they submit even if they have no values only server side complains not the JavaScript validation. So this seem to relate to the custom show-hide scripts of JCB, like some initialization is missing.

Llewellyn commented

2019-01-30 13:18:58 +00:00

Just a side note, I tested it with other code editor called Rokpad and then all gets saved, but the validations get ignored only server side complains.

Just a side note, I tested it with other code editor called `Rokpad` and then all gets saved, but the validations get ignored only server side complains.

marcodings commented

2019-06-20 20:55:16 +00:00

(Migrated from github.com)

My "revised" 2ct.
Using the current staging, i'm able to modify and save both php and css editor fields.
The catch is that the fields already have to have data.

Trying to start and edit a "new/empty" field using codemirror fails on save.

As a workarround i change global editor to "none", then "create" the field by adding some dummy data and then saving. Next i revert back to "codemirror" to have the joy of syntax highlighting and continuing modification.

My "revised" 2ct. Using the current staging, i'm able to **modify** and save both _php_ and _css_ editor fields. The catch is that the fields already have to have data. Trying to start and edit a "new/empty" field using codemirror fails on save. As a workarround i change global editor to "none", then "create" the field by adding some dummy data and then saving. Next i revert back to "codemirror" to have the joy of syntax highlighting and continuing modification.

marcodings commented

2019-06-20 22:42:26 +00:00

(Migrated from github.com)

Looking into it a bit further (me and js ... its complicated)
a dirty, more convenient workaround.. on the adminpage with the field you want to start editing run do the following at your own risk

save the page !
now enable a php or css field, and enter some data in the corresponding textarea
run the following in console ( yes its far from surgical)

jQuery(document.getElementById("adminForm")).find('textarea').addClass("novalidate")

page should save fine, and with the reloading of the page all validation should be restored
next one can edit and save the codemirror field without problems

Note: For debugging purposses, the field can be rearmed by closing the edit option and saving the page

Looking into it a bit further (me and js ... its complicated) a **dirty**, more convenient workaround.. on the adminpage with the field you want to start editing run do the following **at your own risk** * save the page ! * now enable a ***php*** or ***css*** field, and enter some data in the corresponding textarea * run the following in console ( yes its far from surgical) ```js jQuery(document.getElementById("adminForm")).find('textarea').addClass("novalidate") ``` * page should save fine, and with the reloading of the page all validation should be restored * next one can edit and save the codemirror field without problems Note: For debugging purposses, the field can be rearmed by closing the edit option and saving the page

Llewellyn commented

2019-06-20 22:53:11 +00:00

I am wondering what can we do to just fix this issue. Are we the only project that has run into this issue? Then it must be that I am doing something wrong... and I am very willing to add what ever code is needed to fix this.

marcodings commented

2019-06-21 06:53:43 +00:00

(Migrated from github.com)

Looking into it a bit further (me and js ... its complicated)
a dirty, more convenient workaround.. on the adminpage with the field you want to start editing run do the following at your own risk

save the page !
now enable a php or css field, and enter some data in the corresponding textarea
run the following in console ( yes its far from surgical)

jQuery(document.getElementById("adminForm")).find('textarea').addClass("novalidate")

page should save fine, and with the reloading of the page all validation should be restored
next one can edit and save the codemirror field without problems

Note: For debugging purposses, the field can be rearmed by closing the edit option and saving the page

Looking into it a bit further (me and js ... its complicated) a **dirty**, more convenient workaround.. on the adminpage with the field you want to start editing run do the following **at your own risk** * save the page ! * now enable a ***php*** or ***css*** field, and enter some data in the corresponding textarea * run the following in console ( yes its far from surgical) ```js jQuery(document.getElementById("adminForm")).find('textarea').addClass("novalidate") ``` * page should save fine, and with the reloading of the page all validation should be restored * next one can edit and save the codemirror field without problems Note: For debugging purposses, the field can be rearmed by closing the edit option and saving the page

marcodings commented

2019-06-21 06:55:56 +00:00

(Migrated from github.com)

another better "workaround" might be to add some JS to the governing Y/N button to set the "novalidate" class on its textarea when the text area is "opened".

marcodings commented

2019-06-21 07:21:57 +00:00

(Migrated from github.com)

as for the workaround, you can also add a bookmark with the following location to you browser

javascript:( jQuery(document.getElementById("adminForm")).find('textarea').addClass("novalidate")  )();

I know its dirty, and i'll continue to look at the root cause, but for now it serves me

as for the workaround, you can also add a bookmark with the following **location** to you browser ```js javascript:( jQuery(document.getElementById("adminForm")).find('textarea').addClass("novalidate") )(); ``` ![image](https://user-images.githubusercontent.com/3484222/59905280-fe144780-9405-11e9-9506-796d4c396f3a.png) I know its dirty, and i'll continue to look at the root cause, but for now it serves me

marcodings commented

2019-06-21 08:18:26 +00:00

(Migrated from github.com)

Experimenting a bit with inspecting the objects of the text-area ( in my case field 55 in the administrator edit view ** Add CSS (views) * **.
jform_css_views_FAILSAVE.txt
jform_css_views_OK.txt

For best experience, use a diff viewer on the files

Initial observation that

in case of FAILSAVE, where i DID have text entered in the editor area it does not seem to be "saved" into the element
in case of FAILSAVE the field has a class "required", in case of OK there is NO class
FAILSAVE also has a class invalid after trying saving more than once
FAILSAVE has an empty innerHTML
strangely enough the entered text is nowhere in dump, but it remains in the "browser textarea"

Experimenting a bit with inspecting the objects of the text-area ( in my case field 55 in the administrator edit view ** Add CSS (views) * **. [jform_css_views_FAILSAVE.txt](https://github.com/vdm-io/Joomla-Component-Builder/files/3313521/jform_css_views_FAILSAVE.txt) [jform_css_views_OK.txt](https://github.com/vdm-io/Joomla-Component-Builder/files/3313522/jform_css_views_OK.txt) For best experience, use a diff viewer on the files Initial observation that * in case of FAILSAVE, where i DID have text entered in the editor area it does not seem to be "saved" into the element * in case of FAILSAVE the field has a class "required", in case of OK there is NO class * FAILSAVE also has a class **invalid** after trying saving more than once * FAILSAVE has an empty innerHTML strangely enough the **entered text** is nowhere in dump, but it remains in the "browser textarea"

Llewellyn commented

2020-12-08 22:53:45 +00:00

Far as I can tell this has been resolved, and was never a JCB issue, but a codeMirrorJoomla issue. So I will close this, if any feel it needs another look let me know.

Using CodeMirror editor causes code errors #353

Steps to reproduce the issue

Expected result

Actual result

System information (as much as possible)

Additional comments