We Keep Coding

Geodata dropdown configurator not showing countries

I decided to go with a shortcut method of getting a dropdown list of countries and states by using the geodata configurator:
<select name="country" class="countries order-alpha" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states order-alpha" id="stateId">
<option value="">Select State</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystate.js"></script>
I get this to work perfectly in JSBin but I can not get it to work on my site (Flask/Jinja).
I copied and pasted as you see here (though I did move the script tags to the bottom above the {% endblock %} of my template).
The fact the code works on JSBin but just gives me nothing on my site: https://gyazo.com/a67c8f738e95d57efac2c74e426c37b1
Makes me believe this is some mixup with Python or another JS Script.
I have <script src="https://code.jquery.com/jquery-3.5.1.min.js "... and <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> both loading too (from the base template).
From what I can tell all the scripts have loaded. Any other reason why the dropdown select isn't working?

I'm Andy, the developer of geodata.solutions.
It's difficult to say what the issue is without seeing your app, but the general things apply:
-Use the web developer console to see if anything is thrown up.
-My initial thoughts if no js errors are thrown is that you have another element with id countryId, and that's why it's not changing the dropdown.
-If you make a local copy of countrystate.js and use that, you can add console logs to the various events to see where the issue is. It's that initial function this.getCountries that you want to look at, which is triggered by the function at the bottom
jQuery(function() {
var loc = new locationInfo();
loc.getCountries();
jQuery(".countries").on("change", function(ev) {
var countryId = jQuery("option:selected", this).attr('countryid');
if(countryId != ''){
loc.getStates(countryId);
}
else{
jQuery(".states option:gt(0)").remove();
}
});
jQuery(".states").on("change", function(ev) {
var stateId = jQuery("option:selected", this).val();
if(stateId != ''){
loc.confCity(stateId);
}
});
});
-I'm not a python dev, so if it is related to a conflict with python, then someone with that background might have experience.
Please let me know how you get on. Anything I can do to make it more platform-neutral is appreciated.

Store data-select value of href link in local storage and use it to select dropdown option on new page

I have some links in my navigation bar dropdown that all direct to the same page, but depending on the link that was clicked, it should select a specific select box option on this page. I decided to store the href link value in local storage and call the value when the linked page is loaded using jQuery, but I get the message "null" when the new page is loaded.
This is the html of the navigation bar dropdown links:
Jackets
Shoes
Shirts
JavaScript to store selected value in local storage:
window.onload = function() {
var linkInput = $('a[href="newpage.php"]').click(function () {
($(this).data('select'));
localStorage.setItem("storelinkInput",linkInput);
}
JavaScript in newpage.php:
window.onload = alert(localStorage.getItem("storelinkInput"));
var $select = $('#selector');
$select.val("storelinkInput");
HTML of select box in newpage.php:
<form>
<select id="selector">
<option value="option1">Jackets</option>
<option value="option2">Shoes</option>
<option value="option3">Shirts</option>
</select>
</form>
Honestly I am not sure if it is the best solution to use local storage for this purpose, or if it would be better to use PHP for this. Any suggestions that would point me in the right direction are much appreciated!

Thanks to Lars' comment I could fix the code and now it is running. In case someone is looking for a solution to this or a similar question here is the functional code:
This is the html of the navigation bar dropdown links:
Jackets
Shoes
Shirts
JavaScript to store selected value in local storage:
$(document).ready(function(){
$('a[href="newpage.php"]').click(
function () {
var toStore = $(this).data('select');
localStorage.setItem("storelinkInput", toStore);
});
});
HTML of select box in newpage.php:
<form>
<select id="selector">
<option value="option1">Jackets</option>
<option value="option2">Shoes</option>
<option value="option3">Shirts</option>
</select>
</form>
JavaScript in newpage.php:
$('#selector').val(localStorage.getItem("storelinkInput"));
It is important to place the second javascript ("$('#selector').val...") after the select box in the html/PHP file.

JavaScript drop-down doesn't work after page loads

Under the "subjunctivisor" graphic on https://www.lawlessfrench.com/subjunctivisor/ there is a drop-down box based on simple JavaScript: you choose an item and are automatically forwarded to that page.
If you click the drop-down while the page is still loading, it sometimes works. But if you wait until the page fully loads, nothing happens when you click the drop-down - you can't even make a selection.
I've looked at this with web console but don't see any obvious errors.
Here's the relevant part of the script:
<script type="text/javascript">function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") { location=form.select.options[index].value;}} </SCRIPT>
<FORM NAME="form1"> <SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1">
<option value="">Choose a verb or expression</option>
<option value="https://www.lawlessfrench.com/subjunctivisor/accepter/">accepter que</option>
<option value="https://www.lawlessfrench.com/subjunctivisor/accorder/">accorder que</option>
(omitted 250 other options)
</select>
</form>

It appears that your right-click blocker has functions to disable select elements (for some strange reason). Remove it because it doesn't do you any good anyway.
Look for this function in particular (and its IE equivalent):
function disableselect(e) { ... }
It resides in an inline script tag that looks like this:
<script type="text/rocketscript" data-rocketoptimized="true">
Update: I may have misinterpreted what that function does. It's worth a try removing it, however.

Solution: the Content Copy Protection & Prevent Image Save plugin had an option to disable selection. Once I unchecked that option, the js worked.

How to open a URL link from JavaScript inside a Google Apps Script HTML Google Site Gadget

I have written an HTML (not UI) gadget in Google Apps Script to be embedded in a Google Site. The gadget presents a drop-down with options that contain URL/display name value/text pairs.
I want to put a button in the gadget that opens a new window corresponding to the selected URL. But, basically, I get an "Object does not contain an 'open' method" error when I execute
window.open(url);
Is there a way around this? I can (and have) created gadgets with anchor tags that successfully open other windows, but doing this same action from javascript appears to not be allowed.
Anything that accomplishes the functionality is fine. A jQuery-based solution would be great.
Thanks.

Due to Caja’s sanitization, all the javascript functions are not supported that's why can't open a new window in App Script.
The workaround to display a popup in App Script is to use an overlay window(which is not a popup technically but appears like a popup) like jQuery modal dialog which are supported in App Script.
http://jqueryui.com/dialog/#modal-form
However iframe tags are not supported in App Script, so an attempt to open a url in modal window with the help of iframe tags will not work.
You can read more about these restriction in App Script from the link below :
https://developers.google.com/apps-script/guides/html/restrictions**
Hope it helps!

You can open the link directly by running the window.open() JS in a dialog using the HTMLService.
Here's a demo sheet (take a copy to see the script).
openNewWindow() is assigned to the button.
Code.gs:
function openNewWindow() {
var htmlString =
'<div>' +
'<input type="button" value="Close" onclick="google.script.host.close()" />' +
'</div>' +
'<script>window.open("http://www.google.com")</script>';
var htmlOutput = HtmlService
.createHtmlOutput(htmlString)
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setHeight(60);
SpreadsheetApp
.getUi()
.showModalDialog(htmlOutput, 'Opening New Window...');
}

It's not possible to do that because of caja sanitization. The options bellow will not work.
1) jquery - $("#some_link_id").click()
2) javascript - window.open, window.href, etc...
The only workaround but I guess that will not fit to your problem is creating links with target="_blank" to open new windows but as I said is not possible to click in these links though javascript/jquery.
My Link

