Geodata dropdown configurator not showing countries - javascript

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.

Related

How to pass dropdown value from JavaScript to Python using Eel correctly?

I am creating a GUI using Python Eel.
In this UI I have a drop down. user will select the value of dropdown and submit and that dropdown value will reflect in Python console.
But I am unable to receive value from JavaScript.
This is my Python code:
from random import randint
import eel
eel.init("web")
# Exposing the random_python function to javascript
#eel.expose
def random_python():
print("Random function running")
return randint(1,100)
#eel.expose
def getList():
lst = ["a","b","c","d"]
return lst
eel.spawn(eel.js_myval()())
eel.start("index.html")
This is my JavaScript:
let lst =document.getElementById("cate")
document.getElementById("submit").addEventListener("click",()=>{
eel.expose(js_myval)// here i am using eel expose
function js_myval(){
return lst.value;
}
})
This is my html:
<select name="meesho_category" id="cate">
<option value="x">x</option>
<option value="x">a</option>
<option value="x">b</option>
</select>
Read these
Pass JavaScript Variable Value to Python with Eel
https://github.com/ChrisKnott/Eel
I'm going to answer your narrow question about passing the dropdown value from JavaScript to Python, and ignore code that isn't related to that question.
First, let's rewrite your JavaScript like this so it focuses on your question:
document.getElementById("btn-submit").addEventListener("click",()=>{submit()}, false);
function submit() {
eel.on_submit(document.getElementById("cate").value)
}
That JavaScript code defines a click handler for the btn-submit button, which will read the value of cate dropdown and send it to Python code.
Next, let's do the same trim down of the Python file:
import eel
eel.init("web")
#eel.expose
def on_submit(cate_dropdown_val):
print(f"cate val submitted: {cate_dropdown_val}")
eel.start("index.html")
This code exposes the on_submit function from Python to JavaScript. You'll notice it's being called in the JavaScript block listed above inside of the submit function.
Lastly, let's look at the HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="eel.js"></script>
</head>
<body>
<select name="meesho_category" id="cate">
<option value="x">x</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<button id="btn-submit">Submit</button>
</body>
<script type="text/javascript" src="js/app.js"></script>
</html>
This HTML defines the cate dropdown element, a Submit button, and imports the eel.js and custom app.js shown above.
When the application is run, and a user clicks the submit button, the Python console will print out the value of the cate dropdown to the console.
From the other code in your example, it looks like you want to build more stuff. Please open a new question with the additional help you might need.

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.

Passing Variables from one page to another

Im trying to pass a value from one page for a product to another page for the cart.
I've tried a few different options but haven't managed to come up with any solution.
I'm new to html and javascript so need a simple solution if thats possible so that I can understand.
Product Page
<label for="exampleFormControlSelect1">Example select</label>
<div>
<select class="form-control" id="Selected">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</div>
<button id='btn' type="button" class="btn btn-secondary">Add To Cart</button>
<script type="text/javascript">
var value=0;
function send_selected(){
var selector = document.getElementById('Selected');
var value = selector[selector.selectedIndex].value;
sessionStorage.setItem(value);
}
document.getElementById('btn').addEventListener('click',send_selected);
</script>
Cart page
<script type="text/javascript">
var value = sessionStorage.getItem("value");
document.getElementById('display').innerHTML = value;
</script>
<body>
<div id="display"></div>
</body>
I would need to value from the drop down to be passed to the cart page to work out the value for all the users products selected.
You need to add two arguments to sessionStorage: key and value. Something like this:
sessionStorage.setItem("selectValue", value);
Also, as far as I know if you work with local html files opened like path/cart.html in the browser, the sessionStorage can't help you; it's scope is limited to the page. If you serve them through localhost, you'll be alright.
If this pages have different url, you can do it with query params: https://en.wikipedia.org/wiki/Query_string
By Browser Storage Method :
As mentioned by #Ferenc, the setItem method of session storage takes two parameters.
sessionStorage.setItem("selectedItem","value");
or you can use
sessionStorage["selectedItem"] = "value";
And to retrieve the value anywhere else in the browser you can either use the getItem() method or you can go with the array like value access approach i.e.
var value = sessionStorage["selected"];
But I would suggest you go with localStorage instead of sessionStorage, Because of it's larger scope than the sessionStorage scope.
You can read difference b/w session storage and local storage here.
Note: You can check for errors in your javascript code(Which now occurs when you call the getItem method with a single parameter ) by looking in the browser console.
By Query Parameters:
Well, this is not a recommended method if you are not using any server-side language. i.e. Java, PHP etc.
In this case, you append the query string in url. i.e.
http://www.url.com?value=selected
To Read how to access query parameters by using javascript refer to this question.
It worked for me to add to the 1st HTML file:
where_from = document.getElementById("where_from").value;
sessionStorage.setItem("pass_to_other_form", where_from);
and then to the 2nd HTML file:
var from_other = sessionStorage.getItem("pass_to_other_form");

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.

Dropdown Navigation Menu Using Javascript in Wordpress

I've been working on a wordpress site for an internship and I'm wanting to embed javascript code in a page to create a dropdown menu that navigates the browser to the selected page.
I'm wondering, is there something special you need to do to allow js to work in a wp page?
I tried the following code embedded in the page using the html side of posting option:
<script language="javascript" type="text/javascript">
<!--
function menu_goto( menuform )
{
// see http://www.thesitewizard.com/archive/navigation.shtml
// for an explanation of this script and how to use it on your
// own site
var baseurl = "173.236.164.86/where-to-buy/" ;
selecteditem = menuform.newurl.selectedIndex ;
newurl = menuform.newurl.options[ selecteditem ].value ;
if (newurl.length != 0) {
top.location.href = baseurl + newurl ;
}
}
//-->
</script>
<form action="dummyvalue">
<select name="newurl" onchange="menu_goto(this.form)">
<option value="" selected="selected">----- Select A Product -----</option>
<option value="vene-prototype-version/">VENE Prototype Version</option>
<option value="configuration-vene-version/">VENE Configuration Version</option>
<option value="customized-vene-version/"> VENE Customized Version</option>
</select>
</form>
The dropdown menu appears, but fails to redirect the browser on change.
I have tried surrounding the code in the page with the tags and that has no effect either.
http://173.236.164.86/where-to-buy/
thanks for the help!
Developer Tools show a parse error in your JS. Probably from WP automatically inserting paragraph returns. Remove all the white space and carriage returns in the JS and try it.

Categories