The Problem

These instructions relate to Mosets Tree 3.5.8

When I used the category changer with the WYSIWYG enabled on the description field, the WYSIWYG content would get removed and the Save/Save and Close/Cancel buttons would no longer work.

My Original Thoughts

These might not be the cause or a working solution to solve the problem permanetly and leave mosets tree functioning 100%.

Cause

• when the fields are refresh via jQuery after clicking the update button the WYSIWYG editor is re-intialised when the fields are re-written. The previous instance of the WYSIWYG is still active so what happens is a second instance of the WYSIWYGis initialised causing errors on page and primarily causes the wysiwyg not to work, probably because of a conflict. Not verified this.
• therefore this is definately caused by the WYSIWYG being triggered twice and then the resulting conflict rather than the DOM refresh persay.

Solution

• the solution is simple, you need to terminate the previous wysiwyg via jquery/javascript before wiping and then reloading the fields. This prevents conflicts and when the new intialisation command (wherever it is) for the wysiwyg is fired only 1 instance of the editor is then active on the page allowing it to work correctly.
• it should be noted when you terminate the wysiwyg any alterations that have been made by the editor have been effectively saved in the changes it has made to the DOM, the editor basically interprets what is there and when you makes changes it saves the code as needed to stay in the DOM.

Addendum

• The description is not mandatory so you could use a javascript check to see if the WYSIWYG is present in both the current and target category and if it is do not cycle this field

Communication with Mosets Tree

1 - My first Communication of the error on the Demo Site

There is a fault with your demo site.
I enabled wysiwyg for front and back end. i then edited a listing in the admin and changed its category. Once I changed the category and clicked update, the WYSIWYG content
disappears and a lot of stuff on the page stops working. I am using the latest version of firefox.

1 - Response from Mosets Tree

Thanks for your e-mail and feedback. This is indeed and known issue due to a limitation on Joomla's raw output the last time we checked. Because of this, we recommend our users to use non-wysiwyg editor (this is the default behaviour) or go directly to the category when you need to create a listing for it. We will keep an eye on this and provide a fix once that is possible.

Best regards,
CY Lee

2 - Issue raised with Mosets Tree with further information

All seems well until you change the category, the WYSIWYG content window is then emptied and the save/save and close/cancel buttons no longer function.

If you do not change the category the save/save and close/cancel buttons still work and the WYSIWYG content is preserved.

2 - Response from Mosets Tree

Thanks for the feedback. This is indeed a known issue to us when you have WYSIWYG editor and change category why editing your listing. It’s due to the fact that we use Joomla’s API to load the wysiwyg editor and there is no way to reactive it after a DOM refresh. We don’t have a solution for this now other than advising you to move the listing to another category before editing it - or don’t use wysiwyg editor if changing category during editing is a frequently used operation on your end.

We’re holding out for a more robust API from Joomla’s end so that we can resolve this. Sorry about the trouble Jon.

Best regards,

CY Lee

3 - An email with my research to help fix the issue

I have done some research into this issue and I don’t believe it is to do with the DOM refresh.

Using joomla 3.4.1

In category.js the error is related to the following code

	html = items.join('');

	jQuery('#mtfields div[id^="field_"]').remove();
	jQuery(html).appendTo('#mtfields');
	jQuery('#mtfields input, #mtfields select, #mtfields textarea').bind('change', function(event) {onChangeMTFieldsInput(event);});

I have messed around with the code briefly and got the wysiwyg to work. These commands occur after the DOM refresh (I think).

Please find attached my research which you might find useful and hopefully a quick fix.

3 - Response from Mosets Tree

That portion of codes are responsible of actually updated the list of fields with a new set of fields of the newly selected category. It doesn’t solve the issue itself but does work if your work case does not require updating the set of fields (i.e.: all your category uses the same set of fields and you only need to update your category).

Best regards,

CY Lee

 My Code Research

• The following is my research to try and fix this issue.
• All the following relate to the file:

example.com/media/com_mtree/js/category.js

with the following i changed the category.js and clicked update, and then save. i also used tinymce

html = items.join('');

jQuery('#mtfields div[id^="field_"]').remove();
jQuery(html).appendTo('#mtfields');
jQuery('#mtfields input, #mtfields select, #mtfields textarea').bind('change', function(event) {onChangeMTFieldsInput(event);});

I removed the above code and checked:

• category changer works
• save changes to categories
• joomla buttons work
• changes to the wysiwyg are saved

html = items.join('');

i removed the above code and:

• category changer works
• joomla buttons dont work
• all of the page below the selector disappears

jQuery('#mtfields div[id^="field_"]').remove();

I removed the above code and:

• category changer works
• save changes to categories
• joomla buttons work
• changes to the wysiswy do not get saved

jQuery(html).appendTo('#mtfields');

I removed the above code and:

• category changer works
• joomla buttons dont work
• all of the page below the selector disappears

jQuery('#mtfields input, #mtfields select, #mtfields textarea').bind('change', function(event) {onChangeMTFieldsInput(event);});

I removed the above code and:

• as soon as i hit update it wipes the wysiwyg
• changes are not saved
• category changer works
• joomla buttons do not work

Conclusion

Altering the following code allows you to use the WYSIWYG for the desctiption field and keep the save/save and close/cancel buttons to still work whilst creating records but does have the side effect that

That portion of codes are responsible of actually updated the list of fields with a new set of fields of the newly selected category. It doesn’t solve the issue itself but does work if your work case does not require updating the set of fields (i.e.: all your category uses the same set of fields and you only need to update your category).

Best regards,

CY Lee

The rought translation of the quote is that when you change category Mosets Tree will change the field list to match the new category, there might or might no be a change in the fields used. This code makes those changes. If like me you are using the same fields in all of your categories then removing this code will have not detrimental effect.

The Fix

Open the file

example.com/media/com_mtree/js/category.js

and find the code block

	html = items.join('');

	jQuery('#mtfields div[id^="field_"]').remove();
	jQuery(html).appendTo('#mtfields');
	jQuery('#mtfields input, #mtfields select, #mtfields textarea').bind('change', function(event) {onChangeMTFieldsInput(event);});
	});

and then REM the block out as follows

	/*html = items.join('');

	jQuery('#mtfields div[id^="field_"]').remove();
	jQuery(html).appendTo('#mtfields');
	jQuery('#mtfields input, #mtfields select, #mtfields textarea').bind('change', function(event) {onChangeMTFieldsInput(event);});*/
	});

I would now make sure Mosets Tree works as you expect before massive data entry.