[SOLVED] Javascript - can't get return value - alerts fire prematurley
ProgrammingThis forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.
Notices
Welcome to LinuxQuestions.org, a friendly and active Linux Community.
You are currently viewing LQ as a guest. By joining our community you will have the ability to post topics, receive our newsletter, use the advanced search, subscribe to threads and access many other special features. Registration is quick, simple and absolutely free. Join our community today!
Note that registered members see fewer ads, and ContentLink is completely disabled once you log in.
If you have any problems with the registration process or your account login, please contact us. If you need to reset your password, click here.
Having a problem logging in? Please visit this page to clear all LQ-related cookies.
Get a virtual cloud desktop with the Linux distro that you want in less than five minutes with Shells! With over 10 pre-installed distros to choose from, the worry-free installation life is here! Whether you are a digital nomad or just looking for flexibility, Shells can put your Linux machine on the device that you want to use.
Exclusive for LQ members, get up to 45% off per month. Click here for more info.
Javascript - can't get return value - alerts fire prematurley
Hi Using Ubuntu 20.04
Can't get a return value from functio getChoice().
Also how do you stop the alert functions from going off prior to data being fed to them?? I know this is related to the 'return' problem but I can't discover how to fix this.
Thanks for help in fixing.
R
Code:
Excerpt from dbConnect.html
<script type="text/javascript">
$(document).ready(function(){
var db="";
$('#exit').click(function () {
location.href='xperFrontEnd.html'
});
$("#getdb").click(function () {
var request = $.ajax({
url: "getDbs-Tbls.php",
dataType: "json"
});
request.done(function(data) {
var dbases=new Array();
for (var i=0; i<data.length; i++) {
dbases[i]=data[i]['db'];
}
var y =getChoice(dbases); // function in dropdownDB.js
alert(y); // NOTHING HERE
}); // end done
request.fail(function (jqHR, textStatus) {
alert("failed at line 97");
});
}); //end #getdb
}); // end doc ready
</script>
Code:
Excerpt from dropdownDB.js
// ========= CREATE SELECT BOX & MAKE CHOICE ==============
function getChoice(data) {
var myselection="";
$('#dbsbox').show();
$('#dbsbox').append($("<h4>Make Your Choice</h4>")) // Header
.append("<select id='selbox' name='selbox' size='5'></select>"); // Select Box
for (const val of data) {
$('#selbox').append($("<option>").prop({ value: val, text: val })); // Options
} // for
$('#dbsbox').append("<br><br>");
$("#selbox").on('change', function () { // pick choice
myselection=$("#selbox option:selected").text();
$("input[name=dbase]").val(myselection);
$('#dbsbox').hide();
alert("my sel "+myselection); // SHOWS CORRECT VALUE
return myselection; // DOESN"T WORK
}); // change
// Alternate position for return myselection; DOESN"T WORK
} // end getchoice()
Can't get a return value from functio getChoice().
Also how do you stop the alert functions from going off prior to data being fed to them?? I know this is related to the 'return' problem but I can't discover how to fix this.
Code:
function getChoice(data) {
var myselection="";
$('#dbsbox').show();
$('#dbsbox').append($("<h4>Make Your Choice</h4>")) // Header
.append("<select id='selbox' name='selbox' size='5'></select>"); // Select Box
for (const val of data) {
$('#selbox').append($("<option>").prop({ value: val, text: val })); // Options
} // for
$('#dbsbox').append("<br><br>");
$("#selbox").on('change', function () { // pick choice
myselection=$("#selbox option:selected").text();
$("input[name=dbase]").val(myselection);
$('#dbsbox').hide();
alert("my sel "+myselection); // SHOWS CORRECT VALUE
return myselection; // DOESN"T WORK
}); // change
// Alternate position for return myselection; DOESN"T WORK
} // end getchoice()
There is no return value from getChoice(), the value returned from the anonymous function in blue is simply discarded (if I remember my JQuery correctly).
I'll try again. Hopefully this explains my problem a litttle better.
I am trying to use a dropdown box but can't get selected value outside of $("#selbox").on('click', function (). I have tried using return but that doesn't work. Any help greatly appreciated.
R
Code:
Place in program: <head>
<script type="text/javascript">
$("#returneddatabox").hide();
window.myselection=""; // declare global
</script>
Place in program: Just above </body>
// ========= dbases ==================
$("#getdb").click(function () {
var request = $.ajax({
url: "getDbs-Tbls.php",
dataType: "json"
});
request.done(function(data) {
for (var i=0; i<data.length; i++) {
dbases[i]=data[i]['db'];
}
getChoice(dbases); // this function is in dropdownDB.js see below console.log("myselection:103"+myselection); // output: "myselection:103 "
alert("myselection:104"+myselection); // output: localhost - myselection:104
}) // end request done
request.fail(function (jqHR, textStatus) {
alert("error at line 106");
});
}); // end #getdb
// ========= dropdownDb.js - CREATE SELECT BOX & MAKE CHOICE ==============
function getChoice(data) {
$('#dbsbox').show();
$('#dbsbox').append($("<h4>Make Your Choice</h4>")) // Header
.append("<select id='selbox' name='selbox' size='5'></select>"); // Select Box
for (const val of data) {
$('#selbox').append($("<option>").prop({ value: val, text: val })); // Options
} // for
$('#dbsbox').append("<br><br>");
$("#selbox").on('click', function () { // pick choice
myselection=$("#selbox option:selected").text();
$('#dbsbox').hide();
// return myselection; // doesn't work
alert( "line 23 getChoice "+myselection); // output: "line 23 getChoice contacts" ie: SHOWS VALUE
}); // change
alert( "line 25 getChoice "+myselection); // output: localhost - "line 25 getChoice"
} // end getchoice()
// =========================================================
Quote:
Sequence of visuals:
Start program click button "getdbases" (not shown above) Then:
You are mixing up async functions vs callbacks and regular functions.
If you think about it, the getChoice function cannot work. What it does is basically:
- show some html (a header and a select box).
- set up a callback function so when you click on #selbox, that function will be called.
- return - all done
When getChoice returns, you have not selected anything.
If you want to do something when something in the select box is selected, do it in the callback function.
Or another strategy is to make another button that does something. Then you can simply check $("#selbox option:selected").text() and give an error message if nothing is selected.
LinuxQuestions.org is looking for people interested in writing
Editorials, Articles, Reviews, and more. If you'd like to contribute
content, let us know.