11

I tried to show an example in this post, which was loading my custom scripts from GitHub, but the script failed with "Uncaught TypeError: $(...).selectmenu is not a function".

But if I copy the script from the file and put it in <script></script> then it worked.

Why does it fail?

$('#mySelect').selectmenu();
$('option:contains("B")').hide();
<link href="https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.js"></script>

<select id="mySelect">
    <option id="aaa">A</option>
    <option id="bbb">B</option>
    <option id="ccc">C</option>
</select>

Example with code from official jQuery

$('#mySelect').selectmenu();
$('option:contains("B")').hide();
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<select id="mySelect">
    <option id="aaa">A</option>
    <option id="bbb">B</option>
    <option id="ccc">C</option>
</select>

The network analysis shows that the scripts are successfully loaded (status: 200).

11
  • @ivarni, but if I load the code from the official source, e.g. https://code.jquery.com/ui/1.12.1/jquery-ui.min.js then it works ?? Is github blocking other websites from loading content from their site?
    – Black
    May 15, 2019 at 11:28
  • 1
    Hmm, apparently the jquery-ui network call returns with a 200 status but...nothing as a response payload? Weird. I wonder if it's GitHub blocking this.
    – VLAZ
    May 15, 2019 at 11:31
  • 1
    OK...weirder still. I was getting empty response in FF but Chrome does give me the correct response. It has the code and everything. It doesn't work, though - I get the exact same error that .selectmenu is not a function.
    – VLAZ
    May 15, 2019 at 11:34
  • I added another example with official jQuery sources instead of GitHub sources
    – Black
    May 15, 2019 at 11:36
  • Oh, also the CSS loaded from GitHub "works" (I get a 200 but it's still an empty response) in FF but in Chrome the request gets cancelled. Super strange all around. I'm leaving looking at this for now.
    – VLAZ
    May 15, 2019 at 11:37
  • I tried it again on my local machine and it also fails. So I think github is blocking it. But I would like to know how to figure out if someone is blocking and how to block
    – Black
    May 15, 2019 at 11:39
  • 6
    Canonical: stackoverflow.com/questions/17341122/… GitHub has explicitly disabled JavaScript hotlinking, and newer versions of browsers respect that setting., see Chrome error: Cross-Origin Read Blocking (CORB) blocked cross-origin response raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/… with MIME type text/plain.. In short, github fiddled with the MIME types to explicitly make their scripts not runnable May 15, 2019 at 11:51
  • This question should not be on Meta because it has nothing to do with the site
    – user985399
    May 15, 2019 at 13:57
  • 4
    @PauliSudarshanTerho I think the question is just fine, OP is trying to figure out how to load a certain external script into the Stack Snippet editor, so as to make his answers better. It's useful to be able to show readers that your solution works if they just press the "Run code snippet" button. While this is incidentally a problem which has similar discussions on main, I don't think that prevents it from being discussable here. May 15, 2019 at 20:48
  • 2
    This question is quite easily answerable with some of the exact content some users have posted as comments. Such a Q&A pair would be quite helpful on Meta for the users who try to do this same thing without knowing about GitHub's practices.
    – TylerH
    May 16, 2019 at 14:03
  • 1
    @TylerH You're right. I was too trigger-happy. Deleted my comments and added an answer instead.
    – Jeremy
    May 16, 2019 at 16:46

1 Answer 1

17

It is not possible to directly link to JavaScript files from GitHub repositories in Stack Snippets. It used to be possible to directly include files from their "raw" links, but this wasn't an intended use case and the traffic volume started to become problematic, so GitHub modified the headers on these files to prevent them from being included. Files are now served as text/plain, which modern browsers refuse to interpret as JavaScript.

Instead, you can use the third-party service jsDelivr, which provides CDN hosting for JavaScript source files from GitHub and NPM. In your case, the GitHub URL https://raw.githubusercontent.com/Eddcapone/custom_jquery-ui-1.12.1/master/jquery-ui.js would be converted to the jsDelivr URL https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.js, which we can import successfully. You may want to use a specific commit ID instead of a branch name to help the example remain stable and avoid cache confusion.

<script src="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.js" onload="document.body.textContent = 'loaded!'"></script>

However, be aware that until recently people were using a different service for this role: RawGit. It is shutting down because the service has been widely used for malicious purposes, and incurred high costs, which they were unable to get under control. I am not sure whether jsDelivr will be able to avoid these problems, or it will also shut down eventually. I would discourage linking files from GitHub if there is a better alternative (which there may not be in cases like this).

If you want to include an official release of a JavaScript library, Unpkg provides a web-friendly mirror of NPM packages and is more likely to remain stable long-term. For example: https://unpkg.com/[email protected]/build/release.js.

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .