The WYSIWYG TinyMCE editor was not working on my Ubercart 'product' type body field, though the editor was working for all other content types and even other Ubercart custom product types. This result was the same for all my themes as well. Also the problem was evident in my production SSL website, BUT NOT on my staging site with the exact same codebase / website.

The problem persisted whether advagg was on or off. However, the problem WENT AWAY when I turned off 'Drupal > Performance > Aggregate JavaScript files'.

QUESTION 1 ~ Does advadd js compression and aggregation still operate when 'Drupal > Performance > Aggregate JavaScript files' is turned off?

QUESTION 2 ~ If advadd js compression and aggregation does still operate, then is it a best practice to turn 'Drupal > Performance > Aggregate JavaScript files' off when using advagg in order to minimize confusion? Also when using advagg is it best to turn off 'Drupal > Performance > Aggregate and compress CSS files' ?

QUESTION 3 ~ Any insight into my particular symptoms?

I am using Drupal 7.56, Ubercart 7.x-3.10, Wysiwyg 7.x-2.4, WYSIWYG Filter 7.x-1.6-rc3, TinyMCE 3.5.6, and advagg 7.x-2.25.

I am also using jQuery update 7.x-2.7 with jQuery version set to 1.8 and the 'Alternate jQuery version for administrative pages' set to the Drupal default.

Thanks for any help.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

webservant316 created an issue. See original summary.

webservant316’s picture

Issue summary: View changes
webservant316’s picture

Also Firefox developer tools reported that the js was broken when 'Drupal > performance > Aggregate JavaScript files' was ON when trying to use WYSIWYG TinyMCE to edit the Ubercart 'product' type body field.

webservant316’s picture

Another Drupal user said...

Advagg has been known to cause problems if it's not able to preserve the original order of scripts when aggregating them. Would have to experiment a bit to figure out what the exact issue is in this case though. I thought advagg completely replaced the original aggregation method when enabled.

?

So I can show you the page via PM if needed to help understand this problem.

webservant316’s picture

cross posted at project/ubercart because I do not know which module is responsible for the problem, https://www.drupal.org/node/2896664.

mikeytown2’s picture

If you can reproduce the issue with AdvAgg disabled then it's most likely not the problem. I've seen issues like this with the admin menu module.

webservant316’s picture

@mikeytown2, yes the problem persists whether advagg is enabled or disabled.

The problem also persists whether admin_menu is enabled or disabled.

The only factor I can see thus far is whether the native Drupal Js aggregator flag is on or off. When the flag is on then javascript is broken and only makes the wysiwgy TinyMCE editor fail for the Ubercart default product type body field on only one of my production websites. The stage website works and all my other production websites running the same codebase.

@mikeytown2 could you answer the THREE questions in the original post, so I can at least understand how advagg interacts with the native Drupal js aggregation flag? Thanks.

mikeytown2’s picture

QUESTION 1 ~ Does advadd js compression and aggregation still operate when 'Drupal > Performance > Aggregate JavaScript files' is turned off?

It does not. You can view the source html and you'll see the individual files listed. If you turn it on you'll see the aggregated files.

QUESTION 2 ~ If advadd js compression and aggregation does still operate, then is it a best practice to turn 'Drupal > Performance > Aggregate JavaScript files' off when using advagg in order to minimize confusion? Also when using advagg is it best to turn off 'Drupal > Performance > Aggregate and compress CSS files' ?

Keep the core setting on otherwise you'll get individual files when you view the source HTML and thus the files will not be aggregated. Goes for CSS and JS.

QUESTION 3 ~ Any insight into my particular symptoms?

It's an issue with the way the module is coded. Admin Menu has various assumptions but then doesn't do anything to make sure it runs last. A recent commit I did moves the admin menu code into the footer as this fixes the problem; this issue shows up even with advagg disabled. This is an example of a problem module that rarely shows up as an issue but given the right combination of files in an aggregate it can cause an issue and throw a JS error.

Also Firefox developer tools reported that the js was broken when 'Drupal > performance > Aggregate JavaScript files' was ON when trying to use WYSIWYG TinyMCE to edit the Ubercart 'product' type body field.

This is the key to the problem. What was the exact error message? <-This is how we fix the bug.

Advagg has been known to cause problems if it's not able to preserve the original order of scripts when aggregating them. Would have to experiment a bit to figure out what the exact issue is in this case though.

AdvAgg preserve the original order of scripts. This is false information. If the order could be changed around AdvAgg could be a lot more efficient. If there is an example of this happening then its a bug and should be reported.

I thought advagg completely replaced the original aggregation method when enabled.

It is completely replaced. Less buggy than cores Aggregation as a result; if compared to no aggregation then no aggregation usually has the least amount of bugs as each file is isolated from each other; bugs usually being 3rd party JS code, not AdvAgg.

