We Keep Coding

Changing URL strings via JS on MediaWiki site

So...I've been setting up a brand-new wiki for the past four days. While everything's going almost smoothly, I'd like to deal with a special touchup.
I created a preload template à la Wikipedia, "Template starter", some hours ago. While I could go the other way and create an input form, I want to make it so that red links in the Template namespace always lead to the code from this page, whenever a new one is ready for creation. So that:
http://rfm.referata.com/w/index.php?title=Template:Foo&action=edit&redlink=1 (default)
becomes:
http://rfm.referata.com/w/index.php?title=Template:Foo&action=edit&redlink=1&preload=Template:Template+starter (target)
by way of a JavaScript snippet added to the site's Common.js and Mobile.js.
Haven't come across similar MW-based examples, so I'd like to make sure everything's A-O.K.

Working from this answer, you could do something like this in Mediawiki:Common.js:
$(function() {
var preload = 'Template:Template_starter';
$("body.ns-10 #mw-content-text a.new").attr('href', function(i, h) {
// Maybe some links already have a preload parameter.
if (h.indexOf('preload=') !== -1) {
return h;
}
// All others get it appended.
return h + "&preload=" + preload;
});
});
Note that the check for a pre-existing '&preload=' isn't all that robust.

This extension should work well in your case https://www.mediawiki.org/wiki/Extension:NewArticleTemplate

Improving on what you provided last time, Mr. Wilson:
$(function() {
var preload = 'Template:Template_starter';
$("a.new[href*='Template:']").attr('href', function(i, h) {
// Maybe some links already have a preload parameter.
if (h.indexOf('preload=') !== -1) {
return h;
}
// All others get it appended.
return h + "&preload=" + preload;
});
});
Note that the previous version only worked within pages in the Template namespace; this fix applies to all pages with a red link to a nonexistent template. Thanks a dozen!

Cannot read property 'length' of undefined rarely happening

I've been creating a tool, and needed to create a series of dropdown menus to select a profile/view id (from google analytics) that populates the next menu on change of the previous one (selecting the correct properties for the correct accounts, and then the correct profiles for the correct properties).
To this end I made a small jquery/javascript for loop system which I think is actually quite messy but am not sure on how to improve on it (not part of the question though, but this could be one of the reasons I'm having the problem, although I'm not sure).
This script works across all the browsers I've tested, including mobile devices which I was really happy about.
However, when the tool was launched, two people (out of about a hundred) came back saying that the profile/view hadn't been selected. Which was very curious, since I couldn't replicate this error.
I had been in contact with one of the people and tried debugging (albeit a slow process through long series of meetings etc), but couldn't find a fix for it, (although I think I managed to isolate the problem, which will be pointed out after the code sample).
So my question is this. What could be causing this length of undefined error, and why is it only happening for 1-2 people out of a large sum of them (appears to be in jquery.min.js:2 using jquery version 1.11.1?). The error seems to be occuring when the property is changed, which is strange since the profiles are filling out correctly. Also I asked if the client could use different browsers and accounts but the same error kept happening.
Here is the code that creates the dropdowns:
function fillDropdownMenus(){
var accounts = <?php echo json_encode($accountsArray); ?>;
var propertiesSelectHtml = '<div class="col-xs-12 col-md-4 properties"><select class="col-xs-12" id="properties"><option selected="selected">PROPERTY NAMES</option></select></div>';
var profilesSelectHtml = '<div class="col-xs-12 col-md-4 profiles"><select class="col-xs-12" id="profiles"><option selected="selected">VIEW NAMES</option></select></div>';
accounts.forEach(function(account){
var accountIterator = 0;
account.account['id'].forEach(function(accountId){
$('#accounts').append('<option value="'+accountId+'">'+account.account['name'][accountIterator]+'</option>');
accountIterator++;
});
});
$('.accounts').on('change','#accounts', function(event){
var currentAccount = $('#accounts').val();
$('.properties').remove();
$('.profiles').remove();
$('.accounts').after(propertiesSelectHtml);
accounts.forEach(function(account){
$.each(account.account, function(accountkey, accountvalue){
if(accountvalue == currentAccount){
var propertyIterator = 0;
account.account['property']['id'].forEach(function(propertyId){
$('#properties').append('<option value="'+propertyId+'">'+account.account['property']['name'][propertyIterator]+'</option>');
propertyIterator++;
});
}
});
});
$('.properties').on('change','#properties', function(ev){
var currentProperty = $('#properties').val();
$('.profiles').remove();
$('.properties').after(profilesSelectHtml);
accounts.forEach(function(account){
$.each(account.account['property'], function(propertykey, propertyvalues){
if($.type(propertyvalues) == 'object' || $.type(propertyvalues) == 'array'){
for(var k in propertyvalues){
var propertyvalue = propertyvalues[k];
if(propertyvalue == currentProperty){
var profileIterator = 0;
account.account['property']['profile']['id'].forEach(function(profileId){
$('#profiles').append('<option value="'+profileId+'">'+account.account['property']['profile']['name'][profileIterator]+'</option>');
profileIterator++;
});
}
}
} else {
if(propertyvalue == currentProperty){
var profileIterator = 0;
account.account['property']['profile']['id'].forEach(function(profileId){
$('#profiles').append('<option value="'+profileId+'">'+account.account['property']['profile']['name'][profileIterator]+'</option>');
profileIterator++;
});
}
}
});
});
$('#profiles').on('change', function(e){
$('#view_id').removeAttr('value');
var currentProfile = $('#profiles').val();
$('#view_id').val(currentProfile);
});
});
});
}
fillDropdownMenus();
And the object structure:
Object -> account (object) -> id (array)
-> name (array)
-> property (object) -> id (array)
-> name (array)
-> profile (object) -> id (array)
-> name (array)
Thank you for your input on this issue of mine as I've been bashing my head against the wall for a couple of days trying to figure this out!
EDIT: http://codepen.io/zephyr/pen/VYQPKQ Here's a codepen of the list in action.

