Convert simple function from jQuery to pure JavaScript

JavaScript
1

Hi all,

I have a very simple jQuery function which I need converting into pure JavaScript (as jQuery isn’t available).

I am taking the contents of a <strong> tag and squirting it into the value of a hidden form field in an iframe (the iframe is from a different domain if that affects the solution)

$(document).ready(function(){
	$('#21016619031340').load(function(){
		$(this.contentDocument).find('#input_4').val($('#content .group p:first-child strong').html())
	});
});

Could someone help me please?

Many thanks
Mike

2

Well untested, that would involve putting something like this scripting code at the end of the body, just before the </body> tag.


document.getElementById('21016619031340').onload = function () {
    var text = document.querySelector('#content .group p:first-child strong').innerHTML;
    this.contentDocument.getElementById('input_4').value = text;
};
3

Thanks!

I got this error…

Uncaught TypeError: Property ‘onload’ of object #<HTMLIFrameElement> is not a function (anonymous function)

Any ideas?

4

Yes, it should be an assignment made to onload instead, such as:


document.getElementById('21016619031340').onload = function () {
    ...
};

The original code is now updated to reflect that.

5

Perfect! Thanks so much

6

Hi Paul. I’m also looking for help to convert a jQuery function to pure JavaScript. Here is the jQuery. It’s for use on a SharePoint Web Part Page. Apparently it works. I’d like to use pure JavaScript if possible rather than load the jQuery library. Thanks.

jQuery(document).ready(function () {

   $('a').filter("[href='###']").each(function () {
   	$(this).replaceWith($(this).html());
   });

});

7

So A link of ### results in the link being unlinked. Okay.

The following should do the job:


var linksToUnlink = document.querySelectorAll('[href="###"]'),
    i;
for (i = 0; i < linksToUnlink.length; i += 1) {
    linksToUnlink[i].outerHTML = linksToUnlink[i].innerHTML;
};

If you want to do something fancier, you can convert the nodeList of links in to an array, and use forEach on them.


var linksToUnlink = document.querySelectorAll('[href="###"]');

linksToUnlink = Array.prototype.slice.call(linksToUnlink, 0);
linksToUnlink.forEach(function (link) {
    link.outerHTML = link.innerHTML;
});

But that’s introducing another complication, so I prefer to instead use the Array’s forEach method directly on the nodeList itself


var linksToUnlink = document.querySelectorAll('[href="###"]');
Aray.prototype.forEach.call(linksToUnlink, function (link) {
    link.outerHTML = link.innerHTML;
});
8

Paul … thanks so much. I tried example #1 and #3 and they would load. In example #1, I changed the comma at the end of the first line to a semicolon. Do you see any other errors?

In example #3, I corrected the word Array on the 2nd line, but it would not load either. Unfortunately, SharePoint doesn’t provide any error messages for the JavaScript. Any further ideas? Thank you so much for taking a stab at it.

9

That is not an error. The following lines of code do the same job.


var linksToUnlink = document.querySelectorAll('[href="###"]');
var i;



var linksToUnlink = document.querySelectorAll('[href="###"]'),
    i;

The second sample of code has a larger benefit in that it doesn’t give the impression that multiple variable statements are okay, and serves to reinforce that variables should be declared in the one place from the start of function or the code.

JavaScript has several pre-defined global objects, some that you may recognise and some that you don’t seem to recognise as of yet.
These pre-defined global objects are: Array, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Boolean”]Boolean, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date”]Date, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function”]Function, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Iterator”]Iterator, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Number”]Number, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object”]Object, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp”]RegExp, [URL=“https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String”]String

I hope that you at some stage learn how to control SharePoint as well.

10

Thanks Paul.