I'm trying to add the video tag and apply MediaElement.js to it.
If I do this, it works correctly (reduced the Video tag for brevity, but doesn't throw any error):
<link rel='stylesheet' href='/_layouts/MediaElementWebPart/mediaelementplayer.min.css' />
<script type="text/javascript" src='/_layouts/MediaElementWebPart/jquery.js'></script>
<script type="text/javascript" src='/_layouts/MediaElementWebPart/mediaelement-and-player.min.js'></script>
<video width='640' height='320' id='MEWP'>
</video>
<script>$('MEWP').mediaelementplayer()</script>
But, if I add the tag through code, .mediaelementplayer() throws SCRIPT438: Object doesn't support property or method 'mediaelementplayer'
<link rel='stylesheet' href='/_layouts/MediaElementWebPart/mediaelementplayer.min.css' />
<script type="text/javascript" src='/_layouts/MediaElementWebPart/jquery.js'></script>
<script type="text/javascript" src='/_layouts/MediaElementWebPart/mediaelement-and-player.min.js'></script>
<div id="videosContainer">
</div>
<script type="text/javascript">
$(function () {
var random = Math.floor((Math.random() * 100000) + 1);
var id = "MEWP-" + random.toString();
var video = "<video width=\'640\' height=\'320\' id=\'" + id + "\' ></video>";
$(video).appendTo('#videosContainer');
$('#' + id).mediaelementplayer();
});
</script>
The video tag's element seems to be found though, per the debugger
[+] $('#' + id)[0] {...} [Object, HTMLVideoElement]
What am I missing here? Any general advice for troubleshoot these kind of things, appreciated.
Related
With this HTML the function myFunc() can be executed. https://myurl.de/myjs.js has the function myFunc in it.
<head>
<script type="text/javascript" src="https://myurl.de/myjs.js"></script>
<body>
<script type="text/javascript">
myFunc();
</script>
</body>
</head>
But with the second HTML I get an Error: Uncaught ReferenceError: myFunc is not defined.
https://myurl.de/settingsFile.js is a file that includes this url in a var: https://myurl.de/myjs.js so basically SettingsFile.UrlToMyJS is this https://myurl.de/myjs.js
<head>
<script src="https://myurl.de/settingsFile.js"></script>
<script type="text/javascript" id="myid"></script>
</head>
<body>
<script type="text/javascript">
document.getElementById('myid').src = SettingsFile.UrlToMyJS;
myFunc();
</script>
</body>
When I console.log(document.getElementById('myid')) this is the output:
<script type="text/javascript" id="myid" src="https://myurl.de/myjs.js></script> which is correct. It looks exactly like the script in the head of the first html (with the difference that it has the id="myid").
Yet it does not work. Why and how can I fix it?
settingsFile.js:
var defaultURL = 'https://myurl.de/';
var SettingsFile = {
UrlToMyJS : defaultURL + 'myjs.js',
}
The reason it's not working is that you can't add a src to a script element that's already in the DOM — or rather, doing so doesn't do anything. The script element has already been processed.
Instead, create it and then append it:
var script = document.createElement("script");
script.onload = function() {
myFunc();
};
script.src = SettingsFile.UrlToMyJS;
document.head.appendChild(script);
// If you need to support IE8, use the following instead of the previous line:
//document.getElementsByTagName("head")[0].appendChild(script);
That waits for the script to load, then calls myFunc (which should exist by then).
Also note that as I and Jeremy pointed out in the comments, body doesn't go in head, it goes after. It's also generally best to put script tags at the end of body (if you're not using async or defer attributes on them or type="module"). So in all, something like:
<head>
<!-- head stuff here -->
</head>
<body>
<!-- content here -->
<script src="https://myurl.de/settingsFile.js"></script>
<script type="text/javascript">
var script = document.createElement("script");
script.onload = function() {
myFunc();
};
script.src = SettingsFile.UrlToMyJS;
document.head.appendChild(script);
// If you need to support IE8, use the following instead of the previous line:
//document.getElementsByTagName("head")[0].appendChild(script);
</script>
</body>
Another option is to use document.write. This sort of thing may be the last at-least-partially appropriate use of document.write during the main parsing of the page:
<head>
<!-- head stuff here -->
</head>
<body>
<!-- content here -->
<script src="https://myurl.de/settingsFile.js"></script>
<script type="text/javascript">
document.write('<script src="' + SettingsFile.UrlToMyJS + '"><\/script>');
</script>
<script>
myFunc();
</script>
</body>
You can try creating a element and then appending it to your title
For Example (script code) :
var script = document.createElement("script");
script.src = "YOUR_SCRIPT_SRC_HERE";
document.getElementsByTagName('head')[0].appendChild(script);
Here I am creating a new tag in html and then appending it to the head of your html. Even as T.J. Crowder mentioned in the comment try removing your body from the head
I'm new with Javascript and, as expected, I'm in a hard time with it.
I don't know what I'm doing wrong...
Maybe my CDNs declarations are disorderly?
I checked my js syntax many time, I just can't find the issue...
Please, could someone help?
Mission: change img src and id attribute (HTML5) using only Javascript.
My HTML:
<head>
<!--CDN-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>
<script src="https://unpkg.com/tooltip.js"></script>
<script>
window.onload = function imgChanger() {
let bonanza = 0;
let a;
let b;
try {
a = document.getElementById("bla");
bonanza = 1;
} catch (error) {
console.log("This elemente with id=bla doesn't exists.");
}
try {
b = document.getElementById("ble");
bonanza = 2;
} catch (error) {
console.log("This elemente with id=ble doesn't exists.");
}
if (bonanza == 1) {
document.getElementById("bla").src = "CORRECT PATH TO IMG 01";
document.getElementById("bla").id = "ble";
}
if (bonanza == 2) {
document.getElementById("ble").src = "CORRECT PATH TO IMG 02";
document.getElementById("ble").id = "bla";
}
}
</script>
.
.
.
<body>
<button id="xBtnOne" onclick="imgChanger()">
<img id="bla" src="CORRECT PATH TO IMG 01"></img>
</button>
</body>
.
.
.
Console error: Uncaught TypeError: Cannot set property 'src' of null at imgChanger.
And,that freaking button does nothing but make me cry...
Thanks for your time ppl...
The try/catch block in the code will never throw an error. Therefore the value of bonanza will always be 2.
So when
document.getElementById("ble").src
this statement is run, document.getElementById("ble") will return null because id is bla. Therefore the error "src of null".
You can try the following:
<html>
<head>
<!--CDN-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tooltip.js"></script>
<script>
window.onload = function imgChanger() {
let bonanza = 0;
let a;
let b;
a = document.getElementById("bla");
b = document.getElementById("ble");
bonanza = a ? 1 : 2;
if (bonanza == 1) {
document.getElementById("bla").src = "CORRECT PATH TO IMG 01";
document.getElementById("bla").id = "ble";
}
if (bonanza == 2) {
document.getElementById("ble").src = "CORRECT PATH TO IMG 02";
document.getElementById("ble").id = "bla";
}
}
</script>
</head>
<body>
<button id="xBtnOne" onclick="imgChanger()">
<img id="bla" src="CORRECT PATH TO IMG 01">
</button>
</body>
</html>
Also there is no need have the closing image tag.
It is a singleton tag i.e. a tag that doesn't require a closing tag to be valid.
b = document.getElementById("ble");
will return null and not crash the program until you try to set something to it as it seems you have no object with the id ble in the HTML. Also, image changer will not work when clicked and only runs on load.
So I'm trying to make a custom BBCode for my forum that will properly color coding by it's language. It works great but it's appearing completely inline and doesn't line break at all like it should.
Here is the coding:
<head>
<link rel="stylesheet" type="text/css" href="http://z3.ifrm.com/63/1/0/p509771/prism.css" />
<body>
<script type="text/javascript">
function addLang(nClass, nName) {
$('blockquote dt:contains(' + nClass + ')').parents('blockquote').find('code').addClass('language-' + nClass);
$('blockquote dt:contains(' + nClass + ')').text('Code: ' + nName);
}
addLang('css', 'CSS');
addLang('javascript', 'JavaScript');
addLang('php', 'PHP');
addLang('sql', 'SQL');
addLang('c++', 'C++');
addLang('c#', 'C#');
addLang('python', 'Python');
addLang('java', 'Java');
</script>
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
Here is how it appears: http://i.imgur.com/I67HO7I.png
Here is an example of how I want it to appear: http://i.imgur.com/7kjlrxD.png
So I have a website with a Header.html. In the header are three buttons. I've copied the Header.html into all of my other pages with jquery's load. Now what I would like to do is change the colour of one of the buttons depending on the page it's on. But when I use document.GetElementById in javascript it can't find the div of the button I've copied from the Header.html
Here's the Header.html
<div id="Header_Wrapper">
<div id="Header_PageLinksWrapper">
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>
</div>
</div>
</div>
The javascript file:
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html");
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
}
);
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = document.getElementById(id);
if (divElement == null)
{
console.log("Could not find element " + id);
}
divElement.style.color = 0xffffff;
}
One of the pages (eg. Games.html)
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Adabelle Combrink - Games</title>
<link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/>
<link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/>
<link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/>
<script type="text/javascript" src="..\Scripts\jQuery.js"></script>
<script type="text/javascript" src="..\Scripts\Defaults.js"></script>
</head>
<body>
<header>
<div id="Header"></div>
</header>
</body>
</html>
What this gives me in the console is Could not find element PageLink_Games. I don't get that error if I use something that is in Games.html like Header.
Is there any other way of doing the same thing. I know you can include files into eachother with php but I haven't gotten that right and don't seem to be able to run .php files in Visual Studio.
jQuery.load has a success callback. Use it to assure your code is only executed after the loading is complete.
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", null, function() {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
Also your SetPageLinkColours function can be improved with jQuery:
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = $("#"+id);
if (!divElement.length)
{
console.log("Could not find element " + id);
}
else
{
divElement.css('color','white');
}
}
load function makes async request , so your code tries to find element before it rely appears. U need to use load function callback http://api.jquery.com/load/
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", function () {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
I want to inject iframe head by yui3.The sample code works in FF but IE9 shows the error "YUI is not define". I don't know what happens in IE9.
<head>
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
<script src="./test-yui.js"></script>
</head>
<body>
<iframe src="#" id="frame"></iframe>
</body>
var SC = 'script';
YUI().use('node', function (Y) {
var frame = Y.Node.getDOMNode(Y.one('#frame'));
o = frame.contentWindow.document;
o.open().write(
'<head><' + SC + ' type="text/javascript" src="http://yui.yahooapis.com/3.5.0/build``/yui/yui-min.js"></' + SC + '>'+
'<' + SC + '>YUI().use(\'tabview\', \'node\', function(Y) {});</' + SC + '>'+
'</head>'+
'<body><div class="unit_title" >HELLO WORLD</div></body>');
o.close();
});
Trying to write to iframes can be tricky I would suggest looking at the Frame module in YUI some details on using it can be found here http://www.andrewwooldridge.com/blog/2011/04/14/hidden-yui-gem-frame/