This appeared to be an error in my javascript being very inconsistent (having so many different for loops was not helping). After I changed them all to the normal .each jquery loop it seemed to fix the problem, and made the whole menu set work much better, as there were some logical errors as well (I wasn't filtering the profiles by property, it was just displaying them all for that account when the property was selected).

Disable a "link" tag without access to HTML

So I have a website I'm working on and in one part we have an embedded newsletter signup. The problem is that the embedded code uses all its own stylesheets which interferes with the design of the site. The embed is done through javascript so I cannot disable them until that section of the page loads.
Basically I need a script to disable an entire <link>. On top of that, the links don't have any classes or ids so they are hard to target.
<link rel=​"stylesheet" type=​"text/​css" href=​"http:​/​/​www.formstack.com/​forms/​css/​3/​default.css?20130404">​
This is one of the links I need to disable. I tried looking for something like a getElementByType or similar but I couldn't find anything.
Any help would be appreciated. As long as the code disables the link that's good enough for me. Maybe there is a way to search the document for the <link> string and surround it with comments?
Thanks guys
PS, I'm a javascript novice and have no idea what I'm doing with js

var test = "http:​/​/​www.formstack.com/​forms/​css/​3/​default.css";
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets.item(i);
if (sheet.href.indexOf(test) !== -1) sheet.disabled = true;
}
this will work, however it is inefficient (still) as it continues to check additional CSSStyleSheets in the CSSStyleSheetList after it has found it's match.
if you can not care about browser support you can use Array.prototype.some to reduce the number of ops
[].some.call(document.styleSheets, function(sheet) {
return sheet.disabled = sheet.href.indexOf(test) !== -1;
});
see: Array some method on MDN
edit:
For a mix of performance AND legacy support the following solution would work:
var test = "http:​/​/​www.formstack.com/​forms/​css/​3/​default.css";
for (var i = 0; i < document.styleSheets.length; i++) {
var sheet = document.styleSheets.item(i);
if (sheet.href.indexOf(test) !== -1) {
sheet.disabled = true;
break;
}
}

onClick replace /segment/ of img src path with one of number of values