I was able to achieve this using a form. On submit, set the action of the form to the desired URL, as determined by the selected item in the select box.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('document').ready(function(){
$('#yourForm').attr('onsubmit',null); //set onsubmit to Null for NATIVE Caja sandboxmode
$('#yourForm').submit(function(){
var val = $('#yourSelect').val(); //get value of select box
$('#yourForm').attr('action',val); //set action of form
});
});
</script>
<div>
<select id="yourSelect">
<option value="https://www.google.com">Google</option>
<option value="https://www.bing.com">Bing</option>
</select>
<form id="yourForm" method="get" target="_blank" action="">
<input type="submit" value="Open Selected">
</form>
</div>

html5 form drop down menu, with menu items in javascript or jquery?

I have this form set up as a basic drop down menu that goes to whichever link / option is selected immediately, but I was wondering if it was possible / how to append all of the options in JavaScript in a separate file? I am just starting to learn JavaScript, so any explanation would be exceptionally helpful too. Thank you for your time!
<form name="nav">
<select name="navigation" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO" style="width:100%;">
<option selected="selected">go to...</option>
<option value="index.html">PROJECTS</option>
<option value="about.html">ABOUT</option>
</select>
</form>

Here's a demo to start with
The HTML
<form id="my-form">
<select name="navigation">
<option>Go to...</option>
</select>
</form>
Now we just encode the navigation options in a JSON object and dynamically load them into the select element
var navigation = [
{"title": "PROJECTS", url: "index.html"},
{"title": "ABOUT", url: "about.html"}
];
var select = document.getElementById("my-form").navigation;
for (var i=0, option; i<navigation.length; i++) {
option = document.createElement("option");
option.value = navigation[i].url;
option.innerText = navigation[i].title;
select.appendChild(option);
}
select.addEventListener("change", function(event) {
window.location.href = select.value;
});
This is vanilla JavaScript, but you could use jQuery if you like that better.

I dont how much You know JS or which framework (server, client) You are using. But regardless of that You could for example try to built navigation here using content sent from the server.
For instance You generate the request in the client side, that You want to load navigation dynamically into this select and on a success ajax You populate the dropdown.
Write more about the frameworks You are using. Is the JS pure JS or perhaps jQuery.
BTW. The code You've posted isn't exactly HTML5-way of building the dropdown.
Go to HTML5 Form elements and take a look on the very first example with
<input list="browsers">

You can do this:
var str = '<option selected="selected">go to...</option>'+
'<option value="index.html">PROJECTS</option>'+
'<option value="about.html">ABOUT</option>';
$('#formId').html("");
$('#formId').append(str);
Hope this helps.