Topic on Project:Support desk

Javascript requires multiple reloads to appear

14
Txantimedia (talkcontribs)

I'm running on FreeBSD 10.3, php 7.1 and Mediawiki 1.29.

I studied the Extension:WikiEditor/Toolbar customization/Library and wrote a widget to add an icon to the toolbar. It allows you to highlight some text with your mouse, then click on the icon to enclose the text in the following code: <span background-color: yellow>Your text here</span>. Then all the editor has to do is change the color.

The problem is, the icon sometimes doesn't show up, and you have to reload the edit page repeatedly to get it to appear. What would cause this apparently random behavior? I'm not seeing any errors in console. But I am seeing these notices:

[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.widget".

[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.position".

[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.core".

Please use "mediawiki.ui.button" or "oojs-ui" instead.

[Warning] Use of "wgServer" is deprecated. Use mw.config instead. (load.php, line 153)

[Warning] Use of "wgArticlePath" is deprecated. Use mw.config instead. (load.php, line 153)

[Warning] Use of "wgScriptPath" is deprecated. Use mw.config instead. (load.php, line 153)

[Warning] Use of "wgCurRevisionId" is deprecated. Use mw.config instead. (load.php, line 153)

[Warning] Use of "wgPageName" is deprecated. Use mw.config instead. (load.php, line 153)

Here's the code, basically stolen from that page and modified:

var customizeToolbar = function() {
    /* Your code goes here */
    $('#wpTextbox1').wikiEditor('addToToolbar', {
        section: 'advanced',
        group: 'format',
        tools: {
            "highlight": {
                label: 'Highlight',
                type: 'button',
                icon: 'images/highlight.png',
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: "<span style=\"background-color: yellow\">",
                        post: "</span>"
                    }
                }
            }
        }
    });
};
/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if ($.inArray(mw.config.get('wgAction'), ['edit', 'submit']) !== -1) {
    mw.loader.using('user.options').then(function() {
        // This can be the string "0" if the user disabled the preference
        if (mw.user.options.get('usebetatoolbar') == 1) {
            $.when(
                mw.loader.using('ext.wikiEditor.toolbar'), $.ready
            ).then(customizeToolbar);
        }
    });
}
This post was hidden by AhmadF.Cheema (history)
Txantimedia (talkcontribs)

No one has an answer for this?

Txantimedia (talkcontribs)

I did some greps to see where these things show up.

 1 # grep -r "jquery.ui.widget" Sites/wiki.vvfh.org/*
 2 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
 3 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
 4 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
 5 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
 6 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
 7 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
 8 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
 9 Sites/wiki.vvfh.org/resources/Resources.php:		'dependencies' => 'jquery.ui.widget',
10 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
11 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
12 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
13 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
14 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
15 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
16 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
17 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.widget',
18 Sites/wiki.vvfh.org/resources/Resources.php:	'jquery.ui.widget' => [
19 Sites/wiki.vvfh.org/resources/Resources.php:		'scripts' => 'resources/lib/jquery.ui/jquery.ui.widget.js',
20 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.sortable.js: *	jquery.ui.widget.js
21 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.droppable.js: *	jquery.ui.widget.js
22 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.selectable.js: *	jquery.ui.widget.js
23 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.tabs.js: *	jquery.ui.widget.js
24 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.spinner.js: *  jquery.ui.widget.js
25 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.accordion.js: *	jquery.ui.widget.js
26 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.progressbar.js: *   jquery.ui.widget.js
27 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.autocomplete.js: *	jquery.ui.widget.js
28 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.dialog.js: *	jquery.ui.widget.js
29 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.button.js: *	jquery.ui.widget.js
30 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.mouse.js: *	jquery.ui.widget.js
31 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.slider.js: *	jquery.ui.widget.js
32 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.menu.js: *	jquery.ui.widget.js
33 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.tooltip.js: *	jquery.ui.widget.js
34 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.draggable.js: *	jquery.ui.widget.js
35 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.resizable.js: *	jquery.ui.widget.js
36 
37 [root@colo11 # grep -r "jquery.ui.position" Sites/wiki.vvfh.org/*
38 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.position',
39 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.position',
40 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.position',
41 Sites/wiki.vvfh.org/resources/Resources.php:	'jquery.ui.position' => [
42 Sites/wiki.vvfh.org/resources/Resources.php:		'scripts' => 'resources/lib/jquery.ui/jquery.ui.position.js',
43 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.position',
44 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.autocomplete.js: *	jquery.ui.position.js
45 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.dialog.js: *	jquery.ui.position.js
46 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.menu.js: *	jquery.ui.position.js
47 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.tooltip.js: *	jquery.ui.position.js
48 
49 [root@colo11 /usr/home/schmehl]# grep -r "jquery.ui.core" Sites/wiki.vvfh.org/*
50 Sites/wiki.vvfh.org/resources/Resources.php:	'jquery.ui.core' => [
51 Sites/wiki.vvfh.org/resources/Resources.php:		'scripts' => 'resources/lib/jquery.ui/jquery.ui.core.js',
52 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core.styles',
53 Sites/wiki.vvfh.org/resources/Resources.php:	'jquery.ui.core.styles' => [
54 Sites/wiki.vvfh.org/resources/Resources.php:				'resources/lib/jquery.ui/themes/smoothness/jquery.ui.core.css',
55 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
56 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
57 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
58 Sites/wiki.vvfh.org/resources/Resources.php:		'dependencies' => 'jquery.ui.core',
59 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
60 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
61 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
62 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
63 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
64 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
65 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
66 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
67 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
68 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
69 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
70 Sites/wiki.vvfh.org/resources/Resources.php:			'jquery.ui.core',
71 Sites/wiki.vvfh.org/resources/lib/jquery.ui/PATCHES:themes/smoothness/jquery.ui.core.css:
72 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.datepicker.js: *	jquery.ui.core.js
73 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.sortable.js: *	jquery.ui.core.js
74 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.droppable.js: *	jquery.ui.core.js
75 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.selectable.js: *	jquery.ui.core.js
76 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.tabs.js: *	jquery.ui.core.js
77 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.spinner.js: *  jquery.ui.core.js
78 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.accordion.js: *	jquery.ui.core.js
79 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.progressbar.js: *   jquery.ui.core.js
80 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.autocomplete.js: *	jquery.ui.core.js
81 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.dialog.js: *	jquery.ui.core.js
82 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.button.js: *	jquery.ui.core.js
83 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.slider.js: *	jquery.ui.core.js
84 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.menu.js: *	jquery.ui.core.js
85 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.tooltip.js: *	jquery.ui.core.js
86 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.draggable.js: *	jquery.ui.core.js
87 Sites/wiki.vvfh.org/resources/lib/jquery.ui/jquery.ui.resizable.js: *	jquery.ui.core.js
88 Sites/wiki.vvfh.org/skins/Vector/skin.json:			"jquery.ui.core": [
89 Sites/wiki.vvfh.org/skins/Vector/skin.json:				"skinStyles/jquery.ui/jquery.ui.core.css",
Ciencia Al Poder (talkcontribs)

The problem may be the given code example in Extension:WikiEditor/Toolbar customization does not guarantee the code runs after the toolbar has been initialized. There are at least one report of the same issue in the talk page.

@TheDJ: wrote those instructions. Maybe you need to call that function inside a setTimeout() to force a delay.

Txantimedia (talkcontribs)

@TheDJ, you're going to have to walk me through that, or send me to an instruction page. I'm not a programmer. How do I  call that function inside a setTimeout() to force a delay?

And what about the deprecated warnings? Is there something I need to do? Or just ignore them?

Ciencia Al Poder (talkcontribs)

With setTimeout:

var customizeToolbar = function() {
    /* Your code goes here */
    $('#wpTextbox1').wikiEditor('addToToolbar', {
        section: 'advanced',
        group: 'format',
        tools: {
            "highlight": {
                label: 'Highlight',
                type: 'button',
                icon: 'images/highlight.png',
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: "<span style=\"background-color: yellow\">",
                        post: "</span>"
                    }
                }
            }
        }
    });
};
/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
if ($.inArray(mw.config.get('wgAction'), ['edit', 'submit']) !== -1) {
    mw.loader.using('user.options').then(function() {
        // This can be the string "0" if the user disabled the preference
        if (mw.user.options.get('usebetatoolbar') == 1) {
            $.when(
                mw.loader.using('ext.wikiEditor.toolbar'), $.ready
            ).then( function() { window.setTimeout(customizeToolbar, 500) } );
        }
    });
}

Deprecation warnings can be ignored for now. To fix them you should locate first where are they being used and replace them by the correct replacement: mw.config.get() instead of calling wg* variables directly.

Txantimedia (talkcontribs)

Right now the editor is so flaky it's ridiculous. Sometimes it appears. Sometimes it doesn't. Sometimes the yellow highlighter appears. Sometimes it doesn't. The Publish and Cancel buttons come and go. The Find and Replace button comes and goes. Why was all this crap written in Javascript? It seems to be highly unreliable.

Ciencia Al Poder (talkcontribs)

It may be caused by another error. Leave the error console open and look for errors when the entire editor doesn't appear. Note that it requires JavaScript because browsers don't provide such functionality.

Txantimedia (talkcontribs)

What I'm finding is that I get different errors depending upon which skin I use:

Vector - the editor appears but the yellow highlighter button I added never does

This is the console output: No errors, only warnings, but no yellow highlighter, despite repeated reloads.

[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.widget".
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.position".
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.core".
Please use "mediawiki.ui.button" or "oojs-ui" instead.

Monobook - the editor appears but the yellow highlighter button never does. Console is the same. Ditto for Modern.

Cologne Blue - the same behavior as the others, but with an error in the console

[Error] TypeError: null is not an object (evaluating 'sidebar.appendChild')
	rfmenu (index.php:341)
	fire (load.php:45:128)
	fireWith (load.php:46:436)
	ready (load.php:49:422)
	completed (load.php:49:938)
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.position". (load.php, line 55)
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.widget". (load.php, line 86)
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.core". (load.php, line 11)
Please use "mediawiki.ui.button" or "oojs-ui" instead.

And finally, Timeless, the skin I prefer - no editor ever, no publish or cancel buttons, no search/replace button - nothing at all

[Error] TypeError: null is not an object (evaluating 'sidebar.appendChild')
	rfmenu (index.php:341)
	fire (load.php:45:128)
	fireWith (load.php:46:436)
	ready (load.php:49:422)
	completed (load.php:49:938)
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.position". (load.php, line 55)
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.widget". (load.php, line 86)
[Warning] This page is using the deprecated ResourceLoader module "jquery.ui.core". (load.php, line 11)
Please use "mediawiki.ui.button" or "oojs-ui" instead.

I think what this tells me is that skins make a difference in whether or not the editor loads, but the customized button I created is a different problem. At this point, I'm getting very frustrated with this.

UPDATE: And, just like that, the editor suddenly appears in Timeless - still no custom highlighter button. The behavior of the editor is so flaky and unreliable that it's almost not worth having. There has to be some underlying cause for this behavior, but where would I look to find it?

2nd UPDATE: I found this log, but it's empty: less log/errors.log. You're probably going to tell me I don't have error logging enabled. Off to Google again.

121.220.52.60 (talkcontribs)

This likely has nothing to do with the editor. You probably have some custom script, or outdated/broken extension that is throwing JS errors, which breaks the rest of the JS on the page. Whatever is creating the sidebar.appendChild error is at least one of the causes, so you should track that down. The fact that it happens randomly makes it seem to be a race condition, perhaps a script relying on another script to load first, or a certain element to be created.

As for error logs, those are only server side things, like PHP errors. You won't find client side errors there, those are only in your browser console.

Txantimedia (talkcontribs)

I just installed 1.29 about a month ago. All my extensions have been installed from the MediaWiki Extensions Directory, and all of them are supposed to be for 1.29.

I greped the files for sidebar.appendChild, but it returned nothing. I assume this means the suspect Javascript is in the db. How can I trace down the offending file?

AhmadF.Cheema (talkcontribs)

Maybe try disabling all other gadgets and see if it changes anything.

Txantimedia (talkcontribs)

I enabled the debug console but found nothing useful.

I opened console, clicked on edit, then looked at the results. This is the Javascript that's causing the error:

/*************
*** Regex menu framework 1.2
*** by [[m:user:Pathoschild]]
*** documentation: http://meta.wikimedia.org/wiki/User:Pathoschild/Script:Regex_menu_framework
*************/

	/* create menu */
		var container = document.createElement('div');
		container.setAttribute('class','portlet portal collapsed');
		container.setAttribute('id','p-regex');
		sidebar.appendChild(container);

How do I find this thing and get rid of it?

UPDATE: Never mind. I found it. It was a gadget under advanced. I deleted it, and the error message is gone, and the editor now appears. But I'm still not getting the custom button that I added.

Reply to "Javascript requires multiple reloads to appear"