We Keep Coding

Ionic/Capacitor iOS App does not load script from a third party source

I am currently working on an ionic/react app using capacitor to "compile" it into android and iOS Apps.
Right now the app itself only has a simple calendar widget and an audio player playing a radio broadcast from radiojar.com.
This radio stream is provided by a script i initially inserted trough a script tag in the index.html file in the body like so:
<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
And then reference it within my Player Component (in the useIonViewDidEnter) like so:
rjq('#rjp-radiojar-player').radiojar('player', {
"streamName": "stream-url"
});
To make sure the variable rjq is not unkown when building the app etc. before loading the external script, i declare it globally in the Player.js file:
declare var rjq;
It works on:
Windows Browser (Chrome, Firefox)
Android (Emulator and real Xiaomi and Motorola phones)
MacOS Safari (Web)
It does not work on:
XCode Iphone (emulator)
In XCode i see the following error message:
APP ACTIVE
⚡️[log] - onscript loading complete
⚡️WebView loaded
⚡️To Native ->App addListener 122796460
⚡️[error] - {}
⚡️------ STARTUP JS ERROR ------
⚡️ReferenceError: Can't find variable: rjq
⚡️URL: capacitor://localhost/static/js/main.31871104.chunk.js
⚡️main.31871104.chunk.js:1:583
⚡️See above for help with debugging blank-screen issues
⚡️[log] - Player off
⚡️[error] - {}
What i tried so far:
My feeling is the script is not loaded therefore i explored mainly in that direction
Move script tag in index.html in head (made no difference)
Dynamic load in the Player.ts file (i tried appending it to body and head, see head version below)
Nr. 2 looks like this:
useIonViewDidEnter(() => {
console.log("Hello");
const radioScript = document.createElement("script");
radioScript.src = "//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js";
radioScript.async = true;
radioScript.type = "text/javascript";
document.head.appendChild(radioScript);
radioScript.onload = function(){
console.log("Loaded script");
rjq('#rjp-radiojar-player').radiojar('player', {
"streamName": "stream-url"
});
}
});
And the XCode log:
⚡️Loading app at capacitor://localhost...
Reachable via WiFi
APP ACTIVE
⚡️[log] - onscript loading complete
⚡️WebView loaded
⚡️To Native ->App addListener 66527687
⚡️[log] - Hello
Conclusion
Does any one know what leads to the script not being loaded? Or mabye sees/knows a different problem in my approach, i would be thankful for any advice and or hint.
Update
I managed to load the script so it is available at runtime now, but the code referencing it is still not being executed.
What solved the loading problem: Add https to the src of the script tag
<script type="text/javascript" src="https://www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
What is not yet working: I think the stream of the player or the player itself is still not initiated. I put a console.log within one of these code snippets, but it is not visible in the console.
rjq('#rjp-radiojar-player').radiojar('player', {
"streamName": "stream-url"
});

Existing Functions aren't Functions?

So I'm working on a project. My functions are working fine, until all of a sudden I click a button that should run download(), but it doesn't. So I open the console, and see this:
TypeError: download is not a function
And I'm confused. I run download() from the console, and it works fine. So I think it might be an issue with onclick (my button has onclick="download()"), so I use JavaScript to add in the click event instead.
$("#download").onclick=download()
Note: $() is a custom jQuery-esque function without using the framework itself. It's worked on a lot of other uses at the same time as this problem.
But that doesn't work either. So I also try using
$("#download").addEventListener("click", download)
That yet again doesn't work. Both times it said that $() was null. So I go out on a limb, and try using
document.getElementById("download").onclick=download()
and the same with addEventListener(). But that gives me a very surprising error message:
TypeError: document.getElementById(...) is null
I've repeated all expressions in the console and found that they aren't null. I don't click the button until the page has been loaded very several seconds.
Here is the pertinent code:
function $(el){switch(el[0]){case"#":return document.getElementById(el.substring(1));break;case".":return document.getElementsByClassName(el.substring(1));break;default:return document.getElementsByTagName(el);break;}}
function download() {
alert("download() executed")
}
// Attempted Scripts:
//$("#download").onclick = download()
//$("#download").addEventListener("click", download)
//document.getElementById("download").onclick = download()
//document.getElementById("download").addEventListener("click", download)
<a class = "nav-link nohighlight" id = "download" onclick = "download()">Download</a>
It feels like my web browser is just trying to ensure I don't run the function. I've tested this on the latest Edge and Firefox. You can see my full page here.

Look at where your script tag is in your HTML: it's above the body. Scripts by default run immediately: when the HTML parser runs across them, it immediately executes the script before moving on to parse the rest of the HTML. So, at the time your script runs, none of your elements have been created yet - so, selecting any element will fail.
Either wrap your entire script in a DOMContentLoaded listener function:
document.addEventListener('DOMContentLoaded', () => {
// put your whole script here
});
Or give your script tag the defer attribute, which directs the parser to run it only once the document has been fully parsed:
<script src = "index.js" defer></script>