No idea what I'm doing or why it isn't working. Clearly not using the right method and probably won't use the right language to explain the problem..
Photogallery... Trying to have a single html page... it has links to images... buttons on the page 'aim to' modify the path to the images by finding the name currently in the path and replacing it with the name of the gallery corresponding to the button the user clicked on...
example:
GALLERY2go : function(e) {
if(GalleryID!="landscapes")
{
var find = ''+ findGalleryID()+'';
var repl = "landscapes";
var page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var i = page.indexOf(find);
var j = find.length;
page = page.substr(0,i) + repl + page.substr(i+j);
document.body.innerHTML = page;
var GalleryID = "landscapes";
}
}
},
There's a function higher up the page to get var find to take the value of var GalleryID:
var GalleryID = "portfolio";
function findGalleryID() {
return GalleryID
}
Clearly the first varGalleryID is global (t'was there to set a default value should I have been able to find a way of referring to it onLoad) and the one inside the function is cleared at the end of the function (I've read that much). But I don't know what any of this means.
The code, given its frailties or otherwise ridiculousness, actually does change all of the image links (and absolutely everything else called "portfolio") in the html page - hence "portfolio" becomes "landscapes"... the path to the images changes and they all update... As a JavaScript beginner I was pretty chuffed to see it worked. But you can't click on another gallery button because it's stuck in a loop of some sort. In fact, after you click the button you can't click on anything else and all of the rest of the JavaScript functionality is buggered. Perhaps I've introduced some kind of loop it never exits. If you click on portfolio when you're in portfolio you crash the browser! Anyway I'm well aware that 'my cobbled together solution' is not how it would be done by someone with any experience in writing code. They'd probably use something else with a different name that takes another lifetime to learn. I don't think I can use getElement by and refer to the class/id name and parse the filename [using lots of words I don't at all understand] because of the implications on the other parts of the script. I've tried using a div wrapper and code to launch a child html doc and that come in without disposing of the existing content or talking to the stylesheet. I'm bloody lost and don't even know where to start looking next.
The point is... And here's a plea... If any of you do reply, I fear you will reply without the making the assumption that you're talking to someone who really hasn't got a clue what AJAX and JQuery and PHP are... I have searched forums; I don't understand them. Please bear that in mind.

I'll take a stab at updating your function a bit. I recognize that a critique of the code as it stands probably won't help you solve your problem.
var currentGallery = 'landscape';
function ChangeGallery(name) {
var imgs = document.getElementsByTagName("img") // get all the img tags on the page
for (var i = 0; i < imgs.length; i++) { // loop through them
if (imgs[i].src.indexOf(currentGallery) >= 0) { // if this img tag's src contains the current gallery
imgs[i].src = imgs[i].src.replace(currentGallery, name);
}
}
currentGallery = name;
}
As to why I've done what I've done - you're correct in that the scope of the variables - whether the whole page, or only the given function, knows about it, is mixed in your given code. However, another potential problem is that if you replace everything in the html that says 'landscape' with 'portfolio', it could potentially change non-images. This code only finds images, and then replaces the src only if it contains the given keyword.

Cannot Execute Javascript XPath queries on created document

Problem
I'm creating a document with javascript and I'd like to execute XPath queries on this document.
I've tried this in safari/chrome
I've read up on createDocument / xpath searches and it really seems like this code should work
At this point it seems like it may be a webkit bug
My requirements:
I can use innerHTML() to setup the document
I can execute xpath searches w tagnames
The code:
If you copy/paste the following into the webkit inspector, you should be able to repro.
function search(query, root) {
var result = null;
result = document.evaluate(query, root, null, 7,null);
var nodes = [];
var node_count = result.snapshotLength;
for(var i = 0; i < node_count; i++) {
nodes.push(result.snapshotItem(i));
}
return nodes;
}
x = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', 'HTML');
body = x.createElement('body');
body.innerHTML = "<span class='mything'><a></a></span>";
xdoc = x.documentElement; //html tag
xdoc.appendChild(body);
console.log(search(".", xdoc)); // --> [<html>​…​</html>​]
console.log(search("/*", xdoc)); // --> [<html>​…​</html>​]
console.log(search("/html", xdoc)); // --> []
Best Guess
So I can definitely search using XPath, but I cannot search using tagnames. Is there something silly I'm missing about the namespace?

Have you tried:
console.log(search("//html", xdoc));
I'm not familiar with Safari specifically, but the problem might be that Safari is adding another node above HTML or something. If this was the case, the first two queries might be showing you that node plus it's children, which would make it look like they're working properly, while the third query would fail because there wouldn't be a root=>HTML node.
Just a thought.