I'm trying to replace some radio buttons with the nice-looking JQueryUI kind. However, when I copy the sample code at http://jqueryui.com/button/#radio (which works fine as seen on that page) directly into "test.htm" and open that in the same browser, I get plain, unstyled radio buttons.
How about the example code at http://www.tutorialspoint.com/jqueryui/jqueryui_button.htm under "Default Functionality"? In my browser, the text describes making a set of radio buttons (ie. only one can be selected), yet their example is a set of checkboxes (of which 0-all can be selected). I tried pasting their code into a file and opening that. I get the same result as on their demo page: nice-looking grouped checkboxes. Turning the input type into "radio" makes them not work; clicking does nothing.
How can it be that the official JQueryUI example code is not working on this computer even though it works in the demo on the page where that code appears? More to the point, what do I need to do to make a simple set of radio buttons, styled in something like the JQueryUI style*, that function like normal radio buttons?
*(I might want to recolor them later but that's less important.)
Browser is Firefox 42. PC is behind a work firewall but apparently can use JQueryUI code well enough to show me demo pages. Answers will be easiest for me to read if they're inline and not linked through some other site.
Try being more specific with the URL's you're using for the jQuery assets, like this (prefixing with https: and providing a full-path for the demo stylesheet):
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
If you inspect the page and view your developer console, you should see errors for any resources that aren't loading.
The reason it wasn't working before is because just using //path_to_file.js is using what's called "protocol relative" URL's. Rather than specifying HTTP or HTTPS, you can use the protocol relative URL and it will use whatever your browser is using. The problem is that if you're loading a static file locally, it'll be using the file:// protocol and will attempt to load your js and css includes using the file: prefix.