So I can show you the page via PM if needed to help understand this problem.

Please do! My contact form is a great way to do so https://www.drupal.org/user/282446/contact

webservant316’s picture

Thanks for the info. PM sent.

mikeytown2’s picture

Looking at the JS error and there is a syntax issue. After running js__tCfj8gFPwJJVtozsRS756tcZi2l3abH2gjjKo95tkxM__09kboI4ocUtq.js through http://jsbeautifier.org/ and pinpointing the fault (6:695 (line 6, 695 characters in)) this is the issue. The lone b is the start of the problems.

    };
})(jQuery);;
b
}\
L É Û 1 óôð) Jy‡ Óre w Ý;
(function($) {

Can you send me the example page again but with core JS aggregation turned off? This will allow me to find what source js file this bit of js code belongs to.

webservant316’s picture

PM sent with the example page and Drupal JS OFF.

Also @WimLeers I am using Cloudflare, BUT not using the CDN module and not using the Cloudflare module. Furthermore, the problem occurs even when I turn Cloudflare off as well.

mikeytown2’s picture

Version: 7.x-2.25 » 7.x-2.x-dev
Status: Active » Needs review
FileSize
1.79 KB

The problem is when tinymce-3.js and none.js are combined in that order. I can't reproduce this locally, but I created a patch that might work for you. What's the directory structure for those 2 files (where are they located on your setup)?

Please try the attached patch with advagg enabled and core js enabled. You'll have to clear the advagg files for this change to work most likely (go to admin/config/development/performance/advagg/operations#edit-advagg-flush-all-files and press the "Remove all generated files" button).

Test code I used (for me not you).

  module_load_include('inc', 'advagg', 'advagg.missing');
  $aggregate_settings = advagg_current_hooks_hash_array();
  $files = array(
    'testjs/tinymce-3.js' => array(),
    'testjs/none.js' => array(),
  );
  $GLOBALS['conf']['advagg_cache_level'] = 1;

  $output = advagg_get_js_aggregate_contents($files, $aggregate_settings);
  header('Content-Type: text/plain');
  print_r($output);
mikeytown2’s picture

Status: Needs review » Needs work

Patch causes syntax errors. Will work on a better one.

mikeytown2’s picture

Status: Needs work » Needs review
FileSize
1.9 KB
webservant316’s picture

>What's the directory structure for those 2 files (where are they located on your setup)?

Side by side in the same folder as follows:

\sites\all\modules\wysiwyg\editors\js\none.js
\sites\all\modules\wysiwyg\editors\js\tinymce-3.js

>Please try the attached patch with advagg enabled and core js enabled

I installed patch #15
Turned off Cloudflare
Avdagg operations > Removes all generated files
Edited the problem content type and same problem plus my admin_menu was gone
Actually no JS was operating on the page

I PMed you another zip of the page.

mikeytown2’s picture

Are you using a js minifier? If yes what one?

mikeytown2’s picture

The whole fitvids.js file got messed up big time in the aggregate. This seems like an UTF-8 encoding issue with the source js files.

/�*�g�l�o�b�a�l��j�Q�u�e�r�y��*�/�
�
�/�*�j�s�h�i�n�t� �m�u�l�t�i�s�t�r�:�t�r�u�e� �b�r�o�w�s�e�r�:�t�r�u�e� �*�/�
�
�/�*�!�
�
�*� �F�i�t�V�i�d�s� �1�.�0�
�
�*�
�
�*� �C�o�p�y�r�i�g�h�t� �2�0�1�3�,� �C�h�r�i�s� �C�o�y�i�e�r� �-� �h�t�t�p�:�/�/�c�s�s�-�t�r�i�c�k�s�.�c�o�m� �+� �D�a�v�e� �R�u�p�e�r�t� �-� �h�t�t�p�:�/�/�d�a�v�e�r�u�p�e�r�t�.�c�o�m�
�
�*� �C�r�e�d�i�t� �t�o� �T�h�i�e�r�r�y� �K�o�b�l�e�n�t�z� �-� �h�t�t�p�:�/�/�w�w�w�.�a�l�i�s�t�a�p�a�r�t�.�c�o�m�/�a�r�t�i�c�l�e�s�/�c�r�e�a�t�i�n�g�-�i�n�t�r�i�n�s�i�c�-�r�a�t�i�o�s�-�f�o�r�-�v�i�d�e�o�/�
�
�*� �R�e�l�e�a�s�e�d� �u�n�d�e�r� �t�h�e� �W�T�F�P�L� �l�i�c�e�n�s�e� �-� �h�t�t�p�:�/�/�s�a�m�.�z�o�y�.�o�r�g�/�w�t�f�p�l�/�
�
�*�
�
�*� �D�a�t�e�:� �T�h�u� �S�e�p�t� �0�1� �1�8�:�0�0�:�0�0� �2�0�1�1� �-�0�5�0�0�
�
�*�/�
�
�
�
�(�f�u�n�c�t�i�o�n�(� �$� �)�{�
�
�
�
� � �"�u�s�e� �s�t�r�i�c�t�"�;�
�
�
�
� � �$�.�f�n�.�f�i�t�V�i�d�s� �=� �f�u�n�c�t�i�o�n�(� �o�p�t�i�o�n�s� �)� �{�
�
� � � � �v�a�r� �s�e�t�t�i�n�g�s� �=� �{�
�
� � � � � � �c�u�s�t�o�m�S�e�l�e�c�t�o�r�:� �n�u�l�l�
�
� � � � �}�;�
�
�
�
� � � � �i�f�(�!�d�o�c�u�m�e�n�t�.�g�e�t�E�l�e�m�e�n�t�B�y�I�d�(�'�f�i�t�-�v�i�d�s�-�s�t�y�l�e�'�)�)� �{�
�
�
�
� � � � � � �v�a�r� �d�i�v� �=� �d�o�c�u�m�e�n�t�.�c�r�e�a�t�e�E�l�e�m�e�n�t�(�'�d�i�v�'�)�,�
�
� � � � � � � � � � �r�e�f� �=� �d�o�c�u�m�e�n�t�.�g�e�t�E�l�e�m�e�n�t�s�B�y�T�a�g�N�a�m�e�(�'�b�a�s�e�'�)�[�0�]� �|�|� �d�o�c�u�m�e�n�t�.�g�e�t�E�l�e�m�e�n�t�s�B�y�T�a�g�N�a�m�e�(�'�s�c�r�i�p�t�'�)�[�0�]�,�
�
� � � � � � � � � � �c�s�s�S�t�y�l�e�s� �=� �'�&�s�h�y�;�<�s�t�y�l�e�>�.�f�l�u�i�d�-�w�i�d�t�h�-�v�i�d�e�o�-�w�r�a�p�p�e�r�{�w�i�d�t�h�:�1�0�0�%�;�p�o�s�i�t�i�o�n�:�r�e�l�a�t�i�v�e�;�p�a�d�d�i�n�g�:�0�;�}�.�f�l�u�i�d�-�w�i�d�t�h�-�v�i�d�e�o�-�w�r�a�p�p�e�r� �i�f�r�a�m�e�,�.�f�l�u�i�d�-�w�i�d�t�h�-�v�i�d�e�o�-�w�r�a�p�p�e�r� �o�b�j�e�c�t�,�.�f�l�u�i�d�-�w�i�d�t�h�-�v�i�d�e�o�-�w�r�a�p�p�e�r� �e�m�b�e�d� �{�p�o�s�i�t�i�o�n�:�a�b�s�o�l�u�t�e�;�t�o�p�:�0�;�l�e�f�t�:�0�;�w�i�d�t�h�:�1�0�0�%�;�h�e�i�g�h�t�:�1�0�0�%�;�}�<�/�s�t�y�l�e�>�'�;�
�
�
�
� � � � � � �d�i�v�.�c�l�a�s�s�N�a�m�e� �=� �'�f�i�t�-�v�i�d�s�-�s�t�y�l�e�'�;�
�
� � � � � � �d�i�v�.�i�d� �=� �'�f�i�t�-�v�i�d�s�-�s�t�y�l�e�'�;�
�
� � � � � � �d�i�v�.�s�t�y�l�e�.�d�i�s�p�l�a�y� �=� �'�n�o�n�e�'�;�
�
� � � � � � �d�i�v�.�i�n�n�e�r�H�T�M�L� �=� �c�s�s�S�t�y�l�e�s�;�
�
�
�
� � � � � � �r�e�f�.�p�a�r�e�n�t�N�o�d�e�.�i�n�s�e�r�t�B�e�f�o�r�e�(�d�i�v�,�r�e�f�)�;�
�
�
�
� � � � �}�
�
�
�
� � � � �i�f� �(� �o�p�t�i�o�n�s� �)� �{�
�
� � � � � � �$�.�e�x�t�e�n�d�(� �s�e�t�t�i�n�g�s�,� �o�p�t�i�o�n�s� �)�;�
�
� � � � �}�
�
�
�
� � � � �r�e�t�u�r�n� �t�h�i�s�.�e�a�c�h�(�f�u�n�c�t�i�o�n�(�)�{�
�
� � � � � � �v�a�r� �s�e�l�e�c�t�o�r�s� �=� �[�
�
� � � � � � � � �"�i�f�r�a�m�e�[�s�r�c�*�=�'�p�l�a�y�e�r�.�v�i�m�e�o�.�c�o�m�'�]�"�,�
�
� � � � � � � � �"�i�f�r�a�m�e�[�s�r�c�*�=�'�y�o�u�t�u�b�e�.�c�o�m�'�]�"�,�
�
� � � � � � � � �"�i�f�r�a�m�e�[�s�r�c�*�=�'�y�o�u�t�u�b�e�-�n�o�c�o�o�k�i�e�.�c�o�m�'�]�"�,�
�
� � � � � � � � �"�i�f�r�a�m�e�[�s�r�c�*�=�'�k�i�c�k�s�t�a�r�t�e�r�.�c�o�m�'�]�[�s�r�c�*�=�'�v�i�d�e�o�.�h�t�m�l�'�]�"�,�
�
� � � � � � � � �"�o�b�j�e�c�t�"�,�
�
� � � � � � � � �"�e�m�b�e�d�"�
�
� � � � � � �]�;�
�
�
�
� � � � � � �i�f� �(�s�e�t�t�i�n�g�s�.�c�u�s�t�o�m�S�e�l�e�c�t�o�r�)� �{�
�
� � � � � � � � �s�e�l�e�c�t�o�r�s�.�p�u�s�h�(�s�e�t�t�i�n�g�s�.�c�u�s�t�o�m�S�e�l�e�c�t�o�r�)�;�
�
� � � � � � �}�
�
�
�
� � � � � � �v�a�r� �$�a�l�l�V�i�d�e�o�s� �=� �$�(�t�h�i�s�)�.�f�i�n�d�(�s�e�l�e�c�t�o�r�s�.�j�o�i�n�(�'�,�'�)�)�;�
�
� � � � � � �$�a�l�l�V�i�d�e�o�s� �=� �$�a�l�l�V�i�d�e�o�s�.�n�o�t�(�"�o�b�j�e�c�t� �o�b�j�e�c�t�"�)�;� �/�/� �S�w�f�O�b�j� �c�o�n�f�l�i�c�t� �p�a�t�c�h�
�
�
�
� � � � � � �$�a�l�l�V�i�d�e�o�s�.�e�a�c�h�(�f�u�n�c�t�i�o�n�(�)�{�
�
� � � � � � � � �v�a�r� �$�t�h�i�s� �=� �$�(�t�h�i�s�)�;�
�
� � � � � � � � �i�f� �(�t�h�i�s�.�t�a�g�N�a�m�e�.�t�o�L�o�w�e�r�C�a�s�e�(�)� �=�=�=� �'�e�m�b�e�d�'� �&�&� �$�t�h�i�s�.�p�a�r�e�n�t�(�'�o�b�j�e�c�t�'�)�.�l�e�n�g�t�h� �|�|� �$�t�h�i�s�.�p�a�r�e�n�t�(�'�.�f�l�u�i�d�-�w�i�d�t�h�-�v�i�d�e�o�-�w�r�a�p�p�e�r�'�)�.�l�e�n�g�t�h�)� �{� �r�e�t�u�r�n�;� �}�
�
� � � � � � � � �v�a�r� �h�e�i�g�h�t� �=� �(� �t�h�i�s�.�t�a�g�N�a�m�e�.�t�o�L�o�w�e�r�C�a�s�e�(�)� �=�=�=� �'�o�b�j�e�c�t�'� �|�|� �(�$�t�h�i�s�.�a�t�t�r�(�'�h�e�i�g�h�t�'�)� �&�&� �!�i�s�N�a�N�(�p�a�r�s�e�I�n�t�(�$�t�h�i�s�.�a�t�t�r�(�'�h�e�i�g�h�t�'�)�,� �1�0�)�)�)� �)� �?� �p�a�r�s�e�I�n�t�(�$�t�h�i�s�.�a�t�t�r�(�'�h�e�i�g�h�t�'�)�,� �1�0�)� �:� �$�t�h�i�s�.�h�e�i�g�h�t�(�)�,�
�
� � � � � � � � � � � � �w�i�d�t�h� �=� �!�i�s�N�a�N�(�p�a�r�s�e�I�n�t�(�$�t�h�i�s�.�a�t�t�r�(�'�w�i�d�t�h�'�)�,� �1�0�)�)� �?� �p�a�r�s�e�I�n�t�(�$�t�h�i�s�.�a�t�t�r�(�'�w�i�d�t�h�'�)�,� �1�0�)� �:� �$�t�h�i�s�.�w�i�d�t�h�(�)�,�
�
� � � � � � � � � � � � �a�s�p�e�c�t�R�a�t�i�o� �=� �h�e�i�g�h�t� �/� �w�i�d�t�h�;�
�
� � � � � � � � �i�f�(�!�$�t�h�i�s�.�a�t�t�r�(�'�i�d�'�)�)�{�
�
� � � � � � � � � � �v�a�r� �v�i�d�e�o�I�D� �=� �'�f�i�t�v�i�d�'� �+� �M�a�t�h�.�f�l�o�o�r�(�M�a�t�h�.�r�a�n�d�o�m�(�)�*�9�9�9�9�9�9�)�;�
�
� � � � � � � � � � �$�t�h�i�s�.�a�t�t�r�(�'�i�d�'�,� �v�i�d�e�o�I�D�)�;�
�
� � � � � � � � �}�
�
� � � � � � � � �$�t�h�i�s�.�w�r�a�p�(�'�<�d�i�v� �c�l�a�s�s�=�"�f�l�u�i�d�-�w�i�d�t�h�-�v�i�d�e�o�-�w�r�a�p�p�e�r�"�>�<�/�d�i�v�>�'�)�.�p�a�r�e�n�t�(�'�.�f�l�u�i�d�-�w�i�d�t�h�-�v�i�d�e�o�-�w�r�a�p�p�e�r�'�)�.�c�s�s�(�'�p�a�d�d�i�n�g�-�t�o�p�'�,� �(�a�s�p�e�c�t�R�a�t�i�o� �*� �1�0�0�)�+�"�%�"�)�;�
�
� � � � � � � � �$�t�h�i�s�.�r�e�m�o�v�e�A�t�t�r�(�'�h�e�i�g�h�t�'�)�.�r�e�m�o�v�e�A�t�t�r�(�'�w�i�d�t�h�'�)�;�
�
� � � � � � �}�)�;�
�
� � � � �}�)�;�
�
� � �}�;�
�
�/�/� �W�o�r�k�s� �w�i�t�h� �e�i�t�h�e�r� �j�Q�u�e�r�y� �o�r� �Z�e�p�t�o�
�
�}�)�(� �w�i�n�d�o�w�.�j�Q�u�e�r�y� �|�|� �w�i�n�d�o�w�.�Z�e�p�t�o� �)�;;/*

Above code opened up in a different text editor

/ * g l o b a l  j Q u e r y  * /

 / * j s h i n t   m u l t i s t r : t r u e   b r o w s e r : t r u e   * /

 / * !

 *   F i t V i d s   1 . 0

 *

 *   C o p y r i g h t   2 0 1 3 ,   C h r i s   C o y i e r   -   h t t p : / / c s s - t r i c k s . c o m   +   D a v e   R u p e r t   -   h t t p : / / d a v e r u p e r t . c o m

 *   C r e d i t   t o   T h i e r r y   K o b l e n t z   -   h t t p : / / w w w . a l i s t a p a r t . c o m / a r t i c l e s / c r e a t i n g - i n t r i n s i c - r a t i o s - f o r - v i d e o /

 *   R e l e a s e d   u n d e r   t h e   W T F P L   l i c e n s e   -   h t t p : / / s a m . z o y . o r g / w t f p l /

 *

 *   D a t e :   T h u   S e p t   0 1   1 8 : 0 0 : 0 0   2 0 1 1   - 0 5 0 0

 * /



 ( f u n c t i o n (   $   ) {



     " u s e   s t r i c t " ;



     $ . f n . f i t V i d s   =   f u n c t i o n (   o p t i o n s   )   {

         v a r   s e t t i n g s   =   {

             c u s t o m S e l e c t o r :   n u l l

         } ;



         i f ( ! d o c u m e n t . g e t E l e m e n t B y I d ( ' f i t - v i d s - s t y l e ' ) )   {



             v a r   d i v   =   d o c u m e n t . c r e a t e E l e m e n t ( ' d i v ' ) ,

                     r e f   =   d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' b a s e ' ) [ 0 ]   | |   d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' s c r i p t ' ) [ 0 ] ,

                     c s s S t y l e s   =   ' & s h y ; < s t y l e > . f l u i d - w i d t h - v i d e o - w r a p p e r { w i d t h : 1 0 0 % ; p o s i t i o n : r e l a t i v e ; p a d d i n g : 0 ; } . f l u i d - w i d t h - v i d e o - w r a p p e r   i f r a m e , . f l u i d - w i d t h - v i d e o - w r a p p e r   o b j e c t , . f l u i d - w i d t h - v i d e o - w r a p p e r   e m b e d   { p o s i t i o n : a b s o l u t e ; t o p : 0 ; l e f t : 0 ; w i d t h : 1 0 0 % ; h e i g h t : 1 0 0 % ; } < / s t y l e > ' ;



             d i v . c l a s s N a m e   =   ' f i t - v i d s - s t y l e ' ;

             d i v . i d   =   ' f i t - v i d s - s t y l e ' ;

             d i v . s t y l e . d i s p l a y   =   ' n o n e ' ;

             d i v . i n n e r H T M L   =   c s s S t y l e s ;



             r e f . p a r e n t N o d e . i n s e r t B e f o r e ( d i v , r e f ) ;



         }



         i f   (   o p t i o n s   )   {

             $ . e x t e n d (   s e t t i n g s ,   o p t i o n s   ) ;

         }



         r e t u r n   t h i s . e a c h ( f u n c t i o n ( ) {

             v a r   s e l e c t o r s   =   [

                 " i f r a m e [ s r c * = ' p l a y e r . v i m e o . c o m ' ] " ,

                 " i f r a m e [ s r c * = ' y o u t u b e . c o m ' ] " ,

                 " i f r a m e [ s r c * = ' y o u t u b e - n o c o o k i e . c o m ' ] " ,

                 " i f r a m e [ s r c * = ' k i c k s t a r t e r . c o m ' ] [ s r c * = ' v i d e o . h t m l ' ] " ,

                 " o b j e c t " ,

                 " e m b e d "

             ] ;



             i f   ( s e t t i n g s . c u s t o m S e l e c t o r )   {

                 s e l e c t o r s . p u s h ( s e t t i n g s . c u s t o m S e l e c t o r ) ;

             }



             v a r   $ a l l V i d e o s   =   $ ( t h i s ) . f i n d ( s e l e c t o r s . j o i n ( ' , ' ) ) ;

             $ a l l V i d e o s   =   $ a l l V i d e o s . n o t ( " o b j e c t   o b j e c t " ) ;   / /   S w f O b j   c o n f l i c t   p a t c h



             $ a l l V i d e o s . e a c h ( f u n c t i o n ( ) {

                 v a r   $ t h i s   =   $ ( t h i s ) ;

                 i f   ( t h i s . t a g N a m e . t o L o w e r C a s e ( )   = = =   ' e m b e d '   & &   $ t h i s . p a r e n t ( ' o b j e c t ' ) . l e n g t h   | |   $ t h i s . p a r e n t ( ' . f l u i d - w i d t h - v i d e o - w r a p p e r ' ) . l e n g t h )   {   r e t u r n ;   }

                 v a r   h e i g h t   =   (   t h i s . t a g N a m e . t o L o w e r C a s e ( )   = = =   ' o b j e c t '   | |   ( $ t h i s . a t t r ( ' h e i g h t ' )   & &   ! i s N a N ( p a r s e I n t ( $ t h i s . a t t r ( ' h e i g h t ' ) ,   1 0 ) ) )   )   ?   p a r s e I n t ( $ t h i s . a t t r ( ' h e i g h t ' ) ,   1 0 )   :   $ t h i s . h e i g h t ( ) ,

                         w i d t h   =   ! i s N a N ( p a r s e I n t ( $ t h i s . a t t r ( ' w i d t h ' ) ,   1 0 ) )   ?   p a r s e I n t ( $ t h i s . a t t r ( ' w i d t h ' ) ,   1 0 )   :   $ t h i s . w i d t h ( ) ,

                         a s p e c t R a t i o   =   h e i g h t   /   w i d t h ;

                 i f ( ! $ t h i s . a t t r ( ' i d ' ) ) {

                     v a r   v i d e o I D   =   ' f i t v i d '   +   M a t h . f l o o r ( M a t h . r a n d o m ( ) * 9 9 9 9 9 9 ) ;

                     $ t h i s . a t t r ( ' i d ' ,   v i d e o I D ) ;

                 }

                 $ t h i s . w r a p ( ' < d i v   c l a s s = " f l u i d - w i d t h - v i d e o - w r a p p e r " > < / d i v > ' ) . p a r e n t ( ' . f l u i d - w i d t h - v i d e o - w r a p p e r ' ) . c s s ( ' p a d d i n g - t o p ' ,   ( a s p e c t R a t i o   *   1 0 0 ) + " % " ) ;

                 $ t h i s . r e m o v e A t t r ( ' h e i g h t ' ) . r e m o v e A t t r ( ' w i d t h ' ) ;

             } ) ;

         } ) ;

     } ;

 / /   W o r k s   w i t h   e i t h e r   j Q u e r y   o r   Z e p t o

 } ) (   w i n d o w . j Q u e r y   | |   w i n d o w . Z e p t o   ) ;;/*

Compare to
https://github.com/davatron5000/FitVids.js/blob/master/jquery.fitvids.js

webservant316’s picture

>Are you using a js minifier? If yes what one?

Looks like I am using jsmin version, 3.0.0, Port of Douglas Crockford's JSMin for PHP7.1
https://github.com/rgrove/jsmin-php. That is not the right one to be using.

I thought I was using https://github.com/sqmk/pecl-jsmin/tree/feature/php7 which is the one you directed me to use in this issue post, https://www.drupal.org/node/2887837. My web host installed the wrong one.

So I think I need to drop back further and consider my js minimizer. Actually what I am seeing now is when I totally disable advagg and turn Drupal JS aggregation ON then all my JS is broken. When I turn Drupal JS aggregation OFF then my JS is working.

Does Drupal JS aggregation use jsmin? If so then maybe jsmin is my problem. If not then I have another problem.

What I don't understand is that this same version of jsmin is working fine on 5 other sites. That is more evidence, if Drupal JS aggregation does not use jsmin, that I have another problem.

mikeytown2’s picture

Does Drupal JS aggregation use jsmin?

It does not but it looks like the jsmin is making the UTF-8 issue worse. Disable jsmin and try again with patch #15

webservant316’s picture

I disabled Cloudflare
I disabled js compression at /admin/config/development/performance/advagg/js-compress/
I left advagg enabled
I turned on Drupal JS Aggregation
I cleared my browser cache

Same problem, all javascript broken.
I must have a larger issue here.

I PMed another zip that shows the errors on the same page.

mikeytown2’s picture

Process of elimination, looks like that didn't help. Can you provide a link to fitvids.js similar to https://www.drupal.org/misc/jquery.js? Also could you zip up that file and send it my way as well (copy back via FTP or your choice of file transfer that doesn't use the browser)? I want to see if there's something about it that is really messing things up.

webservant316’s picture

Just PMed you again. I think you might have found the problem in my jquery.fitvids.js.
I am running a test right now.

webservant316’s picture

as an aside you might be able to reduce your patch replacing this....

+ // Under some unknown/rare circumstances, extraneous/wrong chars at the
+ // end of the js string can appear. This work-around will remove these
+ // chars if necessary. See https://www.drupal.org/node/2627468.
+ $a = strrpos($contents, ';');
+ $b = strrpos($contents, '}');
+ $c = strrpos($contents, ')');
+ // Simple scripts can just end, check to make sure there's a
+ // match before cutting.
+ if ($a !== FALSE || $b !== FALSE || $c !== FALSE) {
+ $contents = substr($contents, 0, 1 + max($a, $b, $c));
+ }

with this

+ // Under some unknown/rare circumstances, extraneous/wrong chars at the
+ // end of the js string can appear. This work-around will remove these
+ // chars if necessary. See https://www.drupal.org/node/2627468.
+ $contents = preg_replace('/(^.*[;}\)]+)[^;}\)]*$/','$1',$contents);

I have not tested the idea.

mikeytown2’s picture

Top of sites/all/libraries/fitvids/jquery.fitvids.js

/*global樀儀甀攀爀礀�*/
/*jshint multistr:true browser:true */
/*!
* FitVids 1.0
*
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
* Date: Thu Sept 01 18:00:00 2011 -0500
*/

Looking at it via the zip file one text editor

/*global jQuery */
/*jshint multistr:true browser:true */
/*!
* FitVids 1.0
*
* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
*
* Date: Thu Sept 01 18:00:00 2011 -0500
*/

Another text editor

/ * g l o b a l   j Q u e r y   * /

 / * j s h i n t   m u l t i s t r : t r u e   b r o w s e r : t r u e   * /

 / * !

 *   F i t V i d s   1 . 0

 *

 *   C o p y r i g h t   2 0 1 3 ,   C h r i s   C o y i e r   -   h t t p : / / c s s - t r i c k s . c o m   +   D a v e   R u p e r t   -   h t t p : / / d a v e r u p e r t . c o m

 *   C r e d i t   t o   T h i e r r y   K o b l e n t z   -   h t t p : / / w w w . a l i s t a p a r t . c o m / a r t i c l e s / c r e a t i n g - i n t r i n s i c - r a t i o s - f o r - v i d e o /

 *   R e l e a s e d   u n d e r   t h e   W T F P L   l i c e n s e   -   h t t p : / / s a m . z o y . o r g / w t f p l /

 *

 *   D a t e :   T h u   S e p t   0 1   1 8 : 0 0 : 0 0   2 0 1 1   - 0 5 0 0

 * /

There is something odd with that file. Opening it up in a couple different text editors gives me different results. If I copy the text to a new file and save, the file size difference goes from 5708 bytes to 2779 bytes.

mikeytown2’s picture

preg_replace will be slow for large strings. That file is UTF-16LE encoded.

What does this give you on your server? If you've already replaced it with a good copy then copy it back from the zip with a different filename like jquery.fitvids.old.js

  $contents = file_get_contents('sites/all/libraries/fitvids/jquery.fitvids.js');
  $encoding = advagg_get_encoding_from_bom($contents);
  print_r($encoding);
mikeytown2’s picture

Also can you run this as well

  if (function_exists('iconv')) {
    echo 'iconv ';
  }
  if (function_exists('mb_convert_encoding')) {
    echo 'mb_convert_encoding ';
  }
  if (function_exists('recode_string')) {
    echo 'recode_string ';
  }
webservant316’s picture

okay I just installed the latest version of jquery.fitvids.js as directed by https://www.drupal.org/project/fitvids from https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js.

Then I ran the PHP your request above and got...

3350 (length of $contents)
(nothing returned from advagg_get_encoding_from_bom())
yes iconv
yes mb_convert_encoding
no recode_string

Also note...

Cloudflare is turned off
jQuery update set to 1.8 and default for Drupal admin pages
jQuery update set to production minified
jQuery update set to CDN google

Also with the latest version of jquery.fitvids.js and your patch #15 I get improvement.

TinyMCE JS is working with Drupal JS Aggregation on. This is a new improvement.
However, it is still broken when I turn advagg on with jsmin still disabled.

I PMed you both the working and non-working pages.

Also I am going to have to pick this up tomorrow. Thanks for the help!

mikeytown2’s picture

Undo the patch from #15; most likely causing the failures your seeing. Did you run advagg_get_encoding_from_bom() on the older js file or the new replacement? Can you run it on the older file if you didn't do so?

webservant316’s picture

Results from original file

5708 (size)
UTF-16LE
yes iconv
yes mb_convert_encoding
no recode_string

I removed patch #15 and all JS is working again. Thanks so much for working through this with me. This problem has been with me for awhile and I originally just turned Drupal JS Agg off. Then I started using advagg and turned Drupal JS agg on and didn't see any problems, but they were there.

I will do further testing tomorrow to confirm that I am good.

I am also going to open a new advagg post for opinions about the value of running both advagg and a CDN. I'd like some opinions on that.

Have a good evening.

mikeytown2’s picture

Go to admin/reports/status/php and what info is listed under the iconv heading?

Testing locally and even though the js file was UTF-16LE encoded and file_get_contents() returned junk advagg should have handled it correctly.
https://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_...
vs
http://www.rit.edu/drupal/api/drupal/sites%21all%21modules%21advagg%21ad...

Test code to verify this

  // Core.
  $filename = 'sites/all/libraries/fitvids/jquery.fitvids.old.js';
  $contents = file_get_contents($filename);
  echo $contents;

  echo "<br>\n<br>\n<br>\n<br>\n";
  // AdvAgg.
  module_load_include('inc', 'advagg', 'advagg.missing');
  $aggregate_settings = advagg_current_hooks_hash_array();
  $files = array(
    $filename => array(),
  );
  $output = advagg_get_js_aggregate_contents($files, $aggregate_settings);
  echo $output[0];

Actually by looking at advagg_get_js_aggregate_contents() I think I found the issue. This patch should allow for the UTF-16LE encoded file to be used successfully.

mikeytown2’s picture

Title: Drupal Performance > Aggregate JavaScript files and WYSIWYG TinyMCE not working » UTF-16LE encoded js files are not being added to aggregates correctly; mixed encoding issue.
Category: Support request » Bug report
webservant316’s picture

I hope to do the tests above and report back.

I did run "find ./ -type f -exec file -i '{}' \;" on my code base to look for other similar issues.

I did find this...

File	MIME	ENCODING
sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/spellchecker/editor_plugin.js	text/plain	charset=iso-8859-1
sites/all/libraries/tinymce/jscripts/tiny_mce/plugins/spellchecker/editor_plugin_src.js	text/x-c++	charset=iso-8859-1

Is iso-8859-1 a valid encode type in the Drupal world?

mikeytown2’s picture

echo file_get_contents($file); is the way to tell. If it outputs garbage then it needs to be converted.

Can you test the above patch with the old UTF-16LE file and see if js works with core and AdvAgg on?

webservant316’s picture

yes, I can get to that this afternoon. EST.

webservant316’s picture

>Can you test the above patch with the old UTF-16LE file and see if js works with core and AdvAgg on?

patch#31 works on the original UTF-16LE version of jquery.vitvids.js.

Is that your final fix? Shall I run with the patch?

Though after fixing jquery.vfitvids.js I don't really need it for now.

  • mikeytown2 committed 0aa6cbb on 7.x-2.x
    Issue #2896671 by mikeytown2, webservant316: UTF-16LE encoded js files...
mikeytown2’s picture

Status: Needs review » Fixed

This is the fix for this issue. I'm sure it's happened to other people and I have a fix for it in place it just wasn't working. You can run with the patch or without just know that the next version of AdvAgg will have the patch included, so I'd just run with it in place. Thanks for providing all the requested info on this bug!

webservant316’s picture

and thank you!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.