Develop Reference

Issue running function from external js file

I am trying to do something which I feel should be elementary and basic but it is not working. I have looked at many related Stackoverflow QAs but none covers this exact issue.
I want to run a function from an external js file called main.js. The file is loaded at the bottom of the body section of an html page in the usual way. All contents of the file is within the standard jQuery wrappers. I know it is loading properly because I can see it in Developer Tools and various animations coded in it are running correctly. I have jQuery 3.3.1 loaded in the head section of the page and again it must be loading properly because the animations are working.
As a test I have the following function in main.js:
function alerttest() {
alert('Function test works');
}
Then in the main body of the html page I call the function as follows:
<script>
alerttest();
</script>
So when I refresh the page I should get an alert but this does not happen. I get an error in the console:
Uncaught ReferenceError: alerttest is not defined.
This would happen if I loaded scripts in the wrong location so I also tried this to call the function so the DOM would be loaded first:
<script>
$(function() {
alerttest();
});
</script>
but I get the same Reference error. Can anyone suggest what is going on?
Environment: Windows 10, VSCode, Codeigniter 3, jQuery 3.3.1, WAMP with PHP 7.4.7

I believe I have solved the problem and, as I suspected, it was about the location of scripts. I have always been advised to include scripts at the bottom of the page just above the closing body tag but this didn't work in this instance. I have now located my main.js in the head section along with the jQuery CDN and everything works just fine.
Many thanks for responding.

How do I force jQuery to load first?

I am trying to add bootstrap-select to my Flask app and I keep running into the error "TypeError: $(...).selectpicker is not a function". Everything I've read says this only occurs if you load jQuery again after loading bootstrap-select.js, so I went through and cleaned up my scripts, ensuring that jQuery was being loaded before all my other JS scripts, like so:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"> </script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
However, I was still getting the same problem. I decided to take a look at the order of loading in the chrome developer tools window, and now I think my problem is this: jQuery is being queued for loading before bootstrap-select, but it's not actually starting the download until after bootstrap-select has already finished. I suspect this is because of the difference in size between the two.
Is there any way I can force my other scripts to delay loading until after jQuery has already loaded? Or if I figure out how to cache a copy of jQuery in my static directory, will that help?
Edit: Wow, okay, I got a lot of comments on this! To try and clarify as much as possible, I'm just going to make some notes:
After thoroughly checking all my scripts, I can confirm that only one copy of jQuery is being loaded.
This is not an https page, I'm running it locally on a Flask development server.
I checked the bootstrap-select url I have in my code and it is the correct one. Sorry, I'm not sure why it left out the dash when I was copy-pasting. I have corrected the question accordingly.
I have been using the Network tab in chrome's dev tools to check loading successes/times.
I moved my jQuery to the very beginning of the file to ensure it would load first, and I can now confirm it is finished loading before bootstrap-select loads.
Despite all this, I'm continuing to get the same error, so if anyone has other suggestions I would appreciate them. I'm completely out of ideas at this point.

You should put defer at the end of both script tags, so they are loaded in order no matter what, like this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapselect/1.13.1/js/bootstrap-select.min.js" defer></script>

Try changing the URL for your bootstrap select library to:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js

I have the solution and it's dumb as heck.
I was adding my scripts to the same place the previous developer added theirs, in the base template that all my other templates extend. The thing is, they added theirs to the end of the page, after the body tag was closed (presumably to make page loading faster). The little bit of jQuery which was using selectpicker was in the body, and was thus trying to load the function prematurely.
Thanks for all your answers!

Adding Google Content Experiments code to a single page of Angular 1 application

