Chaining dynamic Select/Option boxes together
by pizzipie from LinuxQuestions.org on (#4YS5R)
Hi,
I have a directory with several databases each containing multiple tables. I am trying to create a program where Select/Options boxes are utilized to 1. Pick one database from several options. 2. Pick one table from several options produced from the selection in 1. and 3. Send the final database and table to the Server via AJAX in order to query the database.
To implement 1. I use PHP to select databases from a directory. I dynamically create a form containing the first Select/Options box. This works fine. 2. I select a database and send it to the server via AJAX this works fine. I get the Tables returned and a Select/Options box is created ONLY if I don't try and enclose the S/O box with <form> tags. Everything goes to hell if I do that. How do I pick an option from the second Select/Option box?
Here is my code:
Code:<?php
error_reporting (E_ALL ^ E_NOTICE);
ini_set("display_errors", true);
error_reporting (E_ALL ^ E_NOTICE);
include("../myPhpFunctions.inc"); // contains lf(); sp(); myprint; check_input();
// shows break space print_r on browser
$orgdir=getcwd();
$dir="/home/rick/DB-sql/";
$rows=$files=array();
// =====================================================
// change to working directory where the databases are and get the *.db files
// =====================================================
chdir($dir);
// get the available db file names
if (is_dir($dir)){
if ($dh = opendir($dir)){ // open dir and read contents
while (($file = readdir($dh)) !== false){
if(substr($file, -2)=="db") {
$files[]=$file;
}
}
}
}
closedir($dh);
// ==================== HTML =================================
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Renovation and Maintenance Log 03Jan2010</title>
<!-- ============== styles ================ -->
<link rel="stylesheet " type="text/css" href="../css/renoAZID.css" />
<!-- ============== scripts1 ================ -->
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
</head>
<!-- =============== html ================== -->
<body>
<div class="header">
<h3><img src="../images/AmericanFlag2.png" alt="Company logo" height="90px" /> Renovation & Maintainance Log
<h4>Choose a Database and Table to Query</h4></h3>
<p><b>Choose a Database</b></p>
</div>
<div class="dbForm">
<form name="dbForm" id="dbForm" action="" method="post">
<!-- <select multiple="multiple" name="database[]"> to pick multiple choices-->
<select id="database" name="database" size="5">
<?php
foreach($files as $file) {
echo "<option value=".$file.">".$file."</option>".lf();
} // foreach
?>
</select>
<p><input type="submit" id="sub" name="submit" value="Choose Database" /></p>
</form>
<br />
</div>
<div class="results" id="result" >
</div>
<script type="text/javascript" >
$(document).ready(function(){
var table="";
var database="";
$('#dbForm').submit(function (e) {
database=$("#database option:selected").text();
e.preventDefault();
var request = $.ajax({
url: "getTblInfo.php",
type: "POST",
data: {"database":database},
dataType: "json"
});
request.done(getAvailableTable );
request.fail(showError);
<form name="tblForm" id="tblForm" action="" method="post"> // This doesn't work MSG: // "Sending request to XXX" flashes on the screen and disappears from view leaving // blank screen. If <form> tags not used the Select/Option box is created fine but then there // is no way to pick and Option!!!
function getAvailableTable(data) {
$("div.results").append('<p><b>Choose a Database Table</b></p>');
$("div.results").append('<select id="tblbx" name="tables" size="5">');
$.each(data, function (index, value) {
$.each(value, function (a, b) {
if (b=='sqlite_sequence') {
return false;
}
$("#tblbx").append('<option value='+b+'>'+b+'</option><br />');
});
$("div.results").append("</select>");
});
} // getAvail
<p><input type="submit" id="sub2" name="sub2" value="Choose Table" /></p>
</form>
function showError( jqXHR, textStatus ) {
console.log('An error occurred Idiot.');
alert(textStatus);
//console.log(data);
}
}); // frm.submit
/*
$('#tblForm').submit(function (e) {
table=$("#tblbx option:selected").text();
e.preventDefault();
getRenovationData(database, table );
})
*/
}) //ready
</script>
<script type="text/javascript" >
$(document).ready(function(){
function getRenovationData(dbase, tbl) {
alert("database and table chosen "+dbase+" : "+tbl);
}
});
</script>
</body>
</html>
<?php
chdir($orgdir);
?>
Attached Thumbnails
I have a directory with several databases each containing multiple tables. I am trying to create a program where Select/Options boxes are utilized to 1. Pick one database from several options. 2. Pick one table from several options produced from the selection in 1. and 3. Send the final database and table to the Server via AJAX in order to query the database.
To implement 1. I use PHP to select databases from a directory. I dynamically create a form containing the first Select/Options box. This works fine. 2. I select a database and send it to the server via AJAX this works fine. I get the Tables returned and a Select/Options box is created ONLY if I don't try and enclose the S/O box with <form> tags. Everything goes to hell if I do that. How do I pick an option from the second Select/Option box?
Here is my code:
Code:<?php
error_reporting (E_ALL ^ E_NOTICE);
ini_set("display_errors", true);
error_reporting (E_ALL ^ E_NOTICE);
include("../myPhpFunctions.inc"); // contains lf(); sp(); myprint; check_input();
// shows break space print_r on browser
$orgdir=getcwd();
$dir="/home/rick/DB-sql/";
$rows=$files=array();
// =====================================================
// change to working directory where the databases are and get the *.db files
// =====================================================
chdir($dir);
// get the available db file names
if (is_dir($dir)){
if ($dh = opendir($dir)){ // open dir and read contents
while (($file = readdir($dh)) !== false){
if(substr($file, -2)=="db") {
$files[]=$file;
}
}
}
}
closedir($dh);
// ==================== HTML =================================
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Renovation and Maintenance Log 03Jan2010</title>
<!-- ============== styles ================ -->
<link rel="stylesheet " type="text/css" href="../css/renoAZID.css" />
<!-- ============== scripts1 ================ -->
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
</head>
<!-- =============== html ================== -->
<body>
<div class="header">
<h3><img src="../images/AmericanFlag2.png" alt="Company logo" height="90px" /> Renovation & Maintainance Log
<h4>Choose a Database and Table to Query</h4></h3>
<p><b>Choose a Database</b></p>
</div>
<div class="dbForm">
<form name="dbForm" id="dbForm" action="" method="post">
<!-- <select multiple="multiple" name="database[]"> to pick multiple choices-->
<select id="database" name="database" size="5">
<?php
foreach($files as $file) {
echo "<option value=".$file.">".$file."</option>".lf();
} // foreach
?>
</select>
<p><input type="submit" id="sub" name="submit" value="Choose Database" /></p>
</form>
<br />
</div>
<div class="results" id="result" >
</div>
<script type="text/javascript" >
$(document).ready(function(){
var table="";
var database="";
$('#dbForm').submit(function (e) {
database=$("#database option:selected").text();
e.preventDefault();
var request = $.ajax({
url: "getTblInfo.php",
type: "POST",
data: {"database":database},
dataType: "json"
});
request.done(getAvailableTable );
request.fail(showError);
<form name="tblForm" id="tblForm" action="" method="post"> // This doesn't work MSG: // "Sending request to XXX" flashes on the screen and disappears from view leaving // blank screen. If <form> tags not used the Select/Option box is created fine but then there // is no way to pick and Option!!!
function getAvailableTable(data) {
$("div.results").append('<p><b>Choose a Database Table</b></p>');
$("div.results").append('<select id="tblbx" name="tables" size="5">');
$.each(data, function (index, value) {
$.each(value, function (a, b) {
if (b=='sqlite_sequence') {
return false;
}
$("#tblbx").append('<option value='+b+'>'+b+'</option><br />');
});
$("div.results").append("</select>");
});
} // getAvail
<p><input type="submit" id="sub2" name="sub2" value="Choose Table" /></p>
</form>
function showError( jqXHR, textStatus ) {
console.log('An error occurred Idiot.');
alert(textStatus);
//console.log(data);
}
}); // frm.submit
/*
$('#tblForm').submit(function (e) {
table=$("#tblbx option:selected").text();
e.preventDefault();
getRenovationData(database, table );
})
*/
}) //ready
</script>
<script type="text/javascript" >
$(document).ready(function(){
function getRenovationData(dbase, tbl) {
alert("database and table chosen "+dbase+" : "+tbl);
}
});
</script>
</body>
</html>
<?php
chdir($orgdir);
?>
Attached Thumbnails