How do I take code from Codepen, and use it locally?

How do I take the code from codepen, and use it locally in my text-editor?
http://codepen.io/mfields/pen/BhILt
I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on.
<!DOCTYPE HTML>
<html>
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="celtic.js"></script>
<link rel="stylesheet" type="text/css" src="celtic.css"></link>
</head>
<body>
<canvas id="animation" width="400" height="400"></canvas>
</body>
</html>
I have copy, pasted and saved the css and js into different files and saved them, then tried to link them into the html file as I have shown above.
I have also included the jquery library as I understand a lot of the codepen creations use it.
The only console error I'm getting is
Uncaught TypeError: Cannot read property 'getContext' of null
which is linking to my js file, line 4
(function(){
var canvas = document.getElementById( 'animation' ),
c = canvas.getContext( '2d' ),
Sorry if this is dumb, but I'm new to all this.
I'm sure this is basic as hell. Any help would be awesome!

Joe Fitter is right, but I think is better to export your pen (use the export to export.zip option for using your pen locally). This will give you a working version of your pen without having to copy and paste the CSS, JavaScript and HTML code and without having to make changes on it for making it work.

Right click on the result frame and choose View Frame source. And you can copy the source code and paste it in your own text-editor.

It seems your javascript is running before the HTML has finished loading. If you can use jQuery put the js inside of this;
$( document ).ready(function() {
// js goes in here.
});
either u can try this....
function init() {
// Run your javascript code here
}
document.addEventListener("DOMContentLoaded", init, false);

looks like you are calling the JS before the DOM is loaded.
try wrapping it in a
$(function() {
// your code here
});
which is the same as
$(document).ready(function() {
// your code here
});
if you are using jQuery.
or you could include the <script> tag after the content, just before the closing body tag, this will ensure the content has been rendered before the JS is executed
Or you could name the function in your JS and execute it onLoad of the body:
<body onLoad="yourFunction();">

To download the computed html of a codepen, go to the codepen of your choice,
then click the "Change View" button and go to the "full page" mode.
Now depends on your browser.
Firefox
display the source code (Cmd+u) and go at the very bottom.
Look for the last iframe and click on the value of the src attribute.
There you go.
Chrome
Right click in the page (not the codepen header) and choose the View FRAME source (not the view PAGE source) option.
There you go.

Link + on(pagecontainershow) fail

I have a simple app done with jQuery Mobile, in some point I have this:
Start!
which loads a new HTML with a lot of jquery mobile pages:
<div data-role="page">
I have defined, in my external JS file, an global variable:
var startTimeQuestion;
And this method, which is inside my HTML (test_es.html):
<script>
$(document).on('pagecontainershow', function() {
console.log("Storing time..");
startTimeQuestion = new Date().getTime();
});
</script>
The problem is that when I click on the button it loads correctly the file but it seems like it don't load the JS or the function or I don't know, because when I'm going to use my startTimeQuestion variable it says UNDEFINED and it don't show in the console the 'Storing time..'. If a reload the page, it works fine.
I have tried to do an '$.(document).ready()' function for the first time I load the page but still not working. It looks like test_es.html it isn't loading my custom.css and my test.js file until I reload completely the page. So I supposed that the error is in how I call my test_es.html, it isn't this:
Start!
the correct way to do it?
Thanks.

Thanks to the comment before I found the solution, it was as simple as put the 'data-ajax' attribute to false this way:
Start!

Dynamically change thr URL of the Pin It (Pinterest) button

I'm currently trying to add social networks's buttons to my website but I've encountered an issue with the Pin It button from Pintesrest. I'd like to dynamically change the URL of the pin but unfortunately, it seems to not working. Did I do something wrong?
<script type="text/javascript">
var urlpin = document.location.href;
function buildPinUrl(urlpin, urlmedia, description) {
return '//pinterest.com/pin/create/button/?'+
'url='+encodeURIComponent(urlpin)+
'&media='+encodeURIComponent(urlmedia)+
'&description='+encodeURIComponent(description);
}
$(document).ready(function(){
var urlmedia = $("#stamp1").attr("src");
var description = $("#title").text();
var goodurl = buildPinUrl(urlpin, urlmedia, description);
$('#pinbtn').attr('href', goodurl);
});
</script>
And here the button:
<!-- Pin It Button --><a id="pinbtn" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fcollectionnies.com&media=http%3A%2F%2Fcollectionnies.com&description=Next%20stop%3A%20Collectionnies" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a><!-- Pin It Button -->
Thanks for your help.

With jQuery 1.6+ (up to edge), this works fine:
http://jsfiddle.net/mmKcR/
Check to make sure that jQuery is loaded before this code appears in the html. Also make sure you are not loading jQuery in noConflict mode, as this will break the use of the $.
If this still fails for you, use the Chrome/Firefox inspector to view any console errors.
If you see an error like:
Uncaught ReferenceError: $ is not defined
One of the two above issues is at fault.