I have Google Content Experiments code which looks like this:
<script type="text/javascript">
function utmx_section(){}function utmx(){}(function(){var
k='1234566789-0',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
'://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
</script>
<script type="text/javascript">utmx('url','A/B');</script>
I need to add it to an Angular app, but only to a single page. The problem is that it uses document.write() which makes the page go blank if added dynamically. If I add it statically to the main index.html it will load on all pages, not just the one I want. Is there a way around this? I believe it could be done with server-side rendering, but I don't have it set up right now, and doing it just for this little script seems like an overkill.

You should use content experiments api instead https://developers.google.com/analytics/solutions/experiments-client-side
But, it doesn't work well with Single Page Apps, yet...

JQuery interferes with bokeh.js. Why?

TL;DR: my index.html declaration of jQuery with bokeh.js interferes with the ability for the script tags in the php page to manifest themselves into the div that they are supposed to be loaded into. Why?
I've been trying to embed the output of graph.create_html_snippet() from the python bokeh package. I was having so much trouble that I made a separate test html page just to post it to SO, when I discovered that my test page worked! Here it is:
<html>
<head>
<script src="js/bokeh.js"></script>
<script>
$(document).ready(function() {
$("#get_graph").click(function() {
$("#show_graph").load('hello.php');
});
});
</script>
</head>
<body>
<!-- click this to bring up graph -->
<div id="get_graph" style="width:100px;height:30px;background-color:#ddd;">Show graph</div>
<div id="show_graph"></div>
</body>
</html>
And hello.php is here:
<?php
echo 'hello';
?>
<script src="31b1ad52-e095-4ba1-89d0-69f0b898d677.embed.js" bokeh_plottype="embeddata" bokeh_modelid="31b1ad52-e095-4ba1-89d0-69f0b898d677" bokeh_modeltype="Plot" async="true"></script>
So now, confronted with the mystery of why it wouldn't work on my real page (not posted for brevity) and why it would work on my test page, I started subbing things in and out until I added this to the head of the my test page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
And then things stopped working. But then I realized, wait a minute, how did my original test page work in jQuery if I didn't give a script for jQuery in my <head>? I went back to my main page and deleted the JQuery script, and suddenly the embeddding worked okay. So I went into the bokeh.js script and found a bunch of calls to jQuery I don't quite understand.
Why is my declaration of jQuery interfering with bokeh.js? When I load the php page using a jQuery declared html page, the html element the php was loaded into will not have the script tags loaded into it, but all other php commands are okay. What's the deal? Since I solved the question while writing this, I guess my question is more out of curiosity/help for people who might run into the same thing, since embedding bokeh using php is one of the best applications for it.
Thanks for any help.

This is a recently discovered issue, you can track progress at:
https://github.com/ContinuumIO/bokeh/issues/554
There should be a point release that includes a fix for this very soon.

JQM: How to break while debugging in a JS file loaded through $.mobile.changePage()

I am developing a mobile app using jQuery, jQuery mobile (and PhoneGap, but that is not relevant). Let's say I have two html pages: page1.html and page2.html. I am loading page2.html using $.mobile.changePage() from page1.html. The page div in page2.html (i.e., the div having data-role="page") contains javascript code that is specific to page2, which also gets loaded with page2.html. The code in page2.html looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="conf-page" data-role="page">
<script type="text/javascript" charset="utf-8">
<!-- MY SCRIPT HERE ----->
</script>
<div data-role="header" style="height: 45px">
Now I want to break somewhere in the javascript code in page2.html. For the time being, I am using Firefox (16.0.2) and Firebug to develop and debug. When page2.html is loaded, I see the JS code of page2.html at two places in firebug Scripts list:
At jQuery.min.js/eval/MD5/
At jQuery.min.js/eval/seq/<#>
If I put a breakpoint somewhere in one of the codes, it get applied to the code in (1) above, but it is never hit when page2.html is loaded.
How to go about setting a breakpoint and breaking somewhere in the JS code in page2.html? I couldn't find anything relevant on the web, which makes me think that I must be missing something, as this must be a pretty common requirement.

Looks like I was searching for different terms. There has been some discussions on this problem in this site. Here are a few references:
dynamically loaded js function does not appear in Firebug js debugger
Scripts added via jQuery not visible in FireBug
Debugging scripts added via jQuery getScript function
A few other ones.
There are two solutions suggested in the above threads:
Most of these threads suggest the same solution: use the "debugger;" statement (w/o the quotes) twice in the code for the FireBug debugger to stop. I did that, and it was a partial solution: the firebug did break, but the variable stack was empty. So this wasn't very useful.
Put the script in a file, use an AJAX Get call to load the script with crossdomain set to true, and that gets the script file, loads it and the script file shows in debugger. That can be used now to set breakpoints etc. More useful than above.
Keeping open to see if there are other solutions.