0

MediaWiki Version and LocalSettings.php
MediaWiki 1.22.4
$wgAllowUserJs = true;
$wgUseSiteJs = true;

Browser Version
FireFox 28.0

JavaScript Code

$ gvim common.js

function myFunction() {
  alert("Hello World!");
}

var onClickAttribute = document.createAttribute("onclick");
onClickAttribute.value="myFunction()";

var button = document.createElement("button");
button.setAttributeNode(onClickAttribute);
button.innerHTML = "Say hello";

if (document.URL === 'http://mywiki.com/w/index.php/User:Pjc/common.js') {
  var wikiaArticle = document.getElementById("WikiaArticle");
  wikiaArticle.insertBefore(button, wikiaArticle.firstChild);
}
:wq!

Browse to
http://mywiki.com/w/index.php/Special:MyPage/common.js click "edit this page"
copy/paste common.js into page
click "Save" button
clear the cache in your browser

THE BUTTON DID NOT DISPLAY!

It just displays the code that was entered.

user3145909
  • 75
  • 5
  • possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Bergi Apr 13 '14 at 20:59
  • I don't think "wikiaArticle is null" is the problem. Has anyone tried the code and does it work for you? – user3145909 Apr 13 '14 at 22:19
  • Yes it is the problem. Please try the suggested solutions in that linked post. That the page displays the code is only natural. And from the error message you can tell that the code is even executed… – Bergi Apr 13 '14 at 22:31
  • (can't figure out how to add a newline to my comment, does not work, neither does indenting 4 spaces) I tried the following, but it did not work! Define element & element.id before using it! Added the following to the top of the JavaScript Code `var wikiaArticle = document.createElement("div");` `wikiaArticle.id = 'WikiaArticle';` `document.body.appendChild(wikiaArticle);` Afterwards: `Ctrl+Shift+J - open Chrome JavaScript Console to Console Tab` `I got the following TypeError` `"Uncaught TypeError: Cannot read property 'appendChild' of null"` – user3145909 Apr 14 '14 at 08:16
  • Can someone give me the exact code to add to the script I mention above to make it work. I know I have to " Define element & element.id before using it!" I just don't know the exact code to do that. I tried, see above comment, but it did not work! – user3145909 Apr 14 '14 at 08:22
  • Well, `document.body` is `null` as well. Have you actually read the duplicate I've linked to? The answer is not to create the element yourself. Btw, you should post multiline code by [edit]ing your question. – Bergi Apr 14 '14 at 11:00
  • I do not see document.body as null in the JavaConsole (Ctrl+Shift-J). I did read the duplicate you linked to but there are examples of moving the html code not javascript code (which generates the html code). It states "putting your JavaScript after the corresponding DOM element". It then goes to show HTML code, not javascript code. What does the javascript code need to look like in order for this to work? I'm missing something from reading the duplicate you linked to. – user3145909 Apr 17 '14 at 15:50
  • `document.body` is `null` *at the time* your common.js executes, not at the time when you hack it into the console. Moving the JS inclusion code is only one of the possible solutions, the other (which you should use) is hooking on the DOM load event. Start reading from "*Other solutions include listening …*" in the linked answer for code examples. – Bergi Apr 17 '14 at 15:54
  • I tried both options (window.onload and document.addEventListener) and neither worked. I tried wrapping both examples around different parts of the code (the entire code, just the if statement, etc.) nothing worked. What am I doing wrong? Can someone send me what the code is supposed to look like after implementing the example solutions mentioned in [link](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – user3145909 Apr 17 '14 at 17:43
  • `$(function() { /* all your posted code here */ });` should do it. – Bergi Apr 18 '14 at 09:54
  • That did not work either. Here is the exact code I used as per your suggestion. `$(function() { function myFunction() { alert("Hello World!"); } var onClickAttribute = document.createAttribute("onclick"); onClickAttribute.value="myFunction()"; var button = document.createElement("button"); button.setAttributeNode(onClickAttribute); button.innerHTML = "Say hello"; if (document.URL === ''http://www.pauljcompany.com/w/index.php/User:Pjc/common.js') { var wikiaArticle = document.getElementById("WikiaArticle"); wikiaArticle.insertBefore(button, wikiaArticle.firstChild); } });` – user3145909 May 05 '14 at 03:00
  • Of course that doesn't work, as `myFunction` is not in the global scope. You should not use attribute nodes, and you should definitely not use event attributes with code strings. Attach handler programmatically! `if (document.URL === ''http://www.pauljcompany.com/w/index.php/User:Pjc/common.js') $(function() { $(" – Bergi May 05 '14 at 13:49
  • I tried your code and it does not work! It still gives me JavaConsole error: Uncaught TypeError: Cannot read property 'appendChild' of null – user3145909 May 06 '14 at 18:59
  • No. My code does not even *use* `appendChild`. The error must stem from somewhere else. – Bergi May 06 '14 at 19:08
  • The appendChild warning was coming from a Chrome Extension. I removed the extension and now I only get warnings from your code. The following works `document.write("This is my first JavaScript!"); ` also the following works: `alert("I am an alert box!");` but wrapping it in a function does not work: `function show_alert(){alert("I am an alert box!");}` – user3145909 May 06 '14 at 19:31
  • If you don't call the function, you won't get an alert of course... – Bergi May 06 '14 at 19:32
  • Duh, of course not. I added show_alert() to call the function and it works. But your code still does not work. It should display a button titled "Say hello" and when you click the button it should display "Hello World!". How simple is that, but it doesn't work. The JavaConsole in chrome shows Warnings only: `Attr.specified is deprecated. Its value is always true.` and `event.returnValue is deprecated. Please use the standard event.preventDefault() instead.` Neither should inhibit the script from working. What am I doing wrong? – user3145909 May 06 '14 at 19:56
  • Are you sure the `document.URL` condition thing is fulfilled? Debug it, please. Uh, and I just noticed there's a syntax error within the string literal, but you've probably fixed that already, – Bergi May 06 '14 at 20:01
  • I copy/pasted your example in http://jshint.com/. I also installed jshint and used the following two configs for .jshintrc. https://github.com/jshint/jshint/blob/2.x/.jshintrc and https://git.wikimedia.org/blob/mediawiki%2Fcore.git/HEAD/.jshintrc all attempts gave me the following output: `C:\jshit-examples>jshint --verbose common.js common.js: line 2, col 5, 'document' is not defined. (W117) common.js: line 3, col 1, '$' is not defined. (W117) common.js: line 5, col 3, '$' is not defined. (W117) common.js: line 9, col 7, 'alert' is not defined. (W117)` How do I resolve W117? – user3145909 May 09 '14 at 02:43
  • Try the following with your code and it also does not work, so it's not my version of MediaWiki that is the problem. Username: pjc, Password: NoogWiKiPedPJC! at https://test.wikipedia.org/wiki/User:Pjc/common.js – user3145909 May 09 '14 at 02:56
  • I dunno, [it works flawless](https://test.wikipedia.org/wiki/User:Pjc/common.js) [now](https://test.wikipedia.org/w/index.php?title=User:Pjc/common.js&diff=199116&oldid=199115). Btw, your jshint setting didn't work since `// Environment "browser": true` makes `document` defined. Not an jshint expert, though. – Bergi May 09 '14 at 03:27

1 Answers1

0

Users javascript should be in MediaWiki:Common.js or under User:YourUserName/common.js. Scripts under Special:Mypage does not work. Please refer https://www.mediawiki.org/wiki/Manual:Interface/JavaScript for details

Santhosh
  • 51
